§The cut list
HTML & CSS, TypeScript, React, Svelte, Vue and Build & test. Every course is taught live to 8 people or fewer and costs £9.16 to £144.16, VAT included where it applies. None of them can be bought without talking to us first.
24 of 24 courses
The material everything else is cut from: markup, layout and the accessibility no framework adds for you.
Elements, the box model, selectors and the cascade, written by hand in a plain editor until the page looks the way you meant it to. For people who have never built a web page, or have only ever edited somebody else's.
Semantic HTML · Box model · Selectors · The cascade
Grid, flexbox, container queries and intrinsic sizing, practised on layouts that have to survive real content and a 320-pixel screen. You stop adding breakpoints to patch things and start writing layouts that don't need them.
Grid · Flexbox · Container queries · Intrinsic sizing
Landmarks, focus order, labels, contrast and the screen reader you have never switched on. You audit a real form with a keyboard and VoiceOver, then fix it until someone who can't see the screen can finish it.
Keyboard · Screen readers · ARIA · Contrast
Masterpiece
Cascade layers, custom properties, :has(), nesting and a token system a whole team can extend without a single !important. You rebuild a tangled stylesheet into one that is smaller and easier to change.
@layer · Custom properties · :has() · Design tokens
JavaScript understood properly first, then types that make the wrong prop impossible to pass.
Values, functions, objects, modules, promises and the DOM, without a framework in sight. For people who learned JavaScript from snippets and would like to know why their code runs in the order it does.
Functions · Promises · Modules · The DOM
Types for props, events, API responses and forms, and the narrowing that turns a red squiggle into a design decision. You type a small component library until it refuses every state that shouldn't exist.
Narrowing · Generics · Unions · strict
Promises, fetch, AbortController, caching and the race between two requests that came back in the wrong order. You build a search box that stays correct on a slow train connection.
fetch · AbortController · Race conditions · Caching
Masterpiece
Conditional and mapped types, infer, template literal types and the declaration files behind every package you install. For people who maintain shared components and want the types to explain them.
Conditional types · Mapped types · infer · .d.ts
Components, hooks and the server, learned as a model of when the screen updates rather than a list of rules.
Components, props, state and events, built up from an empty Vite project rather than a starter kit. You finish with a small app you understand line by line, and a clear idea of when React renders again.
JSX · Props · useState · Events
Effects, refs, context, custom hooks and the dependency array everyone guesses at. You delete half the effects in a working app, and it gets faster and easier to read.
useEffect · Custom hooks · Context · Refs
Controlled inputs, form actions, useOptimistic, reducers and the point where you need a state library — usually later than you think. You build a checkout that survives the back button and a declined card.
Actions · useOptimistic · Reducers · Validation
Masterpiece
Server and client components, streaming, caching and the network boundary between them, in the Next.js App Router. You ship an app where most of the JavaScript never reaches the browser, and you can say why.
Server components · Streaming · Caching · App Router
A compiler instead of a runtime: runes, motion, and SvelteKit for everything from routing to the database.
Markup, styles and runes in one file: $state, $props, events and the template that reads like HTML. For people who know a little HTML and JavaScript and want a framework that stays out of the way.
Runes · $state · $props · Events
$derived, $effect, snippets, classes with reactive fields and state shared outside components. You move a store-heavy Svelte 4 app to Svelte 5 and remove most of its boilerplate on the way.
$derived · $effect · Snippets · Migration
Transitions, animations, springs and tweens, and how to keep them kind to people who have asked for less motion. You build an interface that feels physical without being tiring to use.
Transitions · Springs · FLIP · Reduced motion
Masterpiece
Routing, load functions, form actions, hooks and adapters, from a first page to a deployed app with sign-in and a database. Progressive enhancement throughout, so every form works before the JavaScript arrives.
Load functions · Form actions · Hooks · Adapters
Templates and the Composition API, from one widget on an old page to a Nuxt app rendered three ways.
Templates, refs, directives and single-file components, starting with one widget on a page that already exists. For people who want something interactive without rebuilding the whole site around it.
Templates · ref · Directives · SFCs
ref, reactive, computed, watchers and composables, and when each one is the right tool. You turn a tangled Options API component into composables that are easy to read and easy to test.
Composables · computed · watch · Options to Composition
Stores, getters, actions, nested routes, guards and lazy loading, in an app with more than one screen. You decide what belongs in a store and what doesn't, and write down why.
Pinia · Vue Router · Guards · Lazy loading
Masterpiece
Server routes, data fetching, rendering modes and the hydration mismatch that only happens in production. You deploy a Nuxt app that mixes static, server and client rendering, and measure each one.
Server routes · useFetch · Rendering modes · Hydration
The toolchain, the tests and the performance budget that decide whether any of it ships.
Git, the terminal, npm, package.json and Vite, set up by hand and explained file by file. For people who have only ever opened a project somebody else configured.
Git · npm scripts · Lockfiles · Vite
Vitest, Testing Library and Playwright, aimed at behaviour rather than implementation details. You write tests that survive a refactor and still catch the bug that would have reached a user.
Vitest · Testing Library · Playwright · Mocking
Core Web Vitals, the performance panel, images, fonts, bundle size and the third-party script nobody owns. You take a slow production page to a passing score and keep it there with a budget in CI.
LCP & INP · Bundles · Budgets · Images & fonts
Masterpiece
Design tokens, headless components, documentation and versioning, published as packages that React, Svelte and Vue teams can all install. You release a small library with a changelog you would trust yourself.
Tokens · Headless components · Docs · Releases
Ready when you are
Pick a course, or just write to us about what you're building. Either way, you talk to the person who would teach you before anything is paid.