Free Learning Roadmap

How to Become a Frontend Engineer

The user-facing half of every product. JavaScript/TypeScript, React (or Vue/Svelte), browser APIs, accessibility, performance, and design system fluency.

Topics
12
Resources
53
Cost
Free
Most resources are free or freemium
Format
Self-paced

1. Web Fundamentals

core
Semantic HTML

Beyond div soup. Landmarks, headings hierarchy, forms, tables — semantic HTML is the foundation of accessibility.

CSS: Layout, Cascade, Modern Features

Flexbox, Grid, custom properties, container queries, cascade layers. The layer that eats up most PR discussion.

HTTP & the Browser

How the network tab tells you everything. Cache-control, CORS, cookies, service workers.

2. JavaScript & TypeScript

core
Modern JavaScript

Closures, prototypes, async/await, modules, iterators. Understand the language, not just the framework.

TypeScript

Types as design, generics, conditional types. The professional default for frontend teams.

3. React (or alternative)

core
React Core

Components, props, state, effects, refs, context. Learn how re-renders actually work.

State Management

useState, useReducer, Zustand, Redux Toolkit, Jotai, Recoil. Match the tool to the shape of your state.

Alternative Frameworks

Vue, Svelte, Solid, Qwik. Worth being conversant even if you write React daily.

4. Meta-Frameworks

core
Next.js

App router, server components, streaming. The industry-default React meta-framework.

Remix, Nuxt, SvelteKit

The other production meta-frameworks. Same problem space, different opinions.

5. Styling Systems

core
Tailwind CSS

The utility-first default. Learn the design tokens, not just the class names.

CSS-in-JS & Zero-Runtime

styled-components, Emotion, vanilla-extract, PandaCSS. Know when the DX cost pays off.

Design Systems

Tokens, primitives, patterns. Radix, shadcn/ui, MUI, Chakra as reference implementations.

6. Accessibility

core
WCAG & ARIA

The web is universal or it's broken. WCAG 2.2 AA is the standard bar; ARIA fills semantic gaps.

Automated A11y Testing

axe-core, Lighthouse, jest-axe. Catch regressions in CI, not user reports.

7. Performance

core
Core Web Vitals

LCP, INP, CLS. Google's canonical performance metrics — measurable, monitored, and now SEO signals.

Bundle Hygiene

Code splitting, tree shaking, dynamic imports, bundle analysis. Ship less JavaScript.

8. Testing

core
Unit & Integration

Vitest, Jest, Testing Library. Test behaviour, not implementation.

End-to-End

Playwright, Cypress. Cover the critical user journeys, not everything.

9. Build Tooling

recommended
Vite, esbuild, Rollup

The modern build-tool triangle. Fast dev servers, fast prod builds, understandable configs.

Monorepos

pnpm workspaces, Turborepo, Nx. When you have >1 app or shared UI packages.

10. Browser APIs

recommended
Modern Web APIs

IntersectionObserver, ResizeObserver, requestIdleCallback, Web Workers, Service Workers, IndexedDB. Reach for these before third-party libraries.

Progressive Web Apps

Service workers, Web App Manifest, offline-first. Turn the browser into an app runtime.

11. Design Collaboration

recommended
Reading Figma

Frontend engineers spec-read designs daily. Auto-layout, constraints, design tokens, component variants.

12. Career & Craft

optional
Ship a Personal Site

Nothing signals frontend seniority like a fast, accessible, tastefully-designed personal site with real content on it.

Want a personalised version?

This roadmap is the same one our platform uses internally, but the logged-in version lets you tick off topics as you complete them, track a personalised First 90 Days plan, and see your AI-durability score against this role. All free.

Open the interactive roadmap →
Curated by WhatTNext Ai · methodology · all roadmaps · last updated 2026-07-29