A written version of the interactive roadmap above — every station, what you'll learn, and a small thing to build — laid out for reading, reference and search.
Foundations Start here
F1. HTML & Semantics
Beginner · 45 min
The frontend starts with structure. Learn semantic HTML — the right element for the right job — because meaningful markup is what makes a page accessible, SEO-friendly, and easy to style. Divs everywhere is a smell; landmarks and headings are a map.
Skills: Semantic elements · Document structure · Forms & inputs · Metadata & SEO basics
Build it: Rebuild a blog article page using only semantic tags — header, nav, main, article, aside, footer — no generic divs. Does the outline read clearly?
✓ Checkpoint: Explain what a screen reader gets from a semantic element that it does not get from a styled div.
F2. CSS Fundamentals
Beginner · 60 min
CSS is deceptively deep. Master the box model, the cascade and specificity, selectors, units (px/rem/em/%), and custom properties. Most "CSS is hard" pain is really specificity and the box model biting you — learn them once and the fog lifts.
Skills: Box model · Cascade & specificity · Selectors · Units & custom properties
Build it: Style a card component. Deliberately create a specificity conflict, then resolve it — and swap a hard-coded color for a CSS custom property.
✓ Checkpoint: Explain a specificity conflict you have actually hit, and why reaching for !important made the next one worse.
F3. Layout: Flexbox & Grid
Beginner · 60 min
Layout is where CSS earns its keep. Flexbox handles one dimension (rows or columns); Grid handles two. Learn when to reach for each, plus responsive design with media queries and fluid units. This is the toolkit behind every modern page.
Skills: Flexbox (1D) · CSS Grid (2D) · Responsive & media queries · Fluid layouts
Build it: Build a responsive dashboard: a Grid page shell with Flexbox toolbars inside, collapsing to one column on mobile. Which layouts are Grid, which Flex?
✓ Checkpoint: Say when grid beats flexbox and when it is the wrong reach, in terms of one dimension versus two.
F4. JavaScript
Intermediate · 90 min
JavaScript runs the web. Learn the core: types and coercion, functions and closures, the event loop and async (promises, async/await), array methods, and the ES modules that structure real apps. This is the language every framework is built on.
Skills: Types & closures · Event loop & async/await · Array & object methods · ES modules
Build it: Write a debounce function from scratch, then use it on a search input. Explain why the closure captures the timer across calls.
✓ Checkpoint: Explain what the event loop does with an await, and why a long synchronous loop freezes the page while a slow fetch does not.
F5. The DOM & Events
Intermediate · 55 min
The DOM is the live tree the browser builds from your HTML, and JavaScript changes the page by mutating it. Learn selection, creation, event listeners, bubbling and delegation, and why touching the DOM in a loop is slow. Frameworks abstract this — but it is still underneath.
Skills: DOM tree & selection · Events & delegation · Bubbling / capturing · Reflow & repaint cost
Build it: Build a to-do list with vanilla DOM APIs. Use one delegated listener on the parent instead of one per item — why is that faster?
✓ Checkpoint: Explain why event delegation exists, and what it saves you on a list that grows to a thousand rows.
F6. Accessibility
Intermediate · 55 min
A UI only works if everyone can use it. Learn keyboard navigation, focus management, ARIA (and when NOT to use it), color contrast, and screen-reader basics. Accessibility is not a checkbox at the end — it is a design constraint from the first line of markup.
Skills: Keyboard & focus · ARIA roles (sparingly) · Contrast & color · Screen-reader testing
Build it: Make a custom dropdown fully keyboard-operable and screen-reader announced. What ARIA does it need — and what does semantic HTML give free?
✓ Checkpoint: Navigate a page you built using only the keyboard. If you get stuck, you found the bug the mouse was hiding.
Core Frontend The craft
T1. TypeScript
Intermediate · 60 min
TypeScript adds a type system on top of JavaScript, catching a whole class of bugs before runtime and making large codebases navigable. Learn types vs interfaces, generics, unions and narrowing, and how types document intent. It is the default for serious frontend today.
Skills: Types & interfaces · Generics · Unions & narrowing · Typing props & APIs
Build it: Type a fetch wrapper that returns a typed result. Use a generic so the caller gets the right shape without casting.
✓ Checkpoint: Explain what narrowing is doing when TypeScript stops complaining after an if-check.
T2. React Fundamentals
Intermediate · 75 min
React is the dominant way to build UIs: describe what the UI should look like for a given state, and React reconciles the DOM. Learn components, JSX, props, state, the render cycle, and hooks (useState/useEffect) plus their rules. This is the heart of modern frontend.
Skills: Components & JSX · Props & state · Render cycle & reconciliation · Hooks & their rules
Build it: Build a counter with useState and a data-loader with useEffect. Explain exactly what triggers a re-render — and what does not.
✓ Checkpoint: Explain why a component re-renders when its parent does, and what you would check before reaching for memoisation.
T3. State Management
Advanced · 60 min
As apps grow, state gets tangled. Learn the ladder: local state, lifting state up, context for cross-cutting values, and when a store (Redux, Zustand, signals) earns its place. The skill is keeping state as local as possible and reaching for globals last.
Skills: Local vs global state · Context & prop drilling · Stores (Redux/Zustand) · Derived state
Build it: A theme toggle needs to reach deep components. Solve it with context. When would you upgrade to a store instead?
✓ Checkpoint: Point at a piece of state and justify why it is local rather than global. “It was easier” does not count.
T4. Data Fetching & Caching
Advanced · 60 min
UIs live on server data. Learn the request lifecycle in the browser (fetch, loading/error states, race conditions), then the modern answer: a data layer (React Query, SWR) that caches, dedupes, and revalidates. Server state is not UI state — treat it differently.
Skills: fetch & async UI states · Race conditions & abort · Caching & revalidation · Optimistic updates
Build it: Fetch a list, then let the user favorite an item with an optimistic update that rolls back on error. How do you avoid a stale response overwriting a newer one?
✓ Checkpoint: Describe the race condition where an older request resolves after a newer one, and how abort fixes it.
T5. Routing & Forms
Intermediate · 55 min
Two things every app needs. Client-side routing maps URLs to views without full reloads (and must handle deep links and history). Forms are deceptively hard: controlled inputs, validation, and accessible error handling. Get these right and the app feels solid.
Skills: Client-side routing · Nested routes & params · Controlled inputs · Validation & errors
Build it: Build a multi-step form with URL-driven steps, so refresh and back-button keep the user in place. Where does the form state live?
✓ Checkpoint: Explain the difference between a controlled and an uncontrolled input, and which one makes validation straightforward.
T6. Testing
Advanced · 55 min
Untested UIs break silently. Learn the frontend test pyramid: unit tests for logic, component tests (Testing Library) that assert on what the user sees, and a few end-to-end flows (Playwright). Test behavior, not implementation — so tests survive refactors.
Skills: Unit vs component vs e2e · Testing Library · Mocking network · Testing behavior not internals
Build it: Write a component test for a login form: assert the error shows on bad input, without asserting on internal state. Why is that more robust?
✓ Checkpoint: Explain why testing what the user sees survives a refactor that testing internals does not.
Production Ship & operate
P1. Build Tools & Bundlers
Advanced · 55 min
Modern frontend ships through a build step. Learn what a bundler (Vite, esbuild, webpack) actually does — module resolution, transpiling, tree-shaking, code-splitting — and why dev servers use native ESM for speed. The build is where your source becomes something a browser can load fast.
Skills: Bundling & module graph · Tree-shaking · Code-splitting · Dev server & HMR
Build it: A route is loaded by 5% of users. Code-split it so it is not in the main bundle. How do you measure the bytes you saved?
✓ Checkpoint: Explain what tree-shaking needs from your imports to work, and name an import style that silently defeats it.
P2. Rendering: CSR / SSR / SSG
Advanced · 65 min
Where does the HTML come from? Client-side rendering (ship JS, build in the browser), server-side rendering (HTML per request), static generation (HTML at build), and hydration that wires them up. Each trades off speed, SEO, and freshness — the defining architecture choice of a modern app.
Skills: CSR vs SSR vs SSG · Hydration · Streaming & RSC · SEO & first paint tradeoffs
Build it: A marketing page and a logged-in dashboard have opposite needs. Pick a rendering strategy for each and justify it by SEO and freshness.
✓ Checkpoint: Explain what hydration is actually doing, and why a slow hydrate can feel worse than no SSR at all.
P3. PWA & Offline
Advanced · 50 min
Progressive Web Apps make a site behave like a native app: installable, offline-capable, and resilient on flaky networks. Learn service workers (the programmable network proxy), caching strategies, and the manifest. Offline-first is a mindset, not just a feature.
Skills: Service workers · Caching strategies · Web app manifest · Offline-first UX
Build it: Cache an app shell so it loads offline, but keep API data fresh when online. Which caching strategy for each — cache-first or network-first?
✓ Checkpoint: Explain what a service worker lets you serve when the network is gone, and what it cannot help with.
P4. Performance & Core Web Vitals
Advanced · 65 min
Speed is a feature. Learn the Core Web Vitals (LCP, INP, CLS), the critical rendering path, lazy-loading, image optimization, and how to profile with the browser devtools. Perception matters as much as milliseconds — measure real user experience, not just lab scores.
Skills: Core Web Vitals (LCP/INP/CLS) · Critical rendering path · Lazy-loading & images · Profiling & measuring
Build it: A page has a slow LCP and a layout shift. Diagnose both in devtools and fix them. Which metric does each fix move?
✓ Checkpoint: Name which Core Web Vital your slowest page fails and what specifically causes it — LCP, INP and CLS have different culprits.
P5. Frontend Security
Advanced · 50 min
The browser is a hostile environment. Learn XSS (and why escaping and CSP matter), CSRF, secure token storage, CORS, and safe handling of user input. Frontend security is mostly about never trusting data — including data from your own API.
Skills: XSS & escaping / CSP · CSRF · Token storage · CORS & same-origin
Build it: You must render user-authored HTML. Show how you prevent XSS — and why innerHTML with raw input is a trap.
✓ Checkpoint: Explain why escaping output defends against XSS while validating input alone does not.
P6. Deployment & CI/CD
Advanced · 50 min
Shipping frontend well: static hosting and CDNs, cache-busting with content hashes, preview deploys per pull request, and a CI pipeline that lints, tests, and builds before anything goes live. The goal is boring, reversible releases — deploy on every merge without fear.
Skills: CDN & static hosting · Cache-busting · Preview deploys · CI: lint / test / build
Build it: Set up a pipeline that gives every PR a preview URL and blocks merge on failing tests. How do content hashes let you cache assets forever?
✓ Checkpoint: Explain what cache-busting solves, and what breaks when a deploy ships an HTML file that references a purged asset.