All roadmaps

Frontend Developer

Build fast, accessible interfaces: from HTML and CSS to TypeScript and React.

Internet

What happens between typing a URL and seeing a page.

  1. How the internet works — Clients, servers, IP addresses, and how packets travel between them.
  2. HTTP and HTTPS — Requests, responses, methods, status codes, headers, and TLS.
  3. DNS and domain names — How a domain name resolves to an address and what records control it.
  4. Hosting — Where websites live: static hosting, servers, and platforms.
  5. How browsers work — Parsing, layout, painting, and the rendering pipeline.

HTML

The structure and meaning of every web page.

  1. HTML basics — Document structure, elements, attributes, links, images, and lists.
  2. Semantic HTML — Choose elements for their meaning: headings, landmarks, article, nav, and more.
  3. Forms and validation — Inputs, labels, built-in validation, and submitting data.
  4. Accessibility — Build pages that work with keyboards and assistive technology.

CSS

Style, layout, and responsive design.

  1. CSS basics — Selectors, the cascade, specificity, the box model, and units.
  2. Flexbox — One-dimensional layout for rows and columns.
  3. CSS Grid — Two-dimensional layout with tracks, areas, and alignment.
  4. Responsive design — Media queries, fluid sizing, and container queries.
  5. Custom properties — Design tokens and theming with CSS variables.

JavaScript

The language of the web.

  1. Language fundamentals — Variables, types, functions, scope, closures, and control flow.
  2. The DOM and events — Select, change, and respond to elements in the page.
  3. Promises and async/await — Handle asynchronous work, errors, and the event loop.
  4. Modules — Split code into files with import and export.
  5. Fetching data — Call APIs with fetch, handle JSON, and deal with failures.

TypeScript

Add static types to JavaScript.

  1. Types and interfaces — Primitives, objects, unions, and describing the shape of data.
  2. Narrowing — Refine union types with guards and discriminated unions.
  3. Generics — Write reusable, type-safe functions and types.
  4. Project configuration — tsconfig options and strict mode.

Git and GitHub

Track changes and collaborate with other developers.

  1. Commits and history — Stage, commit, and inspect changes in a repository.
  2. Branching and merging — Work in isolation and combine changes safely.
  3. Pull requests — Review and merge work with GitHub.

React

Build interfaces from components.

  1. Components and JSX — Compose UI from small functions that return markup.
  2. State and props — Pass data down and keep local state close to where it is used.
  3. Effects — Synchronize with external systems, and learn when not to use an effect.
  4. Routing — Map URLs to screens with React Router.
  5. Server state — Fetch, cache, and update remote data with TanStack Query.

Testing

Ship changes with confidence.

  1. Unit tests — Test small pieces of logic in isolation.
  2. Integration tests — Verify that modules work together.
  3. End-to-end tests — Automate real user flows in a browser.

Compare roadmaps