38
Lessons written
7
Levels
33
Lessons planned
121
Empty slots
⏳ Coming soon
| Code | Lesson | Type | Milestone |
|---|---|---|---|
| AA · What the web is4 lessons | |||
| WEB-L1-01 | How the Web WorksClient, server, URLs, HTTP, DevTools — the conversation that makes every page load. | ||
| WEB-L1-02 | Meeting HTMLTags, elements, attributes and the HTML skeleton — write your first page by hand and open it in a browser. | ||
| WEB-L1-03 | Working with TextHeading hierarchy, strong & em, line breaks and rules, comments, and the View Source tour. | ||
| WEB-L1-04 | Links & ImagesThe <a> anchor (external, internal & same-page links), the <img> element with src and alt, relative vs absolute paths, and why alt text matters. | ||
| BB · HTML semantics & forms10 lessons | |||
| WEB-L1-05 | Coming soon | Empty slot | |
| WEB-L1-06 | Coming soon | Empty slot | |
| WEB-L1-07 | Coming soon | Empty slot | |
| WEB-L1-08 | Coming soon | Empty slot | |
| WEB-L1-09 | Coming soon | Empty slot | |
| WEB-L1-10 | Coming soon | Empty slot | |
| WEB-L1-11 | Coming soon | Empty slot | |
| WEB-L1-12 | Coming soon | Empty slot | |
| WEB-L1-13 | Coming soon | Empty slot | |
| WEB-L1-14 | Coming soon | Empty slot | |
| CC · CSS foundations12 lessons | |||
| WEB-L1-15 | Coming soon | Empty slot | |
| WEB-L1-16 | Coming soon | Empty slot | |
| WEB-L1-17 | Coming soon | Empty slot | |
| WEB-L1-18 | Coming soon | Empty slot | |
| WEB-L1-19 | Coming soon | Empty slot | |
| WEB-L1-20 | Coming soon | Empty slot | |
| WEB-L1-21 | Coming soon | Empty slot | |
| WEB-L1-22 | Coming soon | Empty slot | |
| WEB-L1-23 | Coming soon | Empty slot | |
| WEB-L1-24 | Coming soon | Empty slot | |
| WEB-L1-25 | Coming soon | Empty slot | |
| WEB-L1-26 | Coming soon | Empty slot | |
| DD · Layout & responsive design11 lessons | |||
| WEB-L1-27 | Coming soon | Empty slot | |
| WEB-L1-28 | Coming soon | Empty slot | |
| WEB-L1-29 | Coming soon | Empty slot | |
| WEB-L1-30 | Coming soon | Empty slot | |
| WEB-L1-31 | Coming soon | Empty slot | |
| WEB-L1-32 | Coming soon | Empty slot | |
| WEB-L1-33 | Coming soon | Empty slot | |
| WEB-L1-34 | Coming soon | Empty slot | |
| WEB-L1-35 | Coming soon | Empty slot | |
| WEB-L1-36 | Coming soon | Empty slot | |
| WEB-L1-37 | Coming soon | Empty slot | |
| EE · Figma → code6 lessons | |||
| WEB-L1-38 | Coming soon | Empty slot | |
| WEB-L1-39 | Coming soon | Empty slot | |
| WEB-L1-40 | Coming soon | Empty slot | |
| WEB-L1-41 | Coming soon | Empty slot | |
| WEB-L1-42 | Coming soon | Empty slot | |
| WEB-L1-43 | Coming soon | Empty slot | |
| FF · Capstones4 lessons | |||
| WEB-L1-44 | Coming soon | Empty slot | |
| WEB-L1-45 | Coming soon | Empty slot | |
| WEB-L1-46 | Coming soon | Empty slot | |
| WEB-L1-47 | Coming soon | Empty slot | |
| GAssessment1 lesson | |||
| WEB-L1-48 | Level AssessmentComing soon | ⏳ Planned | |
| Code | Lesson | Type | Milestone |
|---|---|---|---|
| AA · JavaScript fundamentals12 lessons | |||
| WEB-L2-01 | Your First Line of JavaScriptBring a page to life: the console, your first script tag, and why JavaScript is the third language of the web. | ||
| WEB-L2-02 | Variables & Typeslet, const and the six types you meet every day — strings, numbers, booleans, null, undefined and objects. | ||
| WEB-L2-03 | Strings & Template LiteralsJoin words together, slice them apart, and build tidy sentences with backticks instead of clumsy plus signs. | ||
| WEB-L2-04 | Numbers & OperatorsArithmetic, remainder, rounding and the floating-point surprise that catches out every new programmer. | ||
| WEB-L2-05 | Booleans & Comparisontrue, false, and why === is the comparison you should almost always reach for. | ||
| WEB-L2-06 | Making Decisions with if / elseBranch your code, chain conditions with && and ||, and learn which values JavaScript quietly treats as false. | ||
| WEB-L2-07 | Loops — Repeating Workfor, while and for…of: do the boring bit once, then let the computer repeat it a thousand times. | ||
| WEB-L2-08 | Functions — Naming a JobParameters, return values and arrow functions — wrap up work once, then reuse it anywhere. | ||
| WEB-L2-09 | Arrays — Lists of ThingsStore many values in order, reach them by index, and grow or shrink the list as you go. | ||
| WEB-L2-10 | Array Methods — map, filter, findTransform, narrow and search a list without writing a single loop. The three methods React leans on hardest. | ||
| WEB-L2-11 | Objects & DestructuringGroup related facts under one name, nest objects inside arrays, and unpack them in a single tidy line. | ||
| WEB-L2-12 | Debugging in DevToolsRead an error message properly, set a breakpoint, step through your code and watch a variable change. | ||
| BB · DOM & events6 lessons | |||
| WEB-L2-13 | Meeting the DOMThe page as a tree of objects your JavaScript can reach into and change. | ||
| WEB-L2-14 | Selecting ElementsquerySelector and querySelectorAll — finding the exact bit of the page you want. | ||
| WEB-L2-15 | Changing the PagetextContent, classList and building new elements: rewrite the page while it is running. | ||
| WEB-L2-16 | Events & ListenersaddEventListener, the event object, and responding to clicks and key presses. | ||
| WEB-L2-17 | Forms & User InputReading inputs, preventing the default submit, and validating before you act. | ||
| WEB-L2-18 | Simple AnimationsToggling classes and CSS transitions to make changes feel smooth. | ||
| CC · Async JavaScript6 lessons | |||
| WEB-L2-19 | Why Code WaitsSynchronous vs asynchronous, and what actually happens while a page waits. | ⏳ Planned | |
| WEB-L2-20 | Meeting fetchAsking another computer for data and getting a Response back. | ⏳ Planned | |
| WEB-L2-21 | JSON — Data as TextThe format every API speaks: parsing it, reading it, nesting it. | ⏳ Planned | |
| WEB-L2-22 | Promisesthen, catch and the three states every promise moves between. | ⏳ Planned | |
| WEB-L2-23 | async / awaitThe same promises, written so they read top to bottom like normal code. | ⏳ Planned | |
| WEB-L2-24 | Handling Errorstry / catch, checking response.ok, and telling the user when something breaks. | ⏳ Planned | |
| DD · React core11 lessons | |||
| WEB-L2-25 | Your First React ComponentScaffold with Vite, then write a function that returns JSX. | ⏳ Planned | |
| WEB-L2-26 | JSX in DepthExpressions in braces, className, and the rules JSX will not bend on. | ⏳ Planned | |
| WEB-L2-27 | Props — Passing Data InOne component, many uses: the recipe-card idea made real. | ⏳ Planned | |
| WEB-L2-28 | State with useStateGive a component memory, and watch React re-render when it changes. | ⏳ Planned | |
| WEB-L2-29 | Handling Events in ReactonClick, onChange, and why you pass the function rather than call it. | ⏳ Planned | |
| WEB-L2-30 | Conditional RenderingShow, hide and swap parts of the interface based on state. | ⏳ Planned | |
| WEB-L2-31 | Lists & KeysRendering an array with map, and why every item needs a stable key. | ⏳ Planned | |
| WEB-L2-32 | Controlled FormsState as the single source of truth for every input on the page. | ⏳ Planned | |
| WEB-L2-33 | Side Effects with useEffectFetching data when a component appears, and cleaning up after yourself. | ⏳ Planned | |
| WEB-L2-34 | useRef & the Real DOMReaching a real element when React's declarative model isn't enough. | ⏳ Planned | |
| WEB-L2-35 | Context — Sharing StateSkip the prop drilling: make data available to a whole tree at once. | ⏳ Planned | |
| EE · React patterns & routing8 lessons | |||
| WEB-L2-36 | Custom HooksPull repeated stateful logic out into a function you can reuse. | ⏳ Planned | |
| WEB-L2-37 | Lifting State UpTwo components that need the same value — and where that value should live. | ⏳ Planned | |
| WEB-L2-38 | useReducerWhen several pieces of state change together, one reducer beats five setters. | ⏳ Planned | |
| WEB-L2-39 | React Router — First RoutesMultiple pages in a single-page app, without a full reload. | ⏳ Planned | |
| WEB-L2-40 | Route Params & Nested RoutesDynamic URLs like /movie/42, and layouts shared between pages. | ⏳ Planned | |
| WEB-L2-41 | Programmatic NavigationuseNavigate, redirects after submit, and guarding a route. | ⏳ Planned | |
| WEB-L2-42 | Performance First LookReact.memo, useMemo and useCallback — what they fix and when to bother. | ⏳ Planned | |
| WEB-L2-43 | Organising a React ProjectFolder structure, component boundaries and naming that survives growth. | ⏳ Planned | |
| FF · Capstones4 lessons | |||
| WEB-L2-44 | Capstone · Interactive QuizState, conditional rendering and scoring in one self-contained app. | ⏳ Planned | |
| WEB-L2-45 | Capstone · Weather Appfetch a public API, handle loading and errors, render live data. | ⏳ Planned | |
| WEB-L2-46 | Capstone · Todo AppFull CRUD in state, persisted to localStorage so it survives a refresh. | ⏳ Planned | |
| WEB-L2-47 | Capstone · Movie SearchReact Router plus an API: a genuine multi-page app to finish the level. | ⏳ Planned | |
| GAssessment1 lesson | |||
| WEB-L2-48 | Level AssessmentComing soon | ⏳ Planned | |
| Code | Lesson | Type | Milestone |
|---|---|---|---|
| AA · Node.js + Express8 lessons | |||
| WEB-L3-01 | What 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-02 | npm & Your First Packagepackage.json, npm install, node_modules and scripts — the toolbox every Node project uses. | ||
| WEB-L3-03 | Your First Express ServerInstall Express, app.listen, and a hello-world route you can open in the browser. | ||
| WEB-L3-04 | Routing & HTTP MethodsGET and POST routes, and reading values out of route params. | ||
| WEB-L3-05 | Request & Responsereq.query, req.params and req.body; res.json, res.send and status codes. | ||
| WEB-L3-06 | Middlewareapp.use, express.json(), next() and writing your own logging middleware. | ||
| WEB-L3-07 | Serving JSON & Static FilesBuild a tiny JSON API and serve static files with express.static. | ||
| WEB-L3-08 | Environment Variables.env, dotenv, PORT, keeping secrets out of Git with .gitignore. | ||
| BB · REST API design8 lessons | |||
| WEB-L3-09 | What is a REST API?Resources, endpoints and JSON — the shape every modern web API shares. | ||
| WEB-L3-10 | HTTP Verbs & CRUDPOST, GET, PUT and DELETE — full Create/Read/Update/Delete on a resource. | ||
| WEB-L3-11 | Status Codes Done Right200, 201, 204, 400, 404, 500 — return the right code from every route. | ||
| WEB-L3-12 | Designing Resource RoutesNouns not verbs, nested resources, and organising routes with express.Router(). | ||
| WEB-L3-13 | Validating Input with ZodNever trust the client: z.object schemas, safeParse, and 400s on bad input. | ||
| WEB-L3-14 | Error Handling & Responsestry/catch, a 4-arg error handler, a 404 catch-all and consistent error JSON. | ||
| WEB-L3-15 | CORS & the BrowserWhy the browser blocks cross-origin calls, and fixing it with the cors package. | ||
| WEB-L3-16 | Connecting Your FrontendWire a fetch-driven UI to your CRUD API — the React equivalent noted. | ||
| CC · SQL & PostgreSQL14 lessons | |||
| WEB-L3-17 | Coming soon | Empty slot | |
| WEB-L3-18 | Coming soon | Empty slot | |
| WEB-L3-19 | Coming soon | Empty slot | |
| WEB-L3-20 | Coming soon | Empty slot | |
| WEB-L3-21 | Coming soon | Empty slot | |
| WEB-L3-22 | Coming soon | Empty slot | |
| WEB-L3-23 | Coming soon | Empty slot | |
| WEB-L3-24 | Coming soon | Empty slot | |
| WEB-L3-25 | Coming soon | Empty slot | |
| WEB-L3-26 | Coming soon | Empty slot | |
| WEB-L3-27 | Coming soon | Empty slot | |
| WEB-L3-28 | Coming soon | Empty slot | |
| WEB-L3-29 | Coming soon | Empty slot | |
| WEB-L3-30 | Coming soon | Empty slot | |
| DD · Authentication10 lessons | |||
| WEB-L3-31 | Coming soon | Empty slot | |
| WEB-L3-32 | Coming soon | Empty slot | |
| WEB-L3-33 | Coming soon | Empty slot | |
| WEB-L3-34 | Coming soon | Empty slot | |
| WEB-L3-35 | Coming soon | Empty slot | |
| WEB-L3-36 | Coming soon | Empty slot | |
| WEB-L3-37 | Coming soon | Empty slot | |
| WEB-L3-38 | Coming soon | Empty slot | |
| WEB-L3-39 | Coming soon | Empty slot | |
| WEB-L3-40 | Coming soon | Empty slot | |
| EE · Deployment5 lessons | |||
| WEB-L3-41 | Coming soon | Empty slot | |
| WEB-L3-42 | Coming soon | Empty slot | |
| WEB-L3-43 | Coming soon | Empty slot | |
| WEB-L3-44 | Coming soon | Empty slot | |
| WEB-L3-45 | Coming soon | Empty slot | |
| FF · Capstone2 lessons | |||
| WEB-L3-46 | Coming soon | Empty slot | |
| WEB-L3-47 | Coming soon | Empty slot | |
| GAssessment1 lesson | |||
| WEB-L3-48 | Level AssessmentComing soon | ⏳ Planned | |
| Code | Lesson | Type | Milestone |
|---|---|---|---|
| AA · TypeScript end-to-end12 lessons | |||
| WEB-L4-01 | Coming soon | Empty slot | |
| WEB-L4-02 | Coming soon | Empty slot | |
| WEB-L4-03 | Coming soon | Empty slot | |
| WEB-L4-04 | Coming soon | Empty slot | |
| WEB-L4-05 | Coming soon | Empty slot | |
| WEB-L4-06 | Coming soon | Empty slot | |
| WEB-L4-07 | Coming soon | Empty slot | |
| WEB-L4-08 | Coming soon | Empty slot | |
| WEB-L4-09 | Coming soon | Empty slot | |
| WEB-L4-10 | Coming soon | Empty slot | |
| WEB-L4-11 | Coming soon | Empty slot | |
| WEB-L4-12 | Coming soon | Empty slot | |
| BB · Production React10 lessons | |||
| WEB-L4-13 | Coming soon | Empty slot | |
| WEB-L4-14 | Coming soon | Empty slot | |
| WEB-L4-15 | Coming soon | Empty slot | |
| WEB-L4-16 | Coming soon | Empty slot | |
| WEB-L4-17 | Coming soon | Empty slot | |
| WEB-L4-18 | Coming soon | Empty slot | |
| WEB-L4-19 | Coming soon | Empty slot | |
| WEB-L4-20 | Coming soon | Empty slot | |
| WEB-L4-21 | Coming soon | Empty slot | |
| WEB-L4-22 | Coming soon | Empty slot | |
| CC · Production Node & Express8 lessons | |||
| WEB-L4-23 | Coming soon | Empty slot | |
| WEB-L4-24 | Coming soon | Empty slot | |
| WEB-L4-25 | Coming soon | Empty slot | |
| WEB-L4-26 | Coming soon | Empty slot | |
| WEB-L4-27 | Coming soon | Empty slot | |
| WEB-L4-28 | Coming soon | Empty slot | |
| WEB-L4-29 | Coming soon | Empty slot | |
| WEB-L4-30 | Coming soon | Empty slot | |
| DD · Testing & quality6 lessons | |||
| WEB-L4-31 | Coming soon | Empty slot | |
| WEB-L4-32 | Coming soon | Empty slot | |
| WEB-L4-33 | Coming soon | Empty slot | |
| WEB-L4-34 | Coming soon | Empty slot | |
| WEB-L4-35 | Coming soon | Empty slot | |
| WEB-L4-36 | Coming soon | Empty slot | |
| EE · Production polish7 lessons | |||
| WEB-L4-37 | Coming soon | Empty slot | |
| WEB-L4-38 | Coming soon | Empty slot | |
| WEB-L4-39 | Coming soon | Empty slot | |
| WEB-L4-40 | Coming soon | Empty slot | |
| WEB-L4-41 | Coming soon | Empty slot | |
| WEB-L4-42 | Coming soon | Empty slot | |
| WEB-L4-43 | Coming soon | Empty slot | |
| FF · Final capstone4 lessons | |||
| WEB-L4-44 | Coming soon | Empty slot | |
| WEB-L4-45 | Coming soon | Empty slot | |
| WEB-L4-46 | Coming soon | Empty slot | |
| WEB-L4-47 | Coming soon | Empty slot | |
| GAssessment1 lesson | |||
| WEB-L4-48 | Level AssessmentComing soon | ⏳ Planned | |
Lessons for this level are not authored yet.
Lessons for this level are not authored yet.
Lessons for this level are not authored yet.
No lessons match your search.