■ Frontend Developer 6–9 Month Study Plan
Phase 1: Foundations (Weeks 1–6)
Week Topics Project
Week 1 HTML basics → tags, headings, paragraphs, links, images.
Mini-project: Personal bio page
Week 2 Forms, tables, semantic HTML. Mini-project: Contact form
Week 3 CSS basics → box model, typography, selectors. Mini-project: Product card
Week 4 Positioning, Flexbox. Mini-project: Responsive navbar
Week 5 CSS Grid & responsive design. Mini-project: Blog layout with sidebar
Week 6 Review + build a portfolio homepage. Mini-project: Portfolio site
Phase 2: Core JavaScript (Weeks 7–16)
Week Topics Project
Week 7 Variables, data types, conditionals. Mini-project: Tip calculator
Week 8 Loops, functions. Mini-project: Number guessing game
Week 9 Arrays & objects. Mini-project: Grade tracker
Week 10 DOM basics (selectors, events). Mini-project: To-Do list
Week 11 Event handling, forms. Mini-project: Image slider
Week 12 LocalStorage/SessionStorage. Mini-project: Persistent To-Do list
Week 13 Fetch API (GET requests). Mini-project: Weather app (API)
Week 14 Async/await, error handling. Mini-project: Joke generator
Week 15 ES6+ features. Mini-project: Expense tracker
Week 16 Review & combine skills. Mini-project: Mini dashboard with APIs
Phase 3: Advanced Frontend Skills (Weeks 17–24)
Week Topics Project
Week 17 CSS animations & transitions. Mini-project: Animated landing page
Week 18 CSS variables & SCSS basics. Mini-project: Theme switcher
Week 19 Tailwind CSS basics. Mini-project: Pricing card (Tailwind)
Week 20 JS modules & bundling (Vite/Webpack). Mini-project: Modular To-Do app
Week 21 Promises & API chaining. Mini-project: Movie search app
Week 22 Git & GitHub basics. Mini-project: Deploy portfolio on GitHub Pages
Week 23 Responsive blog website. Mini-project: Blog with posts & modal
Week 24 E-commerce gallery. Mini-project: Product gallery with cart preview
Phase 4: React & Modern Tools (Weeks 25–36)
Week Topics Project
Week 25 React basics (JSX, components). Mini-project: Counter app
Week 26 Props & state. Mini-project: Profile card list
Week 27 Event handling, forms. Mini-project: Contact form
Week 28 Lists & conditional rendering. Mini-project: Dynamic To-Do list
Week 29 Hooks (useState, useEffect). Mini-project: User fetch app
Week 30 React Router basics. Mini-project: Blog with pages
Week 31 Context API. Mini-project: Theme switcher (dark/light)
Week 32 Redux basics (optional). Mini-project: Shopping cart
Week 33 TypeScript basics. Mini-project: Typed To-Do app
Week 34 React deployment (Netlify/Vercel). Mini-project: Weather app in React
Week 35 Large project: Full portfolio site in React. Capstone project
Week 36 Wrap-up & showcase. Prepare GitHub portfolio & resume
