Learn / Web development
Read it.
Then write it yourself.
Seventeen courses, from the first HTML tag to a deployed Next.js app — with the database, the git history, the HTTP, the attacks, the tests and the milliseconds underneath it. Every lesson ends with an editor that runs in this page and checks your work.
The courses
Seventeen subjects,
in the order they depend on each other.
HTML
The document, the elements and the meaning behind them. Everything else on the web is layered on top of this.
CSS
Selectors, the box model, layout with flexbox and grid, and motion that has a reason to move.
JavaScript
Values, functions, the DOM, events and asynchronous work — written so you can debug it later.
React
Components, state and effects — the model behind most interfaces built today.
TypeScript
Types that describe what your code already does — and a compiler that reads them before anyone else has to.
Node.js
The runtime, modules, packages, the file system and an HTTP API you can call.
Next.js
Routing from the file system, server and client components, data fetching and deployment.
SQL
The language every database answers to. One door factory, twenty-two lessons, and a real SQLite engine running your queries in the page.
Git
The tool every team uses and almost nobody is taught. A terminal in the page, and a git whose object ids are the real ones.
The Web
DNS, TCP, TLS, HTTP, caching, cookies, CORS and the rendering pipeline — the layer every framework sits on and nobody teaches.
Security
The attacks that actually happen to ordinary web applications, and the defences that stop them — written as code you run, not as a list of warnings.
Accessibility
Semantics, names, keyboard, focus, contrast and ARIA — checked against the browser’s own accessibility tree, not against a linter’s opinion.
Testing
Write the runner, then use it: assertions, doubles, fake time, async, the DOM, flakiness and what coverage will never tell you.
Performance
The metrics that matter, measured rather than guessed — and the handful of changes that move them, from the hero image to the query behind it.
Python
Real CPython, running in this page — from the first print to generators, dataclasses and decorators, with every exercise executed by the interpreter itself.
Algorithms
Data structures and algorithms with the complexity measured rather than asserted: every lab counts its own operations and the page names the growth rate.
AI engineering
The parts of an LLM application that are engineering rather than magic: tokens, sampling, retrieval, tools, evaluation and cost — all of them computed and checked in the page.
Build
A lesson teaches one thing.
A build uses all of them.
A product page, marked up properly
One page, written as a document rather than a pile of divs: landmarks, a real table, a form anyone can fill in, and the metadata that decides how it is shared.
Style it, from tokens to motion
Take the same page and give it a design system: tokens, a layout that holds at any width, a component with variants, dark mode, and motion that has a reason.
A catalogue that filters, sorts and remembers
The page becomes an application: render from data, filter and sort as the user types, validate a form, keep the state in the URL and the browser, and handle every failure.
The same catalogue, in React
Rebuild it with components and state: props down, events up, a custom hook for the logic, a form that reports its errors, and a list that does not rebuild itself for nothing.
The API behind it
A REST API with the parts that are usually skipped: validation, the right status codes, one error shape, a session, and a health check that tells the truth.
Put it together and ship it
The whole thing as one Next.js application: routes from folders, server components that fetch, a server action that writes, metadata that shares well, and a build you could deploy.
Look it up
Reference and a blank page.
Every tag, property and method
What it does, what it looks like, and the mistake people make with it. Filter by name or category; press / to search.
PlaygroundAn empty page
Three files, a live preview and a console, in the same sandbox the lessons use. Share a snippet as a link.
Night shiftThe coding game
Twenty levels in five worlds. You write real JavaScript, the bot does exactly what it says, and three stars mean you found the short way.
Start hereHow the web works
If you have never written a line: what happens between typing a URL and seeing a page.
How a lesson works
Written, then practised.
The explanation
Every part of the subject in plain English, with the code beside it and a note where the trap is.
The editor
A real editor and a live preview in the page. Write the code, run it, and a set of checks tells you exactly what is still missing.
The questions
Three questions at the end, each with the reason the answer is what it is. Your progress is kept in this browser.
Paths
If you do not know where to start.
Front end, from nothing
Start at HTML, take CSS next, then JavaScript. By the end you can build and style a page that responds to what someone does on it.
React developer
You already write JavaScript. Learn the component model, the type system every team expects with it, and the framework that puts both on a server.
Typed JavaScript
You write JavaScript already and the job advert says TypeScript. Fourteen lessons, with the real compiler checking your work in the page.
Full stack
Everything in order: structure, style, behaviour, components, a server, and the framework that joins them.
Under the hood
The layer every framework sits on: what a request is, what the browser does with the answer, and why a page is slow.
Fast, and right
Performance and testing: the two courses that decide whether what you built survives contact with real users and real devices.
Shipping with confidence
Tests that prove it works and a review that proves it is safe — the two habits that make a codebase survivable.
Doing it properly
The two courses that separate a page that works from a page that works for everyone, on a bad connection, on somebody else’s device.
Defensive web development
How the web actually works, and how it is attacked — the two courses that make the difference between code that runs and code you can put on the internet.
The tools around the code
Git the way a team actually uses it, and the database behind the app — the two subjects every job assumes you already have.
The data side
The half of the job that is not the screen: the language every database answers to, and how an application talks to one without being robbed.
Also here
Building with AI.
From an idea to a build you understand.
A practical workflow for planning, prompting, checking and shipping with AI.
Give the model a clear job.
Combine purpose, context and constraints with a result you can verify.
Choose AI around the task.
A decision framework for selecting and testing the tools in your workflow.