Chapter 01 — How the Web Actually Works

Why this matters before anything else

You wouldn't try to design a building without knowing what walls, floors, and ceilings do. The web is the same. There are three "materials" every website is made of — and once you know what each one does, everything else makes sense.

This chapter has no coding. It's pure understanding. Give it 45 minutes and you'll walk away able to look at any website and see the skeleton underneath.

The three materials of the web

HTML (HyperText Markup Language) — the structure. Think of it as the bones of a building. It defines what things are: this is a heading, this is a paragraph, this is an image, this is a button. HTML doesn't care about how things look — it just says what they are.
CSS (Cascading Style Sheets) — the style. If HTML is the bones, CSS is everything visual: color, size, spacing, fonts, layout. CSS takes the raw structure and makes it look like a designed product.
JavaScript (JS) — the behavior. This is what makes things move, respond, and change. When you click a button and a menu drops down — that's JavaScript. When you type in a search box and results appear instantly — JavaScript. As a designer, you'll use it sparingly, but knowing it exists is important.

💡 Designer's mental model

Think of it like a house

HTML = the floor plan and walls (structure). CSS = the paint, furniture, and lighting (style). JavaScript = the electricity, plumbing, and smart home automation (behavior). A house needs all three, but a designer mostly works on the first two.

The browser: your website's translator

A website is, at its core, just a bunch of plain text files sitting on a computer somewhere. When you type a URL, your browser (Chrome, Safari, Firefox) goes and fetches those files, then translates them into the visual page you see.

The browser reads your HTML file and thinks: "okay, there's a heading, then a paragraph, then an image." Then it reads the CSS and thinks: "the heading should be this big, this color, with this much space around it." Then it reads the JavaScript and runs any behaviors.

📖 Jargon decoded

What's a "URL"?

URL stands for Uniform Resource Locator — but just think of it as a web address. It's the thing you type into the browser bar, like https://figma.com. The browser uses it to find the right computer and the right files.

Frontend vs. backend — what's your lane?

You'll hear these terms constantly. Here's the plain-English version:

Frontend = everything the user sees and touches. HTML, CSS, JavaScript. This is your lane as a designer who codes. The browser runs this code. You can see it, inspect it, and tweak it.
Backend = everything the user never sees. Servers, databases, business logic. When you log into Instagram and it shows YOUR photos — that's the backend figuring out who you are and fetching your data. You don't need to build this. You need to know it exists and know how to design for it.

🎯 What this means for you

Your job ends at the door

As a designer who codes, you work almost entirely in the frontend. When you get to Chapter 07 (Working with Backend Developers), you'll learn exactly how to hand things off at the boundary — and what questions to ask.

Hosting: putting files on the internet

Every website is just files on a computer. "Hosting" means putting those files on a computer that's connected to the internet 24/7, so anyone can access them anytime.

In Chapter 05, you'll use GitHub Pages — a completely free hosting service that takes your HTML/CSS/JS files and makes them live on the internet in about 2 minutes. No credit card. No server to manage.

What happens when you type a URL

Here's a simplified version of what happens in the half-second between you pressing Enter and seeing a webpage:

Step 1 — DNS lookup: Your browser asks "where does this domain live?" and gets back an IP address (a numbered address like 142.250.80.46). Think of DNS like a phone book for the internet.
Step 2 — Request: Your browser sends an HTTP request — a polite knock on the door saying "can I have the files for this page?"
Step 3 — Response: The server sends back the HTML file and a response code — 200 means "here you go!", 404 means "I can't find that." You'll learn more of these codes in Chapter 07.
Step 4 — Rendering: The browser reads the HTML, fetches any linked CSS and JS files, and builds the visual page you see.

📖 Jargon decoded

What's HTTP?

HTTP (HyperText Transfer Protocol) is the language browsers and servers use to talk to each other. When you see https:// at the start of a URL, the S means "secure" — the conversation is encrypted. You don't need to understand the details; just know it's how data travels on the web.

You need: Chrome or Safari (already on your Mac)

1

Open Chrome and go to any website you find interesting. Try linear.app or stripe.com — they have exceptional design worth studying.
2

Right-click anywhere on the page and choose "Inspect" (or press Cmd + Option + I). A panel will open — this is Chrome DevTools, your new best friend.
3

Move your mouse around the page slowly. Notice how sections of the page highlight in blue — those are the HTML "boxes." Every piece of content lives inside a box.
4

Click on the Elements tab in DevTools. You'll see HTML on the left and CSS on the right. Find: one heading tag (<h1> or <h2>), one color value in CSS (like #fff), and one font name.
5

Bonus: Double-click on any text in the Elements panel and change it. The live page updates instantly — you're only changing it on your screen. Refresh and it goes back.

Key takeaways

HTML = structure, CSS = style, JavaScript = behavior. Three layers, always.
A website is just text files on a computer. The browser translates them into what you see.
Frontend = your lane (what users see). Backend = what you hand off to developers.
Hosting = putting your files on a computer that's always online. Free with GitHub Pages.
DevTools is your X-ray vision for any website. Use it constantly.