A 1–2 hour, self-contained tutorial that builds the same task tracker app five times, each iteration adding a new layer of the web stack. Designed for people with R/Python experience who are new to web development.
The full solution lives in this repo for browsing. A reset script lets you wipe each part to a starter shell so you can build it yourself, then diff against the solution when you get stuck.
Click the green Code button → Codespaces → Create codespace. Wait ~30 seconds for the devcontainer to build. Everything is pre-installed (Node, VS Code extensions, port forwarding). When you run npm run dev, Codespaces will pop up a notification to open the forwarded port in your browser.
Install Docker Desktop and the Dev Containers extension. Open this folder in VS Code → command palette (Cmd/Ctrl+Shift+P) → Dev Containers: Reopen in Container.
- Node.js LTS (gives you
nodeandnpm) - VS Code with the extensions in
.vscode/extensions.json(it'll prompt you to install them) - For Parts 1–3 you'll use the Live Server extension. For Parts 4–5 you'll use
npm run dev.
This repo contains the full working solution for every part. Two ways to learn:
-
Read-only: browse each folder, read the README, run the code, study how it works. Fast, ~30 min total.
-
Build it yourself (recommended): use the reset script to wipe a part back to a starter shell with TODO comments, then build from scratch. The solution stays in
.solutions/so you can diff or restore.
# Reset all parts to starter state (solutions preserved in .solutions/)
./scripts/reset-to-starter.sh
# Or reset just one part
./scripts/reset-to-starter.sh 04
# Restore solutions when you're done
./scripts/reset-to-starter.sh --restore
# Diff your work against the solution
diff -r 04-react .solutions/04-react| # | Folder | Time | What you learn |
|---|---|---|---|
| 1 | 01-html/ |
10 min | HTML structure, the DOM, devtools |
| 2 | 02-css/ |
15 min | CSS, the box model, flexbox |
| 3 | 03-vanilla-js/ |
25 min | JS basics, DOM manipulation, why React exists |
| 4 | 04-react/ |
40 min | Components, state, props, JSX, useEffect |
| 5 | 05-nextjs/ |
20 min | File routing, layouts, server vs client components |
The same task tracker is built in each part. You'll feel the pain of manual DOM manipulation in Part 3, which is exactly what makes React click in Part 4.
A few things that will feel familiar, and a few that won't:
| Familiar territory | New to you | |
|---|---|---|
| Language | map/filter/reduce, lambdas, destructuring |
Async/await, JSX, === vs == |
| Tooling | Package manager (npm ≈ pip/renv), config files (package.json ≈ DESCRIPTION) |
Build tools (Vite, webpack), bundling, hot reload |
| Paradigm | Functional patterns, immutable data | Declarative UI, state-driven rendering |
| Layout | — | The box model, flexbox, CSS specificity |
The biggest mental shift is declarative thinking. Instead of "find this element, change its text, then update this other thing," you say "given this state, the UI looks like this" — and the framework figures out what to change.
.
├── .devcontainer/ # Codespaces / Dev Containers config
├── .vscode/ # recommended VS Code extensions
├── scripts/
│ └── reset-to-starter.sh # wipe parts back to TODO shells; restore from backup
├── 01-html/ # static HTML
├── 02-css/ # + stylesheet
├── 03-vanilla-js/ # + DOM manipulation (feel the pain)
├── 04-react/ # Vite + React (state + components)
├── 05-nextjs/ # Next.js App Router (routing + server components)
└── .solutions/ # created on first reset, preserves the full solution
- Type, don't paste. Muscle memory matters more than reading for this kind of learning.
- Read each README before touching code. They're short and explain the mental model for that part.
- Open browser devtools (F12). Elements tab in Parts 1–2, Console tab in Part 3, React DevTools extension in Parts 4–5.
- Don't perfect Part 2. CSS is a deep rabbit hole. Make it look acceptable and move on.
- Compare Parts 3 and 4 side by side when you finish Part 4. That comparison is the whole point of this tutorial.
MIT