Most frontend roadmaps are a wall of logos. Eighty technologies arranged in a flowchart, every box the same size, no indication of which ones actually matter or in what order.
This is the opposite: a short, ordered path based on what I actually use building production interfaces, checked against what the ecosystem data says in 2026. It is staged rather than timed, because "month three" means nothing when people start from different places. Finish a stage properly before leaning hard on the next one.
First, the state of play
The good news for anyone starting now is that the ecosystem has calmed down. The State of JavaScript 2025 survey, published in February 2026, described it as settling rather than churning. A few numbers set the scene:
- React is used by 83.6% of respondents. It is still the default.
- 40% now write TypeScript exclusively, up from 34% in 2024 and 28% in 2022. Only 6% write plain JavaScript exclusively.
- Vite has overtaken webpack in developer sentiment: webpack's satisfaction score fell to 26%.
- Next.js is used by 59%, with more mixed feelings than it used to have.
- AI tools have gone mainstream: Claude usage among respondents doubled to 44%, and Cursor more than doubled to 26%.
The practical reading: learn React and TypeScript, use a modern toolchain, and assume AI tools will be part of how you work. The frameworks are stable enough that depth pays off.
Stage 1: The platform
Every stage above this one leaks. When a React component misbehaves, the cause is very often plain HTML, CSS or JavaScript underneath it.
HTML. Semantic elements, forms, labels, buttons versus links, and landmarks. Semantics are free accessibility and free SEO, and most bugs I review in forms start here.
CSS. Modern CSS is a much better language than its reputation. Learn flexbox and grid until layout stops being guesswork, then custom properties, container queries, cascade layers, and responsive units like clamp(). Learn how the cascade and specificity actually work, because utility frameworks do not make that knowledge optional, they just hide it until something breaks.
JavaScript. Scope and closures, the event loop, promises and async/await, modules, array methods, and the DOM. You should be able to explain why a stale closure happened before you learn the React rule that prevents it.
The browser. How a page loads: HTML parsing, render-blocking resources, the critical path. The network tab and the performance panel in DevTools. This is the foundation for everything in Stage 6.
Checkpoint: build a small multi-page site with no framework: a form with validation, a responsive layout, and one piece of real interactivity. If it is accessible with a keyboard and loads fast, you are ready.
Stage 2: TypeScript
With 40% of developers now writing only TypeScript, and most serious codebases using it, this is no longer optional.
Go past annotations. Learn union and discriminated union types, generics, narrowing, and utility types. The goal is to use types to make invalid states impossible to write, not just to describe the values you already have. That is where TypeScript stops being overhead and starts catching real bugs.
Stage 3: React, properly
React 19 changed enough that learning it from a 2022 tutorial leaves real gaps.
The core. Components, props, state, effects and when not to use them, context, refs, lists and keys. Most React bugs come from misunderstanding when things re-render and what an effect is actually for.
The modern parts. Server Components and the split between server and client code. Actions and form handling. Suspense for loading states. React 19.2 added View Transitions for animating UI changes, useEffectEvent for pulling non-reactive logic out of effects, and Activity for keeping hidden UI alive with its state intact.
The React Compiler. It reached 1.0 and memoises components automatically. It does not remove the need to understand rendering, but it does remove a lot of manual useMemo and useCallback busywork.
State. Learn the distinction that matters most: server state (data from an API, which needs caching, refetching and invalidation) versus client state (UI state like an open menu). Most state-management pain comes from treating the first like the second. TanStack Query for server state and plain React state for most client state covers a lot of ground. I compared the main options in TanStack Query vs RTK Query.
Stage 4: A meta-framework
Pick one and learn it well. Next.js is the most common in job posts. If you pick it, learn the current version: Next.js 16, released in October 2025, changed several defaults.
- Turbopack is now the default bundler, with much faster builds and refresh.
- Cache Components make caching explicit and opt-in with a
"use cache"directive, replacing the older implicit behaviour that confused a lot of people. middleware.tsbecameproxy.ts, to make the network boundary clear.- Request APIs are async:
params,searchParams,cookies()andheaders()must be awaited. - React Compiler support is stable, though not enabled by default.
Learn rendering strategies too: static, dynamic and streaming, and when each is right. I wrote about running Server Components in production if you want the practical side.
Stage 5: Styling and design systems
Tailwind CSS is the most common choice in new projects, and v4 rebuilt its engine. Learn it, but learn it on top of real CSS knowledge from Stage 1.
Design systems are where frontend work starts to compound. A shared, typed, documented component library means every future feature is faster and more consistent. At ZORI I built a Storybook component library that cut feature build time by more than half, and I have since built the design system behind every module at Duochat. It is the most leveraged frontend work I know. My notes on design systems with Storybook and Tailwind go deeper.
Stage 6: Performance and accessibility
These separate mid-level frontend engineers from senior ones, and both are measurable.
Performance. Learn Core Web Vitals: LCP for loading, INP for responsiveness, and CLS for visual stability. Learn to profile, read a flame graph, find the long task, and set a budget before building rather than cleaning up after launch. The fixes are usually the unglamorous ones: code splitting, lazy loading, image optimisation, and shipping less JavaScript. I spent a lot of my agency years on exactly this work, and performance budgets are the habit that made it stick.
Accessibility. Keyboard navigation, focus management, semantic HTML, ARIA only when HTML cannot do the job, colour contrast, and testing with a screen reader. Aim for WCAG 2.2 AA. Accessibility is a legal requirement in more and more markets and a quality signal everywhere else.
Stage 7: Testing and tooling
- Unit and component tests with Vitest or Jest and Testing Library. Test behaviour, not implementation.
- End-to-end tests with Playwright for the flows that make money: sign-up, checkout, the core workflow.
- Git beyond the basics: rebasing, reading history, clean pull requests.
- CI: lint, type-check, test and build on every pull request.
Stage 8: Working with AI tools
Nearly half of JavaScript developers now use Claude, and AI assistance is part of the job rather than an extra. Learn to use it as a reviewer and a collaborator, not an autocomplete: write a clear specification, keep changes scoped, and read every diff. Next.js 16 even ships an MCP integration so agents can read your app's routes, logs and errors directly. My guide to Claude Code for engineers covers the workflow I use.
The fundamentals from Stages 1 to 6 matter more because of this, not less. You cannot review what you do not understand. I made the longer version of that argument in the old developer and the new developer.
What to skip, for now
- A second framework before you are genuinely good at the first. Depth in React beats shallow familiarity with three.
- Micro-frontends and module federation unless your employer already uses them.
- Every new state-management library. Learn the concepts once.
- Chasing every new tool. The survey says the ecosystem is settling. Take the hint.
Beyond frontend
Many frontend engineers eventually want to own the backend too. That was my path, from agency frontend work to owning full stack features in a SaaS product. The full stack engineer roadmap picks up where this one ends.
Sources
- #Frontend
- #Roadmap
- #React
- #Next.js
- #Career