| Week | Focus Area | Goals & Skills | Projects/Tasks |
|---|---|---|---|
| 1 | HTML, CSS & JS Basics | - HTML structure, forms, semantics - CSS basics, responsive design - DOM manipulation with JS - JS variables, loops, functions, ES6+ |
- Static portfolio site - To-do list app |
| 2 | Advanced JavaScript + Node.js | - Functions, arrays, objects - Event loop & async basics - Node.js runtime - Build simple server |
- Build Node.js server - Add JS logic to portfolio |
| 3 | Express & REST APIs | - HTTP basics & request/response - CRUD APIs with Express - Routing, middleware |
- Blog API with CRUD routes |
| 4 | Databases (MongoDB + SQL) | - NoSQL CRUD (MongoDB) - SQL CRUD (MySQL/Postgres) - Schema design & relationships |
- Bookshelf app (MongoDB) - User DB (SQL) |
| 5 | ORMs + Authentication | - Mongoose/Sequelize basics - Relationships & queries - JWT authentication, sessions |
- Blog platform with user login/logout |
| 6 | React Basics | - JSX, components, props, state - React hooks - React DevTools |
- Task Tracker app (React) |
| 7 | Styling React + Tailwind | - Tailwind CSS basics - Responsive layouts - Dark/light mode |
- Restyle Task Tracker |
| 8 | Next.js & TypeScript | - SSR & SSG - Dynamic routing - TypeScript basics (types, interfaces) |
- Blog site in Next.js - Refactor Task Tracker to TS |
| 9 | Websockets & Real-Time Features | - Websockets fundamentals - Intro to RTC (video/audio) - Real-time updates in apps |
- Build a chat app |
| 10 | Testing & Optimization | - Unit testing (Jest, RTL) - API testing - DB optimization & indexing |
- Add tests for APIs & React components |
| 11 | Capstone Project – Backend | - Backend APIs with Express - Authentication + DB - Error handling |
- Start Capstone (E-commerce/Chat/Blog) |
| 12 | Capstone Project – Frontend + Deployment | - Frontend with React/Next.js - Styling with Tailwind - Real-time features - Deploy (Vercel/Heroku) |
- Deploy Capstone - Add to portfolio |
- Mini Projects: To-do List, Bookshelf App, Blog API, Task Tracker, Chat App
- Capstone: Full-stack E-commerce / Blog / Chat App (with auth + realtime + deployment)