Front-End Roadmap
This roadmap reorganizes roadmap.sh/frontend into 8 sequential phases. Every stage uses the same format: Why it matters → Concept map → How to learn → Check your understanding → Practice projects → Primary sources → Related toolkit.
Read How to learn first so you know how to use each page.
Stages
| # | Stage | Phase | Estimate | Deep-dive focus |
|---|---|---|---|---|
| 01 | Internet | 1 | 1 wk | The journey of a request from URL to pixels |
| 02 | HTML | 1 | 1–2 wks | Semantics, the a11y tree, HTML parsing |
| 03 | CSS | 1 | 3–4 wks | Cascade, formatting contexts, layout algorithms |
| 04 | JavaScript | 1 | 4–6 wks | Event loop, closures, prototypes, memory |
| 05 | Git & VCS | 2 | 1 wk | Git's object model |
| 06 | Package Managers | 2 | 1 wk | Dependency resolution, lockfiles, node_modules layout |
| 07 | Framework (React & others) | 3 | 4–6 wks | Reconciliation, reactivity, scheduling |
| 08 | CSS Architecture & Tools | 3 | 2 wks | Scaling styles, design tokens |
| 09 | Build Tools | 4 | 2–3 wks | Module graph, tree-shaking, HMR |
| 10 | Linters & Formatters | 4 | 3 days | AST |
| 11 | Testing | 4 | 2–3 wks | Test strategy, test doubles, stable E2E |
| 12 | TypeScript | 4 | 3–4 wks | Type system, generics, inference |
| 13 | Web Security | 5 | 2 wks | Same-origin policy, XSS, CSP |
| 14 | Authentication | 5 | 1–2 wks | Session vs token, OAuth/OIDC flows |
| 15 | Web Components | 5 | 1 wk | Shadow DOM, custom element lifecycle |
| 16 | Performance | 6 | 3–4 wks | Core Web Vitals, rendering pipeline |
| 17 | Browser APIs & PWA | 6 | 2–3 wks | Service workers, storage, realtime |
| 18 | Rendering Strategies | 7 | 2–3 wks | CSR/SSR/SSG/ISR, hydration, RSC |
| 19 | GraphQL & Data Fetching | 7 | 2 wks | Caching, normalization, stale-while-revalidate |
| 20 | Mobile & Desktop | 8 | 2 wks | React Native, Flutter, Electron, Tauri |
Estimates assume 5–8 hours a week. If you're experienced, Phases 1–2 can go faster, as long as you can answer their Check your understanding questions.
Deep dives
Topics that go deeper than the roadmap live in Deep dives.
After this roadmap
Relevant next tracks: advanced TypeScript, Node.js, and Fullstack. Architecture topics like design systems, micro-frontends, and observability are on the deep-dive list.