How the Web Works
---
theme: seriph
title: How the Web Works
info: "Module F-WEB-001 — client/server, DNS, HTTP, browser, DevTools"
---
# How the Web Works
---
# What Is a Website?
Open a few tabs:
- `google.com`
- `instagram.com`
- `babson.edu`
- Your `username.github.io`
**What do they have in common? What's different?**
---
# Websites Are Just Files
Right-click on any webpage → **View Page Source**
- What do you see?
- Can you find text from the page?
> Every website is **text files** that your browser interprets.
---
# Three Languages, One Page
| Language | Role | Analogy |
|---|---|---|
| **HTML** | Structure + content | The skeleton |
| **CSS** | Appearance + layout | The skin and clothes |
| **JavaScript** | Behavior + interactivity | The muscles |
Your browser downloads all three and combines them into what you see.
---
# What Happens When You Enter a URL?
`https://www.babson.edu/academics/index.html`
- **`https://`** — Protocol (secure HTTP)
- **`www.babson.edu`** — Domain name (where to go)
- **`/academics/index.html`** — Path (which page)
---
# The Journey of a Web Request
1. **DNS Lookup** — find the server's IP address
2. **HTTP Request** — your browser asks for the page
3. **Server Response** — the server sends back files
4. **Browser Rendering** — your browser displays the page
---
# Step 1: DNS Lookup
**DNS** = Domain Name System (the "phone book" of the internet)
- You type: `www.babson.edu`
- DNS translates to: `166.117.19.175` (IP address)
> Computers use IP addresses. Humans prefer readable names.
---
# Step 2: HTTP Request
**HTTP** = HyperText Transfer Protocol
Your browser sends a **request**:
```
GET /index.html HTTP/1.1
Host: www.babson.edu
```
- **GET** — retrieve data (loading a page)
- **POST** — send data (submitting a form)
---
# Step 3: Server Response
The server sends back a **response**:
```
HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html>
<html>...
```
**Status codes you'll see:**
- `200` — OK (success)
- `404` — Not Found (wrong path)
- `500` — Server Error (server broke)
> **AI tip:** See an unfamiliar status code? Ask AI: "What does HTTP status 403 mean?"
---
# Step 4: Browser Rendering
The browser receives files and displays them:
1. Parse **HTML** → build the DOM (structure)
2. Parse **CSS** → apply styles
3. Execute **JavaScript** → add interactivity
4. Render → display on screen
---
# The Big Picture
```
You (Browser) Internet Server
| | |
|-- DNS: babson.edu? --->| |
|<- IP: 166.117.19.175 -| |
| | |
|-- GET /index.html -----|----------------> |
| | |
|<---- HTML, CSS, JS ----|------------------ |
| | |
[Render page] | |
```
---
layout: center
---
# Live Demo: DevTools
---
# Chrome DevTools — Your Best Friend
Open DevTools: `Cmd+Option+I` (Mac) or `F12` (Windows)
Three tabs you'll use constantly:
| Tab | What it shows |
|---|---|
| **Elements** | HTML structure + CSS rules (live-editable) |
| **Console** | JavaScript output + errors |
| **Network** | Every file the browser downloaded |
> **AI tip:** When something looks wrong on your page, screenshot DevTools and paste it into AI. It can read the Elements panel and spot issues.
---
# Demo: Inspecting a Page
1. Open `babson.edu` in Chrome
2. Open DevTools → **Elements** tab
3. Click the selector tool (top-left arrow icon)
4. Hover over any element — see its HTML + CSS
5. Try editing text or colors live
> Changes are temporary, refresh and they're gone. This is safe.
> **AI tip:** See a CSS rule in DevTools you don't understand? Copy it and ask AI: "What does this rule do?"
---
# Demo: Network Tab
1. Open DevTools → **Network** tab
2. Refresh the page
3. Watch every file load: HTML, CSS, JS, images, fonts
> This is the HTTP request/response cycle you just learned about, happening live.
> **AI tip:** If a file shows a red status code in the Network tab, copy the filename and status code into AI to find out what went wrong.
---
# Key Takeaways
1. Websites are **text files** (HTML + CSS + JS) served over HTTP
2. **DNS** translates domain names to IP addresses
3. Your browser **requests** files and **renders** them
4. **DevTools** lets you see everything the browser is doing
5. You'll use DevTools every day in this course
6. When something looks wrong, **DevTools first, then AI** with what you found
---
# What's Next
You now know what happens when someone visits a URL.
Next: **deploy your own page** so you have a URL that works.
Topics Covered
- client/server model
- DNS
- HTTP request/response
- browser rendering
- view-source vs DevTools
Content Slides Open fullscreen ↗
Taught In
- Wednesday, 5/20 — How the web works · Deploy your first page