CEH v13 · Module 13 Foundation

How the Web Actually Works

From typing a URL to seeing a webpage — every step visualised and interactive. Built for complete beginners.

7 interactive chapters · No theory, just visuals

Chapter 01

What is the Internet?

The internet is billions of computers connected together, each with a unique address (an IP address). When you visit a website, data travels through multiple hops — routers, ISPs, and servers — before reaching you.

🖥️ Your PC 192.168.1.5 📡 Home Router Your ISP gives you this ISP BT / Virgin Internet Service Provider 🌐 Internet Backbone Global fibre cables 🏢 Data Centre Rack of servers 🗄️ Web Server 93.184.216.34 Step 1 Step 2 Step 3 Step 4 Step 5 Step 6 → Request travels from your PC to the Web Server → ← Response (webpage HTML) travels back ←
Click the button to send a data packet
📦

Data Packets

Data is split into small packets. Each packet travels independently and is reassembled at the destination. Like sending a book page by page, each in a different envelope.

🔀

Routers

Routers read each packet's destination IP address and decide the best route — like traffic lights that direct data. Your home router connects you to the ISP.

🏷️

IP Address

Every device on the internet has a unique IP address — like a home address for data. Example: 93.184.216.34. Without it, data has nowhere to go.

Chapter 02

How DNS Works

You type google.com — but computers only understand numbers. DNS is the internet's phone book: it translates names into IP addresses. Click a domain below to watch the full lookup happen.

🖥️ Browser 📡 Recursive Resolver Your ISP / 8.8.8.8 🌍 Root Name Server 13 root servers worldwide 🗂 TLD Server .com / .co.uk / .org 📋 Authoritative Name Server ✓ Answer 💾 Browser Cache Saved for next time TTL: 300 seconds
// Click a domain above to watch the DNS lookup step by step

DNS Record Types — How They Work in Practice

A Record Maps a domain name → IPv4 address. The most common record type.
# dig A google.com
google.com. 300 IN A 142.250.80.46
google.com. 300 IN A 142.250.80.100 # multiple IPs = load balancing

# What happens when you visit google.com:
1. DNS returns 142.250.80.46
2. Your browser connects to that IP on port 443 (HTTPS)
3. Google's server responds with the homepage HTML
AAAA Record Maps a domain name → IPv6 address. IPv6 = newer, 128-bit addresses. Handles modern internet scale.
# dig AAAA google.com
google.com. 300 IN AAAA 2a00:1450:4009:808::200e

# IPv4 vs IPv6:
IPv4: 142.250.80.46 # ~4 billion addresses
IPv6: 2a00:1450:4009:808::200e # 340 trillion trillion trillion addresses

# Most modern sites have both A and AAAA records
CNAME Canonical Name — an alias. Points one domain name to another domain name (not directly to an IP).
# Real example — www.google.com is an alias:
www.google.com. 300 IN CNAME google.com.
google.com. 300 IN A 142.250.80.46

# Real-world CNAME use — CDN routing:
shop.mystore.com. IN CNAME mystore.shopify.com.
# Shopify handles hosting; the custom domain just points there

# Why useful: change the target IP in one place, all CNAMEs update
MX Record Mail Exchange — tells the internet where to deliver emails sent to this domain.
# dig MX google.com
google.com. 300 IN MX 10 aspmx.l.google.com.
google.com. 300 IN MX 20 alt1.aspmx.l.google.com.
google.com. 300 IN MX 30 alt2.aspmx.l.google.com.

# What happens when someone emails you@google.com:
1. Sending server looks up MX record for google.com
2. Lowest number (10) = highest priority mail server
3. Connects to aspmx.l.google.com to deliver the email
4. If that fails, tries priority 20, then 30 (fallback)
TXT Record Text — stores any text. Used for domain verification, email authentication (SPF, DKIM), and security policies.
# dig TXT google.com
google.com. IN TXT "v=spf1 include:_spf.google.com ~all"
# SPF: tells mail servers which IPs are allowed to send email for google.com

google.com. IN TXT "google-site-verification=abc123..."
# Google Search Console verifies you own the domain via this TXT record

# Security use: attackers often probe TXT records for info leakage
dig TXT example.com # may reveal internal infrastructure details
NS Record Name Server — declares which DNS servers are authoritative for this domain. Critical for domain ownership.
# dig NS google.com
google.com. IN NS ns1.google.com.
google.com. IN NS ns2.google.com.
google.com. IN NS ns3.google.com.
google.com. IN NS ns4.google.com.

# Why it matters for security:
NS hijacking = attacker changes NS records
→ all DNS queries for the domain now go to attacker's server
→ attacker can return any IP they want for any subdomain
→ victims get sent to fake versions of every service
Chapter 03

Anatomy of a URL

Every web address is precisely structured. Each part tells the browser — and the server — something specific. Click the example URLs below to see them dissected.

https://shop.example.com/products/shoes?size=10&colour=red#reviews
Normal shopping URL — this is how most e-commerce sites work
Scheme
Protocol
Domain
Server name
Path
Resource
Query
Parameters
Fragment
Page anchor

Scheme (Protocol)

https:// — encrypted connection
http:// — unencrypted (dangerous)
ftp:// — file transfer
ssh:// — secure shell

Domain + Port

Resolved via DNS to an IP.
Default ports: HTTPS=443, HTTP=80, FTP=21. Explicit: site.com:8080

Path

Which file or resource to get. /products/shoes could be a file or a route handled by backend code.

Query String

Key=value pairs after ?. Directly fed into server logic. Biggest attack surface — SQL injection, path traversal.

Fragment

#reviews — browser-only, jumps to a page section. Never sent to the server. Can't be logged or intercepted.

Chapter 04

HTTP Request & Response

Every page load is a conversation — your browser sends a request, the server sends a response. Click the request types to watch it happen and see the raw HTTP messages.

🖥️
Browser
Client
192.168.1.5
GET /index.html
🗄️
Web Server
Apache/Nginx
93.184.216.34
// Click any request type above to simulate HTTP traffic

HTTP Methods

GET → retrieve a resource
POST → send data (forms, login)
PUT → update a resource
DELETE → remove a resource
HEAD → headers only, no body

HTTP vs HTTPS

HTTP — plain text, anyone on the same network can read it. Password sent as-is.
HTTPS — TLS encrypted. Even on the same WiFi, a snooper sees scrambled data only. Always look for 🔒 in the browser.
Chapter 05

Frontend vs Backend — Live Demo

Toggle each layer on and off to see exactly what it contributes to a real webpage. Then see what the backend actually does when a button is clicked.

Frontend Layers
HTML
Structure & content
CSS
Colours, fonts, layout
JavaScript
Interactivity & logic
Backend (Server Side)
When you click the button:
1. Browser sends POST /like request
2. Python/Node.js receives it
3. Queries database for count
4. Updates database
5. Returns new count as JSON
6. JS updates the number on screen
⚠ HTML/CSS/JS all live in the browser — press F12 to read them. Never put passwords, API keys or secrets in frontend code.
Live Browser Preview
example.com/product
// Backend server console — watch what happens when you interact with the page above
Chapter 06

Web Hosting — Real Analogies

Where does a website actually live? Think of it like renting space for your website to live 24/7. Click each type to see how it works in practice.

🏠

Shared Hosting

"Like renting a room in a house"

You share the house (server) with many others. Cheap, but what your neighbours do affects you.

🏢

VPS Hosting

"Like renting your own flat"

Your own private space inside a big building. What others do in their flats doesn't affect yours.

🏭

Dedicated Server

"Like owning the whole building"

An entire physical machine just for you. Full control, full responsibility, highest cost.

☁️

Cloud Hosting

"Like renting from a hotel"

Scale rooms up or down as needed. Pay only for what you use. AWS, Azure, Google Cloud.

Chapter 07

HTTP Status Codes — Real Pages

Every HTTP response has a 3-digit code. These aren't just numbers — they have a visual impact on users and tell attackers what's happening behind the scenes. Click each code to see a real browser page.

https://example.com/
Select a status code above to see what it looks like in a browser
Knowledge Check

Test Your Understanding

10 questions covering everything in this simulation. Score 8+ and you're ready for the CEH content.

0/10