A structured frontend development roadmap covering HTML, CSS, JavaScript, responsive design, accessibility, modern tooling, React, TypeScript, testing, performance, security and production-ready frontend development.
Track your progress, earn XP, and pick up where you left off.
Milestone: understand how a browser loads and renders a website.
How the Web Works
~3h · 2 resources
Browser & Developer Tools
~3h · 2 resources
HTTP, DNS & Domains
~3h · 3 resources
Milestone: build a semantic, accessible multi-page HTML website.
Document Structure & Semantics
~5h · 2 resources
Images, Media & Tables
~4h · 2 resources
Forms
~5h · 2 resources
SEO Fundamentals
~3h · 2 resources
Milestone: build a polished static website without a CSS framework.
Syntax, Selectors & Cascade
~6h · 3 resources
Box Model, Typography & Colors
~6h · 2 resources
Positioning & Display
~5h · 1 resources
Variables, Transitions & Animations
~5h · 3 resources
Milestone: a site that works on mobile, tablet, laptop and desktop.
Flexbox & Grid
~7h · 3 resources
Responsive Design & Media Queries
~6h · 2 resources
Container Queries & Responsive Typography
~4h · 1 resources
Layout Architecture & Performance
~4h · 1 resources
Milestone: build interactive web applications using vanilla JavaScript.
Variables, Types & Operators
~6h · 3 resources
Control Flow & Loops
~4h · 1 resources
Functions, Scope & Closures
~6h · 1 resources
Arrays, Objects & Destructuring
~6h · 1 resources
Modules & Error Handling
~4h · 1 resources
Milestone: consume external REST APIs and build a production-style vanilla JS interface.
DOM & Events
~6h · 2 resources
Fetch, Promises & Async/Await
~7h · 4 resources
Storage & URL APIs
~4h · 2 resources
Web APIs & Loading States
~5h · 1 resources
Milestone: maintain frontend projects professionally using Git and GitHub.
Git Fundamentals & Branching
~5h · 2 resources
GitHub, PRs & README
~4h · 3 resources
Milestone: build a multi-page React application using reusable components.
Why React, Setup & JSX
~5h · 3 resources
Components, Props & State
~7h · 1 resources
Events, Conditionals & Lists
~5h · 2 resources
Forms & Hooks (useState/useEffect)
~7h · 2 resources
Milestone: build a scalable React application with clean component architecture.
Custom Hooks & Context
~6h · 2 resources
Performance & Memoization
~5h · 1 resources
Lazy Loading & Code Splitting
~4h · 1 resources
Routing & Protected Routes
~6h · 1 resources
Milestone: build a typed React application using strict TypeScript. (Learn after JavaScript.)
TypeScript Basics & Types
~6h · 3 resources
Interfaces, Unions & Narrowing
~5h · 1 resources
Generics & Utility Types
~5h · 2 resources
tsconfig, Strict Mode & React
~6h · 2 resources
Milestone: understand when state should be local, shared, or server-derived.
Local, Derived & Shared State
~6h · 2 resources
Server State & Caching
~6h · 1 resources
Milestone: build a frontend that communicates with a real backend API.
Controlled Forms & Validation
~6h · 1 resources
CRUD, Auth UI & Data Views
~8h · 3 resources
Milestone: build an accessible frontend experience. Accessibility is considered throughout, not at the end.
Accessible Foundations
~5h · 2 resources
ARIA, Contrast & Accessible Components
~6h · 2 resources
Accessibility Testing & Curriculum
~5h · 1 resources
Milestone: a frontend project with meaningful automated tests.
Unit & Component Testing
~6h · 3 resources
Interaction & Integration Testing
~5h · 2 resources
Milestone: measure and improve frontend performance instead of guessing.
Rendering & Critical Path
~5h · 2 resources
Assets, Lazy Loading & Code Splitting
~6h · 3 resources
Measurement & Core Web Vitals
~4h · 2 resources
Milestone: understand common frontend security risks and safe implementation patterns.
XSS, CSRF & CSP
~6h · 4 resources
Auth UI, Tokens, Cookies & CORS
~5h · 3 resources
Milestone: deploy a production-ready frontend application.
Builds, Tooling & Env
~5h · 2 resources
Hosting, HTTPS & CI/CD
~5h · 3 resources
SEO, Open Graph & Production Checklist
~4h · 3 resources
Final milestone: Frontend Developer — Job Ready. Build a complete production-style frontend.
Capstone Project
~40h · 4 resources