How the Web Actually Works — A Beginner's Mental Model

If you've never written a line of web code, this article is where you start. By the end, you'll understand what actually happens when you type google.com and hit enter -- and you'll have a clear roadmap for turning that knowledge into the ability to ship your own SaaS.

No marketing fluff. Just an honest mental model of the web, followed by the learning path we'll walk together across this series.

Why You Need a Mental Model First

Most people who try to learn web development fail for the same reason: they start memorising syntax before they understand what the syntax is for. They learn that fetch('/api/users') makes an HTTP request without ever understanding what "HTTP" or "request" actually mean. Then when something breaks -- and things always break -- they have no mental model to debug from.

This chapter is your mental model. Every line of code you write for the rest of this series will slot into the picture you build here.

The Whole Web in One Paragraph

When you visit a website, your browser asks a server somewhere on the internet to send back some files. The server usually consults a database first to figure out what to send (your profile, your feed, your cart). The files travel back to your browser as text -- HTML for structure, CSS for styling, JavaScript for interactivity -- and your browser renders them into the page you see. Every click, every scroll that loads new content, every form submission, every "like" button is the same loop happening again: your browser asks, a server answers.

That's it. That's the whole web. Everything else is detail.

The Five Actors: Browser, DNS, Server, Database, CDN

Before we walk through what happens when you press enter on a URL, let's meet the five main characters in every web story.

1. The Browser (the client)

Chrome, Safari, Firefox, Edge -- these are all programs that know how to ask servers for files and render those files into a page. The browser lives on your computer or phone. In web development, we also call it "the client" because it's the thing requesting things.

2. DNS (the phonebook)

Computers on the internet talk to each other using numbers called IP addresses (like 142.250.80.46). Humans prefer names like google.com. DNS -- the Domain Name System -- is a worldwide phonebook that translates names into IP addresses. When your browser needs to reach simpleappshipper.com, it asks DNS: "what's the IP for this name?" and gets back a number it can actually connect to.

3. The Server (the kitchen)

A server is just another computer, usually sitting in a data centre, running a program that listens for incoming requests and sends back responses. Think of it like a restaurant kitchen: it doesn't decide what to cook -- it waits for orders, and when one comes in, it cooks and sends the dish back. "Server" is both the machine and the program running on it.

4. The Database (the fridge)

Most interesting websites don't just serve the same files to everyone. Twitter shows your feed, Gmail shows your inbox, Amazon shows your cart. That personalised data lives in a database -- a specialised program designed to store and retrieve structured information fast. When a server gets a request, it typically asks the database for the right data, then assembles the response.

5. The CDN (the local delivery depot)

The internet is physical. Data has to travel through fibre-optic cables under oceans. If the server is in Virginia and you're in Tokyo, the round trip takes time. A CDN (Content Delivery Network) solves this by copying your website's static files (images, CSS, JS) to hundreds of "edge" servers around the world, so users get files from the one closest to them. Cloudflare -- the company whose stack we'll use in this series -- is one of the biggest CDN providers on earth.

The actors you'll actually touch. As a beginner, you'll spend the first 80% of your time writing code for the browser. Then you'll learn to write code for a server. Then you'll learn to talk to a database. DNS and CDN are things you configure once and mostly forget. We'll cover all five, but in that order.

What Happens When You Type a URL

Let's trace a single request end-to-end. You're at a café. You open Chrome and type simpleappshipper.com and press Enter. Here's what actually happens, in order:

You type simpleappshipper.com ⏎
        │
        ▼
┌────────────────┐
│ 1. Your browser│  "Do I have a fresh copy cached?"  →  If yes, use it. Done.
└───────┬────────┘
        │ No cache
        ▼
┌────────────────┐
│ 2. DNS lookup  │  "Hey DNS, what's the IP for simpleappshipper.com?"
└───────┬────────┘                                    Reply: 172.66.0.42
        │
        ▼
┌────────────────┐
│ 3. TCP + TLS   │  Browser opens a connection to 172.66.0.42, encrypts it (HTTPS)
└───────┬────────┘
        │
        ▼
┌────────────────┐
│ 4. HTTP request│  "GET / HTTP/1.1, Host: simpleappshipper.com"
└───────┬────────┘
        │
        ▼
┌────────────────┐
│ 5. Cloudflare  │  CDN edge server in your region intercepts the request.
│   (edge)       │   - If it has a cached copy of "/", it returns it immediately.
└───────┬────────┘   - Otherwise, it forwards to our origin server.
        │
        ▼
┌────────────────┐
│ 6. Origin /    │  Runs our code (a Worker, a Next.js app, etc.).
│   Worker       │   May read from D1 (database) or R2 (storage).
└───────┬────────┘
        │
        ▼
┌────────────────┐
│ 7. HTTP reply  │  "200 OK, Content-Type: text/html" + the HTML bytes
└───────┬────────┘
        │
        ▼
┌────────────────┐
│ 8. Browser     │  Parses HTML. Finds <link> for CSS, <script> for JS, <img> for images.
│   renders      │  Makes additional requests for each. Paints pixels on screen.
└────────────────┘

Every single website in the world -- Google, your bank, Instagram, this page -- follows this same eight-step loop. The only things that change are:

• What runs in step 6 (the server code -- could be PHP, Ruby, Python, Node.js, Go, a Cloudflare Worker, etc.)
• What comes back in step 7 (HTML, JSON, an image, a video)
• How much work the browser does in step 8 (a static site does almost nothing; a React app runs a full JavaScript engine)

HTTP: The Language Everything Speaks

Step 4 above said the browser sends GET / HTTP/1.1. That's HTTP -- the Hypertext Transfer Protocol -- and it's the single most important thing to understand on the web. Every interaction on every website uses HTTP. It's the shared language between browsers and servers.

An HTTP request has four essential parts:

GET /api/users/42 HTTP/1.1       ← method + path + version
Host: simpleappshipper.com        ← which website (a server can host many)
Authorization: Bearer eyJhbGci…   ← headers (metadata about the request)
Accept: application/json

(optional body — used by POST/PUT requests)

A response has the same shape:

HTTP/1.1 200 OK                   ← status code + message
Content-Type: application/json    ← what kind of data is in the body
Cache-Control: max-age=60

{ "id": 42, "name": "William" }   ← the body

The methods you'll use constantly

• GET -- "give me this thing" (reading data, loading a page)
• POST -- "create something new" (submitting a signup form, uploading a file)
• PUT / PATCH -- "update this existing thing"
• DELETE -- "remove this thing"

The status codes you'll see daily

• 200 OK -- success
• 301 / 302 -- redirect (the thing you want is somewhere else)
• 400 Bad Request -- your request was malformed
• 401 Unauthorized -- you're not logged in
• 403 Forbidden -- you're logged in but not allowed
• 404 Not Found -- that URL doesn't exist
• 500 Internal Server Error -- the server crashed

Try this right now. Open Chrome. Press Cmd+Option+I (Mac) or Ctrl+Shift+I (Windows) to open DevTools. Click the Network tab. Reload this page. You'll see every single HTTP request the browser makes, with method, status code, and size. This is the first debugging tool you'll use for the rest of your career.

Frontend vs. Backend vs. Full-Stack

You'll hear these three words constantly. Here's what they actually mean.

Frontend

Everything that runs in the browser. HTML, CSS, and JavaScript. A "frontend developer" writes the code that produces the visible page and its interactivity. Frontend skills: layout, design, animation, forms, client-side state management, accessibility, performance.

Backend

Everything that runs on the server. Handling HTTP requests, talking to databases, authentication, payments, business logic, file storage, scheduled jobs. A "backend developer" writes the code in step 6 of the diagram above. Backend languages: JavaScript (Node.js, Cloudflare Workers), Python, Go, Rust, Ruby, Java, PHP.

Full-Stack

Someone who does both. In 2026, "full-stack" is the default for indie developers and small startups, because one person needs to ship end-to-end. You're going to be full-stack.

The Stack We'll Teach (and Why)

There are dozens of possible stacks in 2026. For this series, we're teaching the exact stack used by the projects I actually ship -- so that by the end, you're not just a tutorial graduate, you're shipping the same tools I use in production.

Tier 0 -- Static Sites: HTML + CSS + vanilla JavaScript

No framework, no build step. Just files. Great for marketing sites, docs, portfolios. You can ship real, fast, SEO-friendly sites with zero tooling.

Tier 1 -- Cloudflare Workers + D1 + R2 + Stripe

The "serverless" backend. Write a plain JavaScript function, deploy it globally in seconds, pay nothing until you have real traffic. D1 is a SQLite database. R2 is file storage. Stripe handles payments. This is what powers my SaaS APIs.

Tier 2 -- Next.js 16 + React 19 + TypeScript + Tailwind v4

When a static site isn't enough -- when you need real app-like interactivity, user accounts, and dashboards -- this is the framework combination the modern web has settled on. Deployed to Cloudflare via the OpenNext adapter, so the whole stack stays on one provider. This article is served by exactly this stack.

Why Cloudflare, not Vercel?

Most tutorials push Vercel. It's a great product. But its pricing scales quickly, and its search results are saturated with tutorials from Vercel's own employees. Cloudflare's free tier is absurdly generous (100,000 requests/day, free database, free storage), the global edge network is the fastest on earth, and the "Cloudflare SaaS" tutorial space is wide open. We'll own it together.

Why not skip straight to React?

Because React is built on top of HTML, CSS, and JavaScript. Every React component eventually becomes HTML. Every style eventually becomes CSS. Every interaction eventually becomes JavaScript. If you skip the foundation, you'll spend years copy-pasting code you don't understand. We'll learn the foundation first, then graduate to frameworks once you can explain what they're solving.

The Full Learning Roadmap

Here's the path from this article to shipping a real subscription SaaS on Cloudflare.

Part 1 -- Web Fundamentals (Chapters 1--6)

1. How the Web Works (this article) -- the mental model.
2. HTML Fundamentals -- structure, semantics, forms, accessibility.
3. CSS Fundamentals -- box model, flexbox, grid, responsive design.
4. CSS Design Systems -- variables, dark themes, composable components.
5. JavaScript Essentials -- variables, functions, the DOM, events, fetch.
6. 📖 Project Study: Dissecting simpleappshipper.com -- we open this website's real source and walk through every pattern. Learn by reading production code.

Part 2 -- Backend & Cloud (Chapters 7--14)

7. What's a Backend? HTTP, REST, JSON -- concepts before touching Workers.
8. Your First Cloudflare Worker -- deploy a "hello world" API to the global edge in 5 minutes.
9. SQL & Databases with D1 -- tables, queries, relationships, migrations.
10. Object Storage with R2 -- upload user files, images, videos. Serve them fast from the edge.
11. Authentication -- Sessions, Cookies, JWT -- how "logged in" actually works.
12. Google OAuth 2.0 Step-by-Step -- "Sign in with Google."
13. Stripe Checkout + Webhooks -- subscriptions, one-time payments, customer portal.
14. 📖 Project Study: Dissecting the SimpleAppShipper API -- walk through my real Worker code end to end: JWT, Stripe, OAuth, D1, R2.

Part 3 -- Modern Frontend (Chapters 15--23)

15. Why JavaScript Needs a Framework -- components, state, reactivity.
16. TypeScript Crash Course -- types, interfaces, generics. 17--22. React Fundamentals → Next.js 16 → Tailwind v4 → shadcn/ui → Deploy to Cloudflare → Resend email.
17. 📖 Project Study: Dissecting a real Next.js SaaS -- full stack map of a production Next.js-on-Cloudflare project.

Part 4 -- Capstone (Chapters 24--25)

24. Bridging Static Site + Worker API + Next.js App -- stitching the three tiers under one domain.
25. Ship a SaaS in a Weekend -- full Stripe-without-Apple subscription SaaS on Cloudflare, built end to end.

Next Steps

You now have the mental model. You know what a browser, server, database, DNS, and CDN are. You understand HTTP. You know what "frontend" and "backend" mean. You've seen the full roadmap.

Here's what to do next:

1. Install a code editor if you haven't -- Cursor or VS Code. Both are free.
2. Open your browser's DevTools -- press Cmd+Option+I / Ctrl+Shift+I. Poke around the Network and Elements tabs. Read requests on any site you visit.
3. Read the next chapter -- HTML Fundamentals. That's where you write your first real web page.

The best time to start learning web development was when the web launched in 1991. The second-best time is now.