Project Name: TaskFlow
(A Full-Stack Task Management Application)
Task 1: Environment Setup & Static Website Deployment
Step-by-Step Implementation Guide
k
as
Phase 1: Environment Setup
1. Install Tools:
tT
○ VS Code (with extensions: Live Server, Prettier)
○ Git
○ Node.js (includes npm)
2. Verify Installations:
3. bash
1s
○ Chrome DevTools (built into Chrome browser)
4. Copy
-
5. Download
is
git --version
node --version
ex
6. npm --version
N
Phase 2: Build Portfolio Website
ft
So
File Structure:
bash
Copy
Download
portfolio-site/
├── index.html # Home page
├── about.html # About page
├── contact.html # Contact page
├── styles/
│ └── main.css # Global styles
├── images/ # Store all images
└── README.md # Project documentation
Key Requirements:
✅ 3 Pages (Home, About, Contact) with consistent navigation bar
✅ Responsive Layout:
●
k
●
○ Mobile (≤768px): Stacked content, hamburger menu
as
✅
○ Desktop (>768px): Multi-column sections
● Modern CSS:
tT
○ Flexbox/Grid for layout
○ Media queries for responsiveness
○ Hover effects on buttons/links
Example Code Snippets:
1. Navigation Bar (HTML):
1s
2. html
-
3. Copy
is
4. Download
5. Run
ex
<nav>
<div class="logo">Portfolio</div>
<ul class="nav-links">
N
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
ft
</ul>
So
6. </nav>
7. Responsive Grid (CSS):
8. css
9. Copy
10.Download
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
@media (max-width: 768px) {
.projects {
grid-template-columns: 1fr;
}
11.}
k
as
Phase 3: Deployment
tT
Option 1: GitHub Pages
1. Push code to GitHub repository:
2. bash
3. Copy
1s
4. Download
-
git init
is
git add .
git commit -m "Initial portfolio"
git remote add origin https://github.com/username/repo-name.git
ex
5. git push -u origin main
6. Go to Settings → Pages → Set branch: main → folder: / (root)
tN
Option 2: Netlify
1. Drag/drop project folder to Netlify Drop
f
So
OR
2. Connect GitHub repository via Netlify UI
Skills Validation Checklist
Skill Evidence in Project
Git Basics Commit history showing incremental
progress
HTML5 Semantics Proper use of <header>, <section>, etc.
k
CSS Flexbox/Grid Responsive layout without breaking
as
Media Queries Mobile/desktop toggle via DevTools
tT
Deployment Live URL accessible via HTTPS
Deliverables
1s
-
1. Code Repo: GitHub repository with project files
2. Live Site: username.github.io/repo-name (GitHub Pages)
is
OR
your-portfolio.netlify.app (Netlify)
ex
3. README.md: Documenting setup steps and design choices
tN
Tips for Success
🔹 Test Early: Use Chrome DevTools → Device Toolbar to simulate mobile devices
f
🔹 Validate HTML: Run code through W3C Validator
So
🔹 Performance Check: Audit site with Lighthouse (in DevTools)
🔹 Content First: Focus on clear messaging before styling
Outcome: A professional portfolio deployed live—your first step into web development!
🚀
How Tasks Map to the Project
Task Project Component Deliverable
1 Developer Portfolio Personal static site (standalone)
2 TaskFlow Frontend (MVP) JS task manager w/ localStorage
k
3 TaskFlow Backend REST API for tasks
as
4 TaskFlow Database MongoDB integration
tT
5 TaskFlow Pro Auth + user-specific tasks (React + JWT)
6 TaskFlow Deployed 1sTested, CI/CD-pipelined live app
-
is
Key Benefits of This Project
ex
● Portfolio-Ready: Interns ship 2 deliverables (Portfolio site + TaskFlow).
● Progressive Complexity: Scaffolds from HTML to DevOps.
● Industry-Standard Tech:
N
ft
So
● Real-World Skills: End-to-end development of a marketable SaaS-like product.
Intern Outcome: A deployable full-stack application demonstrating competency across
the modern web stack. 🚀
k
as
tT
1s
-
is
ex
f tN
So
