Frontend Engineer Roadmap

This roadmap is a sequence, not a trophy shelf. Finish each stage well enough to build and explain something real before you collect the next framework.

Stage 0 — Prerequisites

• Comfortable typing, Git basics, running a local server
• Willingness to read specs and DevTools, not only tutorials

Stage 1 — HTML & document structure

Goals: semantic markup, forms, accessibility tree, SEO basics.

• Landmarks, headings, lists, tables
• Forms: labels, validation attributes, submit behavior
• Images: alt, responsive srcset intuition
• Document metadata and Open Graph

Checkpoint: a multi-page content site with no div soup.

Stage 2 — CSS layout & systems

Goals: cascade literacy, Flexbox, Grid, responsive design.

• Cascade, specificity, layers
• Flexbox for components; Grid for page layout
• Fluid type/spacing; container queries where useful
• Color contrast; prefers-reduced-motion / color-scheme

Checkpoint: recreate a docs layout (sidebar + content + TOC) without a UI kit.

Stage 3 — JavaScript language

Goals: deep language competence.

• Scope, closures, this, prototypes
• Async: promises, event loop, fetch + abort
• Modules, immutability patterns
• DOM events and performance-aware updates

Checkpoint: a client-side app (todos is fine) with clean state and tests for pure logic.

Stage 4 — TypeScript

Goals: model domain data safely.

• Structural typing, unions, narrowing
• Generics for reusable utilities
• Utility types without over-abstraction
• Typing React props/events

Checkpoint: migrate a JS module to TS with strict mode, no any.

Stage 5 — React (or your primary UI library)

Goals: composition, state, effects, performance literacy.

• Elements, reconciliation, keys
• State placement; controlled inputs
• Effects and subscription cleanup
• Routing; data fetching patterns
• Testing library mindset

Checkpoint: multi-route app with loading/error/empty states and accessible components.

Stage 6 — Production frontend

Goals: ship quality.

• Bundling, code splitting, caching headers
• Core Web Vitals measurement
• Auth session UX; error boundaries
• Feature flags; observability (logs, RUM)
• Security: XSS, CSRF basics for SPAs

Stage 7 — Interview readiness

• Topic drills: JS, CSS, React, browser, a11y, perf
• DSA patterns used in frontend interviews
• Machine coding under time
• Frontend system design

Use Interview prep, DSA, Machine coding, and System design as the practice loop.

What to skip early

• Every new meta-framework at once
• Premature microfrontends
• GraphQL + tRPC + complex state libraries on day one
• Chasing “clean architecture” folders before you have features

Progress tracking

Mark stages done only when the checkpoint is built and you can teach it. Reading alone does not move the bar.