Learning roadmap

Build the foundation in the right order.

Finish each stage with a small project. Add a backend only when the project creates a genuine need for one.

Stage 01

HTML, CSS and accessibility

Build semantic documents, forms, responsive layouts and accessible interactions. Learn the cascade, Flexbox and Grid.

Project: a responsive, keyboard-accessible three-page guide.

Stage 02

Browser JavaScript

Learn values, functions, objects, arrays, modules, the DOM, events, promises, fetch and error handling.

Project: a study tracker using localStorage.

Stage 03

Browser and HTTP fundamentals

Understand URLs, DNS, HTTPS, requests, responses, headers, status codes, DevTools, debugging and basic security.

Experiment: inspect every request made by a page and explain its status and content type.

Stage 04

npm and Vite

Understand manifests, lockfiles, dependency installation, project scripts, development servers and production builds.

Project: convert the study tracker to modules and build it with Vite.

Stage 05

Git, GitHub and deployment

Record focused commits, collaborate through a remote repository, protect secrets, test production output and publish static assets.

Project: deploy the verified dist/ output through an automated build.

Stage 06 / Optional

Node.js and APIs

Learn files, modules, environment variables and HTTP in Node.js. Then use Express to build validated JSON routes if your project requires server-side behaviour.

Later: databases, authentication, authorization, testing, observability and production security.

Begin at the foundation

Build accessible structure before adding tools.

Start stage one →