Level 1 · Foundations
HTML, CSS & the Web
What the web actually is, then how to build pages by hand. By the end of Level 1 you can take a Figma mockup and ship a small responsive site to Vercel — no framework, just real HTML and CSS.
A · What the web is
WEB-L1-01How the Web Works
Client, server, URLs, HTTP, DevTools — the conversation that makes every page load.
WEB-L1-02Meeting HTML
Tags, elements, attributes and the HTML skeleton — write your first page by hand and open it in a browser.
WEB-L1-03Working with Text
Heading hierarchy, strong & em, line breaks and rules, comments, and the View Source tour.
WEB-L1-04Links & Images
The <a> anchor (external, internal & same-page links), the <img> element with src and alt, relative vs absolute paths, and why alt text matters.
B · HTML semantics & forms
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
C · CSS foundations
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
D · Layout & responsive design
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
E · Figma → code
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
F · Capstones
Coming soon
Coming soon
Coming soon
Coming soon
Assessment
Level Assessment
Coming soon
Level 2 · Intermediate
JavaScript & React
JavaScript fundamentals, the DOM, async + fetch, then React from the ground up: components, hooks, context, custom hooks and React Router. No Next.js yet — that's a dedicated Optional module.
A · JavaScript fundamentals
WEB-L2-01Your First Line of JavaScript
Bring a page to life: the console, your first script tag, and why JavaScript is the third language of the web.
WEB-L2-02Variables & Types
let, const and the six types you meet every day — strings, numbers, booleans, null, undefined and objects.
WEB-L2-03Strings & Template Literals
Join words together, slice them apart, and build tidy sentences with backticks instead of clumsy plus signs.
WEB-L2-04Numbers & Operators
Arithmetic, remainder, rounding and the floating-point surprise that catches out every new programmer.
WEB-L2-05Booleans & Comparison
true, false, and why === is the comparison you should almost always reach for.
WEB-L2-06Making Decisions with if / else
Branch your code, chain conditions with && and ||, and learn which values JavaScript quietly treats as false.
WEB-L2-07Loops — Repeating Work
for, while and for…of: do the boring bit once, then let the computer repeat it a thousand times.
WEB-L2-08Functions — Naming a Job
Parameters, return values and arrow functions — wrap up work once, then reuse it anywhere.
WEB-L2-09Arrays — Lists of Things
Store many values in order, reach them by index, and grow or shrink the list as you go.
WEB-L2-10Array Methods — map, filter, find
Transform, narrow and search a list without writing a single loop. The three methods React leans on hardest.
WEB-L2-11Objects & Destructuring
Group related facts under one name, nest objects inside arrays, and unpack them in a single tidy line.
WEB-L2-12Debugging in DevTools
Read an error message properly, set a breakpoint, step through your code and watch a variable change.
B · DOM & events
WEB-L2-13Meeting the DOM
The page as a tree of objects your JavaScript can reach into and change.
WEB-L2-14Selecting Elements
querySelector and querySelectorAll — finding the exact bit of the page you want.
WEB-L2-15Changing the Page
textContent, classList and building new elements: rewrite the page while it is running.
WEB-L2-16Events & Listeners
addEventListener, the event object, and responding to clicks and key presses.
WEB-L2-17Forms & User Input
Reading inputs, preventing the default submit, and validating before you act.
WEB-L2-18Simple Animations
Toggling classes and CSS transitions to make changes feel smooth.
C · Async JavaScript
WEB-L2-19Why Code Waits
Synchronous vs asynchronous, and what actually happens while a page waits.
WEB-L2-20Meeting fetch
Asking another computer for data and getting a Response back.
WEB-L2-21JSON — Data as Text
The format every API speaks: parsing it, reading it, nesting it.
WEB-L2-22Promises
then, catch and the three states every promise moves between.
WEB-L2-23async / await
The same promises, written so they read top to bottom like normal code.
WEB-L2-24Handling Errors
try / catch, checking response.ok, and telling the user when something breaks.
D · React core
Your First React Component
Scaffold with Vite, then write a function that returns JSX.
JSX in Depth
Expressions in braces, className, and the rules JSX will not bend on.
Props — Passing Data In
One component, many uses: the recipe-card idea made real.
State with useState
Give a component memory, and watch React re-render when it changes.
Handling Events in React
onClick, onChange, and why you pass the function rather than call it.
Conditional Rendering
Show, hide and swap parts of the interface based on state.
Lists & Keys
Rendering an array with map, and why every item needs a stable key.
Controlled Forms
State as the single source of truth for every input on the page.
Side Effects with useEffect
Fetching data when a component appears, and cleaning up after yourself.
useRef & the Real DOM
Reaching a real element when React's declarative model isn't enough.
Context — Sharing State
Skip the prop drilling: make data available to a whole tree at once.
E · React patterns & routing
Custom Hooks
Pull repeated stateful logic out into a function you can reuse.
Lifting State Up
Two components that need the same value — and where that value should live.
useReducer
When several pieces of state change together, one reducer beats five setters.
React Router — First Routes
Multiple pages in a single-page app, without a full reload.
Route Params & Nested Routes
Dynamic URLs like /movie/42, and layouts shared between pages.
Programmatic Navigation
useNavigate, redirects after submit, and guarding a route.
Performance First Look
React.memo, useMemo and useCallback — what they fix and when to bother.
Organising a React Project
Folder structure, component boundaries and naming that survives growth.
F · Capstones
Capstone · Interactive Quiz
State, conditional rendering and scoring in one self-contained app.
Capstone · Weather App
fetch a public API, handle loading and errors, render live data.
Capstone · Todo App
Full CRUD in state, persisted to localStorage so it survives a refresh.
Capstone · Movie Search
React Router plus an API: a genuine multi-page app to finish the level.
Assessment
Level Assessment
Coming soon
Level 3 · Backend
Backend, APIs & Databases
Node.js + Express, REST APIs, PostgreSQL, auth (sessions, JWT, OAuth) and deployment. By the end of Level 3 your React app from L2 talks to a real backend you wrote, with a database, login and a public URL.
A · Node.js + Express
WEB-L3-01What is Node.js?
Take JavaScript out of the browser: install Node, run a .js file from the terminal, and see what a runtime can do that a browser can't.
WEB-L3-02npm & Your First Package
package.json, npm install, node_modules and scripts — the toolbox every Node project uses.
WEB-L3-03Your First Express Server
Install Express, app.listen, and a hello-world route you can open in the browser.
WEB-L3-04Routing & HTTP Methods
GET and POST routes, and reading values out of route params.
WEB-L3-05Request & Response
req.query, req.params and req.body; res.json, res.send and status codes.
WEB-L3-06Middleware
app.use, express.json(), next() and writing your own logging middleware.
WEB-L3-07Serving JSON & Static Files
Build a tiny JSON API and serve static files with express.static.
WEB-L3-08Environment Variables
.env, dotenv, PORT, keeping secrets out of Git with .gitignore.
B · REST API design
WEB-L3-09What is a REST API?
Resources, endpoints and JSON — the shape every modern web API shares.
WEB-L3-10HTTP Verbs & CRUD
POST, GET, PUT and DELETE — full Create/Read/Update/Delete on a resource.
WEB-L3-11Status Codes Done Right
200, 201, 204, 400, 404, 500 — return the right code from every route.
WEB-L3-12Designing Resource Routes
Nouns not verbs, nested resources, and organising routes with express.Router().
WEB-L3-13Validating Input with Zod
Never trust the client: z.object schemas, safeParse, and 400s on bad input.
WEB-L3-14Error Handling & Responses
try/catch, a 4-arg error handler, a 404 catch-all and consistent error JSON.
WEB-L3-15CORS & the Browser
Why the browser blocks cross-origin calls, and fixing it with the cors package.
WEB-L3-16Connecting Your Frontend
Wire a fetch-driven UI to your CRUD API — the React equivalent noted.
C · SQL & PostgreSQL
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
D · Authentication
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
E · Deployment
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
F · Capstone
Coming soon
Coming soon
Assessment
Level Assessment
Coming soon
Level 4 · Production
Production Full-Stack: React + TypeScript + Node
Junior-pro grade. TypeScript end-to-end, production React (perf, error boundaries, code splitting), advanced Express, real tests (Jest + RTL + Playwright) and CI on GitHub Actions. The L4 capstone is a tested, typed, deployed full-stack product you can show in an interview.
A · TypeScript end-to-end
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
B · Production React
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
C · Production Node & Express
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
D · Testing & quality
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
E · Production polish
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
F · Final capstone
Coming soon
Coming soon
Coming soon
Coming soon
Assessment
Level Assessment
Coming soon
Optional Modules · Specialisation
Three 48-lesson modules for students who want to go deeper after L4. Optional — they sit outside the junior-full-stack spine, so the core journey doesn't depend on them. Take any time after L4.
Optional · Module 1
Next.js Full-Stack
App Router, Server Components vs Client Components, Server Actions, Cache Components (use cache, cacheTag), Route Handlers, middleware, deployment to Vercel. The natural next step after L4 for the modern full-stack-Next.js path. ~48 lessons.
Lesson structure for this module is still being designed. We'll publish it before authoring starts.
Optional · Module 2
Mobile Native App Full-Stack
Swift (iOS) + Kotlin (Android), each wired to the same Node API from L3/L4. When native is the right choice, when it isn't. Optional React Native (Expo) sub-track decided at author-time. ~48 lessons.
Lesson structure for this module is still being designed. We'll publish it before authoring starts.
Optional · Module 3
Cloud & DevOps
Docker fundamentals, GitHub Actions deep, CI/CD beyond L4's basics, AWS / GCP foundations (S3, Lambda, CloudFront, RDS), observability (logs, metrics, tracing), infrastructure-as-code intro. ~48 lessons.
Lesson structure for this module is still being designed. We'll publish it before authoring starts.