Frontend Developer roadmap

Trace a page load from the address bar to the first paint: a name lookup, a secure connection, an HTTP request and the response that comes back.

HTTP overview (MDN)

Learn how a human-friendly name turns into an address a browser can connect to, and why changes take time to spread.

DNS (MDN glossary)Domain name (MDN glossary)

Follow the path from HTML bytes to pixels: parsing, style, layout, paint and compositing, and what makes each step slow.

How browsers work (web.dev)

Ship a built site to a host and understand caching headers, custom domains and HTTPS certificates.

Deploying a static site (Vite)

Choose elements for their meaning so assistive technology, search engines and your future self can understand the page.

HTML (MDN)Semantics (MDN glossary)

Collect input with labelled controls, built-in constraints and clear error messages, before reaching for JavaScript.

Web forms (MDN)

Understand the cascade, specificity, inheritance and the box model, so styles behave the way you expect.

CSS (MDN)Learn CSS (web.dev)

Lay out components in one dimension with flexbox and whole pages in two with grid.

Flexible box layout (MDN)Grid layout (MDN)

Make one layout adapt from a phone to a wide monitor with fluid sizing and media queries.

Using media queries (MDN)Learn responsive design (web.dev)

Compose styles from small single-purpose classes instead of writing bespoke stylesheets.

Tailwind CSS documentation

Get comfortable with values, functions, objects, arrays, scope and closures.

JavaScript guide (MDN)

Read and change the page from script, and respond to clicks, keys and form input.

Document Object Model (MDN)addEventListener (MDN)

Use promises and async functions to load data without freezing the interface, and handle failures well.

Promise (MDN)Fetch API (MDN)

Split code into files with import and export, and understand how bundlers resolve them.

JavaScript modules (MDN)

Add static types to catch mistakes earlier and make larger codebases easier to change.

TypeScript handbook

Commit small changes with clear messages, branch for each piece of work, and share it with your team.

Course: Git FundamentalsPro Git book

Install and update dependencies reproducibly with a lockfile, and run project scripts.

About npm

Use a dev server with instant reload, then produce an optimised production build.

Vite guide

Let tools catch common bugs and settle style debates automatically.

ESLint getting startedPrettier documentation

Describe interfaces as components that render from state, and let the framework keep the page in sync.

Course: React FoundationsLearn React

A progressive framework with single-file components and a gentle learning curve.

Vue guide

A compiler-first framework that turns components into small, direct DOM updates.

Svelte documentation

Map URLs to views so links, the back button and bookmarks work in a single-page app.

React Router

Decide where each piece of state lives and how it flows, before adding a library.

Managing state (React)

Build for keyboards, screen readers, zoom and reduced motion from the first commit.

Accessibility (MDN)WCAG overview (W3C)

Write fast unit tests for logic and a few end-to-end tests for the journeys that matter most.

Vitest guidePlaywright introduction

Measure loading, responsiveness and visual stability, then fix the biggest costs first.

Learn performance (web.dev)Core Web Vitals (web.dev)

Prevent cross-site scripting, handle tokens carefully and set a content security policy.

Course: Secure CodingWeb security (MDN)XSS prevention cheat sheet (OWASP)