Frontend Roadmap

Clients, servers, packets and the request/response cycle.

Methods, status codes, headers, cookies and TLS.

How a domain name resolves to an IP address.

Parsing, the DOM, critical rendering path and reflows.

Elements, attributes, document structure and boilerplate.

Meaningful markup that helps SEO and screen readers.

Input types, constraints, labels and native validation.

ARIA, keyboard navigation and inclusive interfaces.

Meta tags, structured data and crawlability.

Selectors, specificity, the cascade and inheritance.

Margin, padding, borders and the box-sizing model.

One-dimensional layout for rows and columns.

Two-dimensional layout with tracks and areas.

Media queries, container queries and fluid sizing.

Keyframes, easing and performant motion.

Custom properties, theming and dynamic values.

Utility-first styling, at speed. The modern default.

Locally scoped class names, built into most bundlers.

Nesting, variables and mixins for large stylesheets.

Component library with a ready-made design system.

CSS-in-JS with component-scoped styles.

Transform CSS with plugins — Autoprefixer and more.

Variables, functions, loops, scope and closures.

Selecting, creating and updating elements.

Arrow functions, destructuring, spread and optional chaining.

Callbacks, promises and async/await.

Making HTTP requests and handling responses.

try/catch, error objects and graceful failure.

Commits, branches, merging and the object model.

Remotes, issues, pull requests and open source workflow.

Annotations, inference, interfaces, generics and narrowing.

Utility types, conditional and mapped types.

Component model, JSX, hooks and the largest ecosystem.

Progressive framework with an approachable template syntax.

Batteries-included, TypeScript-first enterprise framework.

Compiles away the framework — no virtual DOM at runtime.

Fine-grained reactivity with a React-like API.

3kB React alternative with the same modern API.

Built-in React state sharing without prop drilling.

Predictable global state with devtools and middleware.

Tiny, fast and unopinionated global state.

Reactive state via observables and computed values.

Server-state caching, syncing and background refetching.

The official Vue store — simple and type-safe.

React framework with routing, SSR and server components.

The intuitive Vue framework with auto-imports.

Svelte's official app framework with adapters.

Content-first, islands architecture, ships zero JS by default.

Web-standards-first React framework with nested routes.

Blazing-fast unit testing powered by Vite.

The classic JavaScript test runner.

Test components the way users interact with them.

Cross-browser end-to-end automation.

Developer-friendly browser testing.

Develop and document UI components in isolation.

Instant dev server and optimized production builds.

The default package manager and registry.

Fast, disk-efficient package manager for monorepos.

Catch bugs and enforce code style automatically.

Opinionated code formatting, zero debates.

The battle-tested module bundler (good to know).

High-performance build system for monorepos.

Core Web Vitals, lazy loading and bundle budgets.

XSS, CSRF, CORS and secure authentication.

Offline support, caching and installable apps.

Query exactly the data your UI needs.

GSAP timelines and scroll-driven storytelling.

3D graphics and immersive experiences on the web.

Containers, CI/CD and shipping to production.