A comprehensive, beginner-first 2026 guide to how websites and web applications are actually built — with a concept track (sidebar order) and a parallel build track (Roadmap stages). 17 chapters plus a final capstone and glossary, with interactive code that runs in your browser. Last updated: June 2026.
Live site (canonical): https://modernwebdevguide.com/
Seventeen chapters across six parts, plus a whole-guide capstone. The concept track follows the sidebar in order (quiz-gated). The build track follows Roadmap Part I while looking up Foundations/Stack pages on demand.
| Part | # | Chapter | One-line summary |
|---|---|---|---|
| — | — | Introduction | Start here — two tracks, how to read. |
| A · Fundamentals | 1 | Web Fundamentals | HTTP, rendering, APIs, data, auth, deployment, commerce. |
| 2 | Production Engineering | Concurrency, production patterns, testing, debugging. | |
| 3 | Roadmap | Zero-to-shipped curriculum, tier picks, meta-skills. | |
| B · Building blocks | 4 | Lifecycle | Plan → design → build → review → ship → maintain. |
| 5 | Tech Stack | 2026 tools + Advanced companions (TS, React, CSS, APIs, DB). | |
| C · Infrastructure & scale | 6 | Cloud Platforms | Compute, VPC, IAM, storage, IaC, cost. |
| 7 | SRE & Operations | SLOs, observability, incidents, deploys, chaos. | |
| 8 | Distributed Systems | CAP, replication, consensus, idempotency, streaming. | |
| D · Specializations | 9 | AI Integration | Streaming chat, RAG, agents, safety, evals. |
| 10 | Mobile & Ecosystems | RN, Flutter, PWA, JVM, .NET, Go, Python. | |
| E · Workflows by scale | 11 | Solo / Personal | Side projects, free tiers, ship fast. |
| 12 | Startup / Small Co. | 5–50 people, managed services. | |
| 13 | Enterprise | Compliance, platform teams, 99.99% uptime. | |
| 14 | Comparison | Solo / startup / enterprise side-by-side. | |
| F · Judgment & growth | 15 | Decisions | Boring tech, reversibility, cost of inaction. |
| 16 | Career | Portfolio, job search, compensation. | |
| 17 | Final Capstone | Whole-guide assessment (≥ 75% pass bar). | |
| 18 | Glossary | Every term, plain English. |
Directory numbers (
12-cloud, etc.) are historical; chapter order is driven bysidebars.ts. URLs strip prefixes (/docs/cloud).
- Live JS & React — editable snippets with instant preview (Roadmap stages).
- CodeChallenge — auto-graded functions in a Web Worker (Stage 1, Stage 10, more).
- SqlPlayground — in-browser Postgres via pglite (Foundations SQL, Advanced Databases).
- Sandpack — multi-file DOM/React/Tailwind sandboxes (Stage 3, Stage 7, Advanced React).
npm run apply-prereqs # Regenerate prereqs.ts from docs + sidebars
npm run validate-prereqs # CI: verify prereqs.ts matches expected
node scripts/write-chapter-pages.mjs # Regenerate chapterPages.ts + sync guide.ts counts
npm run audit-lessons # Warn on missing lesson skeleton elements
npm run diff-glossary # Heuristic glossary gap report
make verify # prereqs + typecheck + production buildBuilt with Docusaurus. Requires Node.js 20+.
npm install
npm run start # http://localhost:3000
npm run build
npm run servemodern-web-dev-guide/
├── docs/ # ~290 teaching pages
│ ├── 00-intro.md
│ ├── 01-foundations/ # Ch 1–2 (48 pages + 2 checkpoints)
│ ├── 02-roadmap/ # Ch 3 (36 pages)
│ ├── 99-capstone.md # Ch 17 — final assessment
│ └── … # See sidebars.ts for full order
├── src/components/ # Quiz, CodeChallenge, SqlPlayground, Sandbox
├── scripts/ # prereqs sync, chapter pages, audits
├── sidebars.ts # Chapter order (source of truth)
└── GUIDE-STANDARD.md # Content/pedagogy standard (synced across guides)
GitHub Pages via .github/workflows/deploy.yml on push to main. PRs run test-build.yml.
© 2026 To Yin Yu. All rights reserved. This project is source-available, not open-source: you're welcome to read it and run it locally to learn, but it may not be copied, redistributed, modified, used commercially, or rebranded without permission. See LICENSE for full terms.