Ultimate Web Development Series

Web development tutorials for HTML, CSS, JavaScript, Next.js, Workers, databases, and production shipping.

25 chapters · about 717 min end to end

1. 01How the Web Actually Works — A Beginner's Mental ModelA plain-English walkthrough of browsers, DNS, HTTP, servers, and the full web dev roadmap from zero to shipping a real SaaS on Cloudflare.Beginner · 20 min
2. 02HTML Fundamentals — Your First Real Web PageA plain-English guide to HTML: what it actually is, how the browser turns it into a tree, the 20 elements you'll use daily, semantic structure, forms, and the 5 accessibility rules that make your pages work for everyone.Beginner · 25 min
3. 03CSS Fundamentals — Making the Browser Not Look BoringA plain-English guide to CSS: the rule anatomy, selectors and specificity, the box model, flexbox and grid, positioning, and media queries — everything you need to turn unstyled HTML into a shippable page.Beginner · 30 min
4. 04CSS Design Systems — The Pattern Every Real Site UsesTurn ad-hoc CSS into a reusable design system: custom properties, design tokens, typographic scales, spacing rhythms, dark-mode theming, and component composition — the pattern behind every polished product site.Beginner · 28 min
5. 05JavaScript Essentials — The Third Leg of the BrowserA plain-English walkthrough of the JavaScript you need to actually ship: variables, functions, arrays and objects, the DOM, events, fetch, async/await, and modules — with live patterns for every real-world task.Beginner · 35 min
6. 06Project Study — Dissecting simpleappshipper.comA full walkthrough of the real production Next.js + MDX + Cloudflare stack powering this website — from the file tree to the request lifecycle to the deploy pipeline. Part 1 closes by reading shipped code.Intermediate · 35 min
7. 07What's a Backend? — HTTP, REST, and JSON in Plain EnglishThe concepts behind every server-side tutorial: what a backend actually is, how REST turns URLs into resources, why JSON won, status codes, stateless requests, and how to design a clean API — all before writing a single line of Worker code.Beginner · 25 min
8. 08Your First Cloudflare Worker — A Backend in 5 MinutesWrite, run, and deploy your first Cloudflare Worker: install Wrangler, scaffold a project, understand the fetch handler, route requests by path + method, use environment variables, test locally, and ship to 200+ edge locations.Beginner · 30 min
9. 09SQL & Databases with D1 — Persistence Your Worker Won't ForgetA plain-English SQL crash course plus Cloudflare D1: tables, primary keys, the 6 queries you'll use 95% of the time, foreign keys, indexes, migrations, prepared statements, and wiring D1 into your Worker so every note survives a restart.Beginner · 35 min
10. 10Object Storage with R2 — Where Your Files LiveCloudflare R2 explained from scratch: what object storage is, why files don't belong in a database, creating a bucket, the put/get/delete/list API, uploading from HTML forms, serving bytes through a Worker, and storing metadata in D1 alongside the bytes.Beginner · 28 min
11. 11Authentication — Sessions, Cookies, and JWT From ScratchA plain-English guide to who-is-this-user on the web: authentication vs authorization, password hashing, sessions vs tokens, cookies vs Authorization headers, and building HS256 JWT signing in a Cloudflare Worker with the Web Crypto API.Intermediate · 35 min
12. 12Google OAuth 2.0, Step by Step — Sign In With Google From ScratchThe full OAuth 2.0 Authorization Code flow explained and implemented in a Cloudflare Worker: register your app in Google Cloud, understand every URL in the dance, handle redirects safely, exchange codes for tokens, and issue a session cookie once the user is known.Intermediate · 35 min
13. 13Stripe Checkout + Webhooks — A Real Subscription BackendTurn your Worker into a real SaaS backend: configure Stripe products, redirect users to hosted Checkout, verify signed webhooks, store subscription state in D1, and gate premium features — all without a single custom payment form.Intermediate · 40 min
14. 14Project Study — Dissecting saas/src/index.js, a Real Cloudflare WorkerThe Part 2 capstone: open the real Cloudflare Worker backing simpleappshipper.com — hand-written JWT, Google OAuth, Stripe webhooks, D1 schema, R2 with perceptual-hash dedup, and a 5-minute cron. Every pattern from Chs 7–13 in one production file.Intermediate · 35 min
15. 15What Is CI? GitHub Actions, npm ci, and Worker Deploys ExplainedStop being confused about CI. A plain-English walkthrough of what continuous integration actually does, why a green checkmark gates the merge button, what GitHub Actions runs on a fresh Linux VM every push, why `npm ci` is not a typo for `npm install`, and how to wire wrangler deploy so every push to main ships your Cloudflare Worker — with a complete copy-pasteable workflow file.Beginner · 25 min
16. 16ESLint and Prettier — Why Your Code Has OpinionsA plain-English guide to the two tools every modern JavaScript project ships with: ESLint catches bugs and bad patterns, Prettier reformats whitespace. What each one actually does, why they're separate, how to wire them into your editor and into CI, and how to stop arguing about semicolons forever.Beginner · 22 min
17. 17Unit Testing with Vitest — Your First Real Test SuiteA complete beginner's guide to automated tests for JavaScript: what a unit test is, why Vitest is the modern default, the Arrange-Act-Assert structure, what to mock and what to leave alone, how to test async code, what code coverage really tells you, and how to wire the same test suite into CI so a broken function blocks the merge button.Beginner · 28 min
18. 18Pull Requests — The Workflow Real Teams Ship WithBranches, forks, draft PRs, merge vs rebase vs squash, fixing conflicts, the anatomy of a good PR description, and how a pull request becomes the unit of work every modern codebase is changed by. A from-zero walkthrough for the developer who has only ever pushed straight to main.Beginner · 26 min
19. 19Code Review — How to Give and Get Useful FeedbackWhat a reviewer actually looks for, how to write comments people don't hate receiving, the difference between approve / request changes / comment, how to disagree without going to war, and how to read review feedback as the PR author without taking it personally. The human half of the pull request workflow.Beginner · 24 min
20. 20JSX, TSX, and npm Scripts — File Types and What `npm run` Actually DoesWhat a .jsx file is, what makes .tsx different, why React invented JSX in the first place, what TypeScript adds on top, what an .mdx file actually is (Markdown + JSX, the format every modern docs site uses), and a full walkthrough of `npm run lint`, `npm run typecheck`, `npm test`, `npm run build`, and `npm run dev` — what each one does, how they're wired in package.json, and how they all flow into the CI pipeline from earlier chapters.Beginner · 30 min
21. 21Do You Actually Need GitHub Actions? Cost, Free Alternatives, and Running CI LocallyCh 15 showed you what CI is and how to write a workflow. This chapter answers the question that's been hanging: what does running that robot actually cost? A plain-English breakdown of GitHub Actions pricing (and why public repos are free forever), the macOS 10x trap, Cloudflare's built-in push-to-deploy as an alternative, the four ways to run the exact same checklist locally for $0 — git hooks, act, and self-hosted runners — and a side-by-side price comparison so you can pick the cheapest option that actually fits your project.Beginner · 24 min
22. 22What Is npm and npx? Packages, the Registry, package.json, and Running One-Off ToolsEvery JavaScript project starts with `npm install` and half of them start with `npx create-next-app` — but nobody explains what npm and npx actually are. This chapter does, from zero: what a package is, what the npm registry is, what `package.json`, `node_modules`, and `package-lock.json` each do, dependencies vs devDependencies, how semver version ranges (^ and ~) work, the difference between local and global installs, what `npx` is and why it exists, npm vs npx side by side, the real-world applications of each (scaffolding apps, running a tool once, pinning a version), a copy-paste command cheat sheet, and where pnpm/yarn/bun fit.Beginner · 26 min
23. 23Decoding the Jargon — SQL, Schema, Cloudflare D1, 'Working Tree Is Dirty' & 'Source of Truth'Five terms you keep bumping into while shipping an app — in your terminal, in git's output, in this project's own docs — finally explained from zero. What SQL actually is, what a schema is (the blueprint of your data), what Cloudflare D1 is as a piece of technology (serverless SQLite at the edge), what git means when it says 'the working tree is dirty' (you have unsaved changes, and that's fine), and the single most useful idea of the bunch — 'source of truth': the one authoritative copy everything else derives from, and how to actually use it. Plain-English definitions with links to the deep-dive chapters for each.Beginner · 24 min
24. 24Cloudflare Workers Builds vs GitHub Actions — and the Headless Mac Mini That Beats Both on PriceCh 21 proved most CI is free. This chapter is for the moment it isn't — when you're shipping macOS builds and the 10x runner tax starts billing real money. A proper walkthrough of Cloudflare Workers Builds as a build pipeline, a head-to-head against the same deploy on GitHub Actions, an exact click-by-click tour of where the bill actually lives on both dashboards (and how to cap it), and the one move that turns metered cloud builds into a flat $0: buy a ~$599 headless Mac Mini, register it as a self-hosted runner, and let it pay for itself in about four months. With real break-even math and a no-monitor setup guide.Beginner · 27 min
25. 25Local CI vs Online CI — What ci:local Means, the Pros and Cons, and Every Place You Can Run the ChecklistCh 21 priced CI out and Ch 24 did the Mac-mini math; this chapter is about making local your default loop. What 'ci:local' actually means — the same checklist a server would run, run by you before you push — why this project literally ships an `npm run check` gate, the one rule that stops local and online from drifting (one script, two callers), an honest pros-and-cons of running the checks on your own machine, a complete catalog of where you can run them (manual scripts, git hooks, Husky/lefthook/pre-commit, act, Docker, self-hosted runners) versus online (GitHub Actions, GitLab CI, Workers Builds, CircleCI, Bitrise, Codemagic, Xcode Cloud), a side-by-side comparison, and how the two layers fit together instead of competing.Beginner · 25 min