Goal: Take yourself from absolute beginner to a job‑ready front‑end portfolio in ~24 weeks (≈ 6 months) on 10–15 focused hours per week.
Copy & paste this into Notion (or any markdown editor) and start ticking boxes. All tables are plain markdown—no Notion databases needed.
| Week | Dates | Theme | Core Skill Focus | Deliverable | Progress |
|---|---|---|---|---|---|
| 1 | 01 Jul 2025 – 07 Jul 2025 | HTML + CSS Foundations | Semantic markup, Flexbox | Personal homepage v1 | ☐ |
| 2 | 08 Jul 2025 – 14 Jul 2025 | HTML + CSS Foundations | Responsive design, Grid | Responsive homepage v2 | ☐ |
| 3 | 15 Jul 2025 – 21 Jul 2025 | Git + GitHub | CLI basics, branching | Repo live on GitHub Pages | ☐ |
| 4 | 22 Jul 2025 – 28 Jul 2025 | Fundamentals Review | Refactor, mobile‑first | Polished landing page | ☐ |
| 5 | 29 Jul 2025 – 04 Aug 2025 | JavaScript Basics | Variables, data types | JS snippets in console | ☐ |
| 6 | 05 Aug 2025 – 11 Aug 2025 | JavaScript Basics | Control flow & loops | Tip‑calculator mini‑app | ☐ |
| 7 | 12 Aug 2025 – 18 Aug 2025 | JavaScript Basics | Functions & scope | Quiz app wireframe | ☐ |
| 8 | 19 Aug 2025 – 25 Aug 2025 | JavaScript Basics | DOM & events | Quiz app MVP | ☐ |
| 9 | 26 Aug 2025 – 01 Sep 2025 | ES6 & Arrays | map / filter / reduce | Refactor quiz app | ☐ |
| 10 | 02 Sep 2025 – 08 Sep 2025 | Async JS | Promises & fetch | Weather app API | ☐ |
| 11 | 09 Sep 2025 – 15 Sep 2025 | Async JS | async/await | Weather app polish | ☐ |
| 12 | 16 Sep 2025 – 22 Sep 2025 | Review & Deploy | Netlify/Vercel | Deploy weather app | ☐ |
| 13 | 23 Sep 2025 – 29 Sep 2025 | React Foundations | Components, JSX | React “Hello World” | ☐ |
| 14 | 30 Sep 2025 – 06 Oct 2025 | React Foundations | Props & state | Counter component | ☐ |
| 15 | 07 Oct 2025 – 13 Oct 2025 | React Foundations | useEffect & data | Fetch API in React | ☐ |
| 16 | 14 Oct 2025 – 20 Oct 2025 | React Router | Routing basics | Multi‑page blog SPA | ☐ |
| 17 | 21 Oct 2025 – 27 Oct 2025 | React Projects | Styled‑Components | Expense tracker UI | ☐ |
| 18 | 28 Oct 2025 – 03 Nov 2025 | React Projects | Context API | Auth mock flow | ☐ |
| 19 | 04 Nov 2025 – 10 Nov 2025 | React Projects | Forms & validation | Kanban board drag‑drop | ☐ |
| 20 | 11 Nov 2025 – 17 Nov 2025 | React Deployment | Env vars & CI | Deploy Kanban board | ☐ |
| 21 | 18 Nov 2025 – 24 Nov 2025 | Job Ready | Portfolio polish | Write case studies | ☐ |
| 22 | 25 Nov 2025 – 01 Dec 2025 | Job Ready | Resume / cover letter | Create PDF bundle | ☐ |
| 23 | 02 Dec 2025 – 08 Dec 2025 | Job Ready | Interview prep | 5 mock questions/day | ☐ |
| 24 | 09 Dec 2025 – 15 Dec 2025 | Launch Week | Applications | Apply to 5 jobs | ☐ |
| Task | Est hrs | Status | Notes |
|---|---|---|---|
| Watch intro tutorial | 1 | ☐ | freeCodeCamp module |
| Practice exercise | 0.5 | ☐ | Flexbox Froggy |
| Build feature | 2 | ☐ | Header + nav |
| Reflect on learnings | 0.5 | ☐ | Add to journal |
Copy this four‑row skeleton for every new week and replace items as you go.
| Project | Type | Start → End | Tech Stack | Repo | Live Demo | Status |
|---|---|---|---|---|---|---|
| Personal Homepage | Showcase | Jul 01 → Jul 28 | HTML, CSS | link | link | 🛠️ |
| JavaScript Quiz App | Practice | Aug 12 → Sep 01 | HTML, CSS, JS | link | link | ☐ |
| Weather App | API Practice | Sep 02 → Sep 22 | JS (ES6), API | link | link | ☐ |
| Multi‑page Blog SPA | React | Sep 23 → Oct 20 | React, Router | link | link | ☐ |
| Kanban Board | React | Oct 21 → Nov 17 | React, Dragula | link | link | ☐ |
Legend: 🛠️ = In progress, ☐ = Planned, ✅ = Done
| Resource | Type | Link | Use for |
|---|---|---|---|
| freeCodeCamp Responsive Web Design | Course | https://www.freecodecamp.org/learn/ | Weeks 1–2 |
| MDN Flexbox Guide | Article | https://developer.mozilla.org/ | Weeks 1–2 |
| “Git Handbook” by GitHub | Article | https://guides.github.com/introduction/ | Week 3 |
| JavaScript30 | Course | https://javascript30.com/ | Weeks 5–8 |
| “You Don’t Know JS” | Book | https://github.com/getify/You-Dont-Know-JS | Weeks 9–12 |
| React Docs beta | Docs | https://react.dev/learn | Weeks 13–20 |
| LeetCode Top 75 | Practice | https://leetcode.com/problemset/all/ | Weeks 21–24 |
Copy & paste this block at the end of each week.
What went well?
e.g. Shipped homepage, finally understood Flexbox.