Full-Stack Web

1. 01

   Web fundamentals

   Beginner

   HTML that means something, CSS that survives a redesign, and the browser mechanics underneath both. Skipping this is why most self-taught developers plateau at the framework layer.

   • MDN — Learn web development Documentation MDN Web Docs 30h Free The reference the whole industry actually uses. Work the modules in order rather than dipping in — the sequencing is the value.
   • Responsive Web Design Certification Interactive freeCodeCamp 30h Free Typing beats reading at this stage. Build every project, including the ones that look too easy.
   • Learn CSS Course web.dev 8h Free The chapters on the box model, layout and specificity are the ones that stop CSS feeling random.
   • Learn Accessibility Course web.dev 5h Free Learn it now, while your markup is simple. Retrofitting accessibility into a finished React app is a different and much worse job.

   Build this

   A multi-page site with no framework and no CSS library

   Build a three-page site — semantic HTML, hand-written CSS, responsive without a grid framework — and get it to a perfect Lighthouse accessibility score.

   The constraint is the point. Everything a framework does for you later, you should have done once by hand.

   Done when: A deployed static site, a Lighthouse report, and a note on what the accessibility audit caught.

2. 02

   JavaScript, properly

   Beginner

   Closures, the event loop, promises and modules. The four things that separate someone who can copy a React tutorial from someone who can debug one.

   • The Modern JavaScript Tutorial Documentation javascript.info 25h Free The best free JavaScript text there is. Part 1 in full; Part 2 when you start touching the DOM.
   • Eloquent JavaScript Book Marijn Haverbeke Marijn Haverbeke 15h Free Harder than it looks and worth it. The exercises are where the learning is — do not read past one you have not solved.
   • The event loop Documentation MDN Web Docs 45 min Free Read this the first time an async bug confuses you, then again a month later. It lands differently once you have been burned.

   Build this

   An interactive app in vanilla JavaScript

   A todo list, a quiz or a small game — but with real state management you wrote yourself, persistence to localStorage, and no libraries at all.

   When you later reach for a framework, you will know precisely which problem it is solving for you.

   Done when: A working app plus a paragraph on the moment your own state handling started to hurt.

3. 03

   TypeScript deep dive

   Intermediate

   Types as documentation that cannot go stale. Start where the compiler helps most — function boundaries and API responses.

   • The TypeScript Handbook Documentation Microsoft 10h Free The official text. Narrowing and generics are the two chapters worth re-reading.
   • Type Challenges Code repository GitHub 10h Free Optional, and genuinely hard. Do the easy set only — beyond that it is a puzzle hobby, not job preparation.
   • TypeScript Playground Interactive Microsoft 1h Free Keep it open beside the handbook. Every type you do not understand, paste it here and hover.
4. 04

   React and state

   Intermediate

   Components, the rules of hooks, and the harder question underneath: where each piece of state should actually live.

   • React — Learn Documentation Meta 15h Free The rewritten docs are a genuine course. "Thinking in React" and "Managing State" are the sections that matter most.
   • Escape Hatches — effects, refs and when not to use them Documentation Meta 4h Free "You Might Not Need an Effect" removes about half the bugs in a typical junior React codebase. Read it before you write your tenth useEffect.
   • Next.js — Learn Course Vercel 10h Free The interactive course builds a real dashboard with auth and a database. Do it after plain React, not instead of it.
   • TanStack Query — Overview Documentation TanStack 3h Free Server state is not client state. Learning that distinction here saves you from three custom caching layers later.

   Build this

   A React front end against a real, unreliable API

   Build a client for a public API you do not control. Handle loading, empty, error and stale states properly — throttle your network to make each one happen.

   Most portfolio React apps only ever render the happy path. Not shipping one is a differentiator.

   Done when: An app that behaves correctly on a throttled, failing connection, with screenshots of each state.

   Any public REST API
5. 05

   APIs and databases

   Intermediate

   The server half: HTTP as it actually works, a real relational schema, and auth you have not invented yourself.

   • Node.js — Learn Documentation OpenJS Foundation 7h Free Official, current, and short. The modules and async sections are the ones you will keep returning to.
   • HTTP — MDN Documentation MDN Web Docs 6h Free Status codes, caching headers and CORS. Every one of these will cost you an afternoon if you learn it by trial and error instead.
   • PostgreSQL — Tutorial Documentation PostgreSQL 4h Free Start with the real database rather than SQLite. The difference in constraints and types shapes how you design schemas.
   • Use The Index, Luke Book Markus Winand Markus Winand 5h Free Why your query is slow, explained properly. Read it the first time a page takes two seconds to load.
   • OWASP Top 10 Documentation OWASP 3h Free Read before you write a login form, not after. Injection and broken access control are still where real applications get breached.

   Build this

   A REST API with sessions, roles and migrations

   Design the schema first, on paper. Then build the API: registration, hashed passwords, sessions or JWTs, role-based access, and versioned migrations from day one.

   Write down what happens when two people edit the same record. That answer is what senior interviews are actually probing for.

   Done when: A documented API with migrations, seed data, and tests covering the authorisation rules.

6. 06

   Testing, CI and deploying to the cloud

   Intermediate

   The half of the job that turns a project into a product: tests worth having, a pipeline that runs them, and a deploy you can repeat.

   • Testing Library — Guiding Principles Documentation Testing Library 3h Free Test what the user does, not what the component holds. That single idea makes a test suite survive a refactor.
   • Playwright — Getting started Documentation Microsoft 4h Free Three end-to-end tests over the critical path are worth more than a hundred shallow unit tests. Write those three.
   • GitHub Actions documentation Documentation GitHub 4h Free Get to a pipeline that lints, tests and deploys on merge. Everything after that is refinement.
   • Docker — Get started Documentation Docker 4h Free "Works on my machine" is a solved problem. Learn it here and it carries straight into the Cloud & DevOps path.
   • Learn Performance Course web.dev 5h Free Core Web Vitals, and what actually moves them. Measure before you optimise anything.

   Build this

   Ship it: your app, your domain, your pipeline

   Take the API and the front end you have already built, put them behind a custom domain over HTTPS, add a CI pipeline that blocks a merge on failing tests, and set up error tracking.

   Then hand the URL to five people who do not know how it works and write down everything they broke. That list is the most valuable artefact on this path.

   Done when: A live URL, a green pipeline, and a written post-mortem of the first five real users.

Nothing matches that combination in this path yet.