Core
The request, end to end
DNS lookup, TCP/TLS handshake, the HTTP request, and the response coming back. Knowing this cold is what separates "the site is slow" from "TTFB is 800ms, it's the origin".
How HTTP worksRoadmap
Become a frontend engineer.
All sixteen stages. The complete arc — what the browser is doing when a page loads, the three languages you can't fake (HTML, CSS, JavaScript), the framework layer, and how to reason about rendering, performance, and accessibility when an interviewer asks you to design a frontend. Start here if you're not sure. Each topic links to a Semicolony deep dive or simulator where one exists, and to a curated external resource where it doesn't. Follow the arc in order, or jump to wherever you're stuck.
Also available Backend Engineer Roadmap → 14 stages, from HTTP basics to distributed systems. Also available System Design Roadmap → 15 stages with an interactive architecture diagram.
Core (the spine) Recommended (strong upside) Optional (pick if relevant)
Path
Level
Core plus the recommended layer. The optional stops stay hidden — they pay off after you've shipped a couple of real interfaces.
Jump to a stage
01 How the web loads 02 HTML & semantics 03 CSS & layout 04 JavaScript, the language 05 TypeScript 06 The DOM & browser APIs 07 Version control & collaboration 08 Build tooling & packages 09 Pick a framework 10 State & data fetching 11 Styling & design systems 12 Rendering & architecture 13 Performance & Core Web Vitals 14 Accessibility 15 Testing & quality 16 Frontend system design
01
Stage
How the web loads
What happens between the URL and the first paint.
Most frontend confusion lives below the framework. Before you can fix a slow Largest Contentful Paint or reason about why hydration is janky, you need a real picture of the request: DNS, TLS, HTTP, then the browser parsing HTML, building the DOM and CSSOM, and painting. The framework sits on top of all of this.
Core
The critical rendering path
How the browser turns bytes into pixels: parse HTML → DOM, parse CSS → CSSOM, render tree, layout, paint, composite. Render-blocking CSS and JS are the levers you actually pull.
External MDN: how browsers workDNS & the CDN edge
Names become IPs; static assets get served from a point of presence near the user instead of your origin. Where your assets live decides a big chunk of load time.
How DNS worksHTTPS & TLS
Every production frontend ships over TLS. Mixed content, HSTS, and certificate errors are frontend problems the moment a browser blocks your request.
How HTTPS works02
Stage
HTML & semantics
The markup that gives you accessibility and SEO for free.
HTML is the cheapest accessibility and SEO win you will ever get, and the easiest to fumble. The right element gives you keyboard behaviour, screen-reader semantics, and form handling for free. Reach for a <div> and you are signing up to rebuild all of it by hand.
Core
Semantic elements
Landmarks, headings, lists,
External MDN: HTML elements reference Core
Forms & inputs
Native validation, input types, labels, and submission. Most "form libraries" reimplement things the platform already does correctly.
External MDN: web formsAccessible markup
Roles, names, and states. ARIA is the patch for when HTML can't express something — the first rule of ARIA is don't use ARIA when an element already does the job.
External MDN: ARIAMetadata, the head & SEO
Title, meta description, Open Graph, canonical, structured data. What crawlers and link unfurlers actually read before they ever run your JavaScript.
External Google Search Central docs03
Stage
CSS & layout
Specificity, the box model, and two layout systems.
CSS is not styling sprinkled on at the end; it is a constraint-solving layout engine. Once the cascade, the box model, and the difference between Flexbox and Grid click, most "CSS is hard" problems turn into "I picked the wrong tool for this layout".
Core
The cascade, specificity & inheritance
Why your rule didn't win. Specificity, source order, inheritance, and the new cascade layers — the actual algorithm behind "it works when I add !important".
External MDN: the cascade Core
The box model
Content, padding, border, margin, and box-sizing. Margin collapsing and the difference between content-box and border-box explain most "why is there a gap" bugs.
External MDN: the box model Core
Flexbox
One-dimensional layout: rows or columns, with alignment and distribution. The default reach-for tool for component-level layout.
External CSS-Tricks: a guide to Flexbox Core
Grid
Two-dimensional layout: rows and columns together. Once you stop forcing Flexbox to do Grid's job, page-level layout gets dramatically simpler.
External CSS-Tricks: complete guide to GridResponsive & fluid design
Media queries, clamp(), container queries, and intrinsic sizing. The shift from "breakpoints for three devices" to layouts that just adapt.
External MDN: responsive design04
Stage
JavaScript, the language
Closures, prototypes, and the event loop — the stuff under every framework.
Every framework is JavaScript with conventions on top. Closures, the prototype chain, and the event loop are not trivia — they are the model that explains why a stale value got captured, why "this" is undefined, and why your await didn't block what you thought it would.
Core
Types, coercion & equality
Primitives vs objects, == vs ===, truthiness, and the coercion rules that produce the famous WAT talk. Knowing them turns "weird bug" into "expected behaviour".
JavaScript curriculum Core
Scope & closures
Lexical scope, hoisting, and the closure that captures a variable rather than its value. The single most-tested concept and the source of half of React's stale-closure bugs.
External MDN: closures Core
Prototypes & this
The prototype chain, how "this" is bound at call time, and why arrow functions don't have their own. The object model under classes.
External MDN: inheritance & the prototype chain Core
Async: promises, async/await & the event loop
The call stack, the task and microtask queues, and why a promise callback runs before a setTimeout(0). The mental model for everything network-bound.
Sim Event loop simulatorModules
ES modules, named vs default exports, dynamic import(), and tree-shaking. How your code is split, loaded, and dead-code-eliminated.
External MDN: JavaScript modules05
Stage
TypeScript
Types that catch bugs before they ship.
TypeScript is the default for any frontend of size. The goal is not to satisfy the compiler — it is to encode the shapes your data can take so that whole classes of bug become unrepresentable. Narrowing and generics are where it goes from "annotated JavaScript" to genuinely useful.
Core
Types & inference
Structural typing, inference, unions, and literal types. Let the compiler infer; annotate the boundaries (props, API responses, function signatures).
External TypeScript handbook Core
Narrowing & control flow
typeof, in, discriminated unions, and type guards. How the compiler follows your branches so a value is the right type inside each one.
External TypeScript: narrowingGenerics
Functions and types parameterised over other types. The difference between a reusable component API and a sea of any.
External TypeScript: generics06
Stage
The DOM & browser APIs
The platform underneath the framework, for when it leaks through.
Frameworks hide the DOM, but it shows through the moment you need a ref, an event listener, a focus trap, or a third-party script. The DOM, the event model, fetch, storage, and the security boundaries (CORS, XSS, CSP) are the platform every framework is renting.
Core
The DOM & manipulation
Nodes, the tree, querying, and mutation. What React's virtual DOM is diffing against, and what you touch directly when you reach for a ref.
External MDN: the DOM Core
Events, bubbling & delegation
Capture and bubble phases, event delegation, and why attaching one listener to a parent beats a thousand on children. The model behind every onClick.
External MDN: introduction to events Core
Fetch & the network
fetch, Request/Response, AbortController, and streaming. How data actually gets into your app, and how to cancel it when the component unmounts.
External MDN: Fetch APICORS & the same-origin policy
Why your fetch works in Postman but fails in the browser. Preflight requests, allowed origins, and credentials — the security boundary that confuses every frontend dev once.
Sim CORS preflight simulatorStorage: cookies, localStorage, IndexedDB
What persists where, the size limits, and the security trade-offs. Cookies travel with every request; localStorage is readable by any script on the page.
External MDN: client-side storageXSS, CSP & client security
The browser runs whatever script ends up on the page. Output encoding, a Content-Security-Policy, and never trusting innerHTML are the difference between safe and pwned.
External OWASP: XSS prevention cheat sheet07
Stage
Version control & collaboration
Git, branching, and the pull-request workflow teams run on.
Git is table stakes, but the gap between "I can commit" and "I can rebase a messy branch and review a 40-file PR without fear" is real and visible to a team on day one. Learn the model, not just the commands.
Core
Git fundamentals
Commits, branches, the staging area, and the object model underneath. Once you see commits as a graph of snapshots, the scary commands stop being scary.
How Git works Core
Branching & pull-request flow
Feature branches, trunk-based development, and the PR as the unit of review. The social protocol of shipping on a team.
External GitHub flowRebase vs merge
When to rewrite history for a clean line and when to preserve it. Interactive rebase to tidy a branch before review is a senior habit.
External Atlassian: merging vs rebasing08
Stage
Build tooling & packages
How your source becomes something a browser can run.
Nobody ships raw source. A bundler resolves modules, a transpiler downlevels syntax, and a dev server gives you instant feedback. You don't need to configure webpack from scratch, but when the build breaks — and it will — you need to know what each tool is responsible for.
Core
Package managers
npm, pnpm, and yarn; the lockfile, semver ranges, and the node_modules resolution model. pnpm's content-addressable store is why big monorepos pick it.
External npm docs Core
Bundlers & dev servers
Vite for new apps, esbuild and Rollup under the hood, webpack still everywhere in legacy. Module graph in, optimised bundle out, with HMR in dev.
External Vite docsTranspilers
Babel and SWC turn modern JS/TS/JSX into what your target browsers run. Browserslist decides how far down to compile.
External Babel docsLinting & formatting
ESLint for correctness, Prettier for style, settled by config so PRs argue about logic not semicolons. Wire them into CI and the editor.
External ESLint docs09
Branch · pick one
Pick a framework
Depth in one beats a tour of all five.
Roles ask for fluency in one component framework, not a survey of every framework. React is the pragmatic default by sheer market share. Vue and Svelte are excellent and increasingly hireable. Angular still runs much of the enterprise. Pick the one you can build and debug under pressure; the concepts transfer.
Core
React
The market default. Components, JSX, hooks, and the rules-of-hooks model. The biggest ecosystem and the most interview demand.
External React: learn Core
The component model & reactivity
Props down, events up, derived state, and how each framework tracks what changed. The shared mental model underneath every framework choice.
External Patterns.devVue
A gentle, well-documented middle ground. The Composition API, single-file components, and a reactivity system many find more intuitive than hooks.
External Vue: guideSvelte
A compiler, not a runtime: it disappears at build time. Less boilerplate, fine-grained reactivity, and SvelteKit for the full app.
External Svelte: tutorial10
Stage
State & data fetching
Where most real frontend complexity actually lives.
Most frontend complexity is state: where it lives, who owns it, and how it stays in sync with the server. The biggest unlock of the last few years is separating server state (cached, async, shared) from client state (UI, ephemeral) and stopping the habit of dumping everything into one global store.
Core
Local vs lifted vs global state
Keep state as local as possible, lift it only when shared, reach for global last. Most "we need Redux" problems are really "this state is in the wrong place".
External React: managing state Core
Server state & caching
TanStack Query and SWR treat the server as the source of truth: fetching, caching, revalidation, and background updates handled for you. The single biggest reduction in state code.
External TanStack QueryGlobal stores
Redux Toolkit for large, explicit state; Zustand and Jotai for lighter, hooks-first stores. Pick by how much ceremony the team actually needs.
External Redux ToolkitForms
Controlled vs uncontrolled, validation, and submission state. Where a good library (React Hook Form) earns its keep without re-implementing the platform.
External React Hook Form11
Stage
Styling & design systems
From a stylesheet to a system the whole org uses.
Writing CSS for one page is easy; keeping it consistent across hundreds of components and several teams is the real problem. The answers — utility classes, scoped styles, design tokens, and a component library — are about constraints and reuse, not aesthetics.
Core
CSS architecture & scoping
BEM, utility-first, CSS Modules, and why the cascade fights you at scale. The strategies for keeping styles from leaking across a large codebase.
External MDN: organizing CSS Core
Utility-first (Tailwind)
Style in markup with constrained utility classes; no naming, no dead CSS, design constraints baked into the config. The dominant approach in new projects.
External Tailwind CSS docsCSS-in-JS & zero-runtime
styled-components and Emotion for dynamic, colocated styles; vanilla-extract and the zero-runtime wave that moved the cost back to build time.
External styled-components docsDesign tokens & systems
Color, spacing, and type as named variables shared across design and code. The contract that lets a rebrand be a token change, not a rewrite.
External Design Tokens (W3C community group)12
Stage
Rendering & architecture
Where the HTML comes from, and where the work happens.
The defining frontend architecture decision is where rendering happens: in the browser (SPA), on the server per request (SSR), at build time (SSG), or some streaming mix. Each trades off time-to-content, interactivity, and infrastructure. Senior interviews live here.
Core
SPA vs MPA vs SSR vs SSG
The rendering spectrum and what each optimises: SPAs for app-like interactivity, SSR for fast first paint and SEO, SSG for content that rarely changes.
External web.dev: rendering on the web Core
SSR, SSG & incremental regeneration
Rendering to HTML on the server or at build, then revalidating. How meta-frameworks make "fast first paint" and "fresh data" stop being a trade-off.
External Next.js: Partial PrerenderingHydration & islands
Server HTML is inert until JS "hydrates" it — the cost everyone forgets. Islands and partial hydration ship interactivity only where it's needed.
External Islands architecture (Jason Miller)React Server Components & streaming
Components that render only on the server and never ship their JS, streamed to the client. The biggest shift in the React model in years.
External React: Server Components Core
Routing
Client routing, nested layouts, data loading per route, and file-based routing. The backbone that ties pages, data, and code-splitting together.
External React Router docs13
Stage
Performance & Core Web Vitals
Making it fast, and proving it stays fast.
Performance is a feature with a number attached. Core Web Vitals turn "it feels slow" into LCP, INP, and CLS targets you can measure and regress-test. The senior skill is profiling to find the real bottleneck instead of guessing, then setting a budget so it stays fixed.
Core
Core Web Vitals
LCP (loading), INP (responsiveness), CLS (visual stability). The three numbers Google ranks on and users actually feel.
External web.dev: Web Vitals Core
Measuring: Lighthouse, DevTools & RUM
Lab data (Lighthouse, the Performance panel) finds problems; field data (RUM, CrUX) tells you which ones real users hit. You need both.
External Chrome: Lighthouse Core
Loading performance
Code-splitting, lazy loading, preload/prefetch, and shrinking the critical path. Ship less JavaScript, and ship the right JavaScript first.
External web.dev: reduce JS payloads (code-splitting)Runtime & rendering performance
Reflow vs repaint vs composite, long tasks, and keeping the main thread free for 60fps. Why animating layout properties janks and transform doesn't.
External web.dev: rendering performanceBundle size & dependencies
Auditing what you ship, tree-shaking, and the cost of a careless import. One heavy date library can dwarf your whole app.
External Bundlephobia14
Stage
Accessibility
Building so everyone can actually use it.
Accessibility is both an ethical baseline and, in many places, a legal one. Most of it is free if you start with semantic HTML and keyboard support; the expensive version is retrofitting ARIA onto a div soup. Seniors treat it as a build-time concern, not a final-audit panic.
Core
WCAG & the POUR principles
Perceivable, Operable, Understandable, Robust — and the A/AA/AAA levels teams actually target. The standard behind every audit.
External W3C: WCAG overview Core
Semantics & ARIA, used correctly
Native elements first, ARIA only to fill gaps, and following the authoring patterns for widgets. Bad ARIA is worse than none.
External W3C: ARIA Authoring Practices Core
Keyboard & focus management
Everything operable without a mouse, visible focus, logical tab order, and focus traps for modals. The most common real-world failure.
External WebAIM: keyboard accessibilityScreen readers & testing
How content is announced, and testing with axe plus a real screen reader. Automated tools catch maybe 40% — the rest needs a human.
External Deque: axeColor & contrast
Contrast ratios, not relying on color alone, and respecting reduced-motion. Cheap to get right, glaring when wrong.
External WebAIM: contrast checker15
Stage
Testing & quality
The tests that let you change code without fear.
Tests exist to let you change code without fear. The frontend lesson, learned the hard way, is to test behaviour the way a user experiences it rather than implementation details — so a refactor that keeps the UI working keeps the tests green.
Core
Testing philosophy
The testing trophy over the old pyramid: lean on integration/component tests that resemble real use, fewer brittle unit tests, a thin layer of E2E.
External Testing Library: guiding principles Core
Unit testing
Vitest for Vite projects, Jest everywhere else. Fast, isolated tests for logic — utilities, reducers, hooks.
External Vitest Core
Component testing
Testing Library renders a component and queries it like a user — by role and text, not by class name. The approach that survives refactors.
External React Testing LibraryEnd-to-end testing
Playwright and Cypress drive a real browser through real flows. The slowest, highest-confidence layer — keep it small and reserved for critical paths.
External PlaywrightMocking the network
MSW intercepts requests at the network layer so tests and dev share one mock definition. Beats stubbing fetch in every test.
External Mock Service Worker (MSW)16
Stage
Frontend system design
Designing a real frontend, the way interviews ask you to.
Senior frontend interviews ask you to design something — a news feed, an autocomplete, a design system, a collaborative editor — and reason out loud about rendering strategy, data flow, caching, accessibility, and performance budgets. This is the synthesis stage: the vocabulary from every chapter, applied under time pressure.
Core
The frontend system-design interview
Requirements, component architecture, data model, API shape, rendering choice, then performance and a11y. A repeatable framework beats improvising.
External GreatFrontEnd: system design Core
Designing a component library
API design for components, composition over configuration, theming, accessibility, and versioning. The most common "design X" prompt for senior frontend.
External Patterns.devDesigning for data: APIs from the client
REST vs GraphQL from the consumer's seat, pagination, normalization, and optimistic updates. How the data contract shapes the whole UI.
External GraphQL: learnDesigning for scale & resilience
Rendering strategy, code-splitting boundaries, error boundaries, offline, and graceful degradation. How a frontend behaves when the network and the data misbehave.
External web.dev: rendering on the web Core
Practice & worked problems
Build real things under constraints: an autocomplete, an infinite feed, an image carousel, a dashboard. The reps that make the framework automatic.
External GreatFrontEndNext
System design roadmap
The other half of a full-stack design round: load balancers, caching, sharding, and consensus, with an interactive architecture diagram.
Open the roadmapHands-on
Run the simulators
Interactive simulators — the event loop, CORS preflight, the request flow, JWT lifecycle, caching — all in the browser.
Browse simulatorsGo deeper
The codex
Long-form curricula: JavaScript internals, networking, performance, and security — the deep dives behind the roadmap links.
Open the codexDrill
Interview prep
Time-boxed practice rounds and concept flashcards. The endpoint of the roadmap.
Start a roundSideways
Topics index
A concept index. Pick a topic, see every page that covers it across guides, simulators, and papers.
Browse topicsFound this useful?