Every time you type a URL into your browser and press Enter, a complex series of events unfolds in milliseconds. Understanding this process is fundamental to becoming a full-stack developer — it helps you debug issues, optimize performance, and design better applications.
The Internet vs. The Web
The Internet is the global network of interconnected computers. It's the infrastructure — cables, routers, servers, and protocols that allow machines to communicate.
The World Wide Web is a service that runs on top of the Internet. It's the collection of websites, pages, and resources accessible via HTTP/HTTPS.
Interactive: Internet vs The Web
THE WEB (HTTP/S)
Application LayerCollection of websites, APIs, and resources accessed through browsers. Built on top of the Internet infrastructure.
THE INTERNET (INFRASTRUCTURE)
Network LayerThe global network of cables, routers, and servers. Supports multiple services beyond just the Web.
IP Addresses
Every device connected to the internet has an IP address — a unique numerical identifier.
IPv4
The traditional format, consisting of four numbers (0-255) separated by dots:
192.168.1.1142.250.80.46 (Google)
IPv6
A newer format with more addresses available:
2001:0db8:85a3:0000:0000:8a2e:0370:7334
Think of it like this: IP addresses are like phone numbers for computers. Every device needs one to send and receive data.
Domain Name System (DNS)
Humans don't remember IP addresses — we use domain names like google.com. The DNS translates human-readable domains into IP addresses.
DNS Resolution Process
Interactive: DNS Resolution
- Browser Cache — Checks if it knows the IP already
- OS Cache — Operating system's DNS cache
- Router Cache — Your home router's cache
- ISP DNS Server — Your internet provider's DNS
- Root DNS Server — Directs to .com TLD server
- TLD Server (.com) — Directs to the domain's DNS
- Authoritative DNS — Returns the final IP address
DNS Record Types
| Type | Purpose | Example |
|---|---|---|
A | Maps domain to IPv4 | example.com → 142.250.80.46 |
AAAA | Maps domain to IPv6 | example.com → 2001:db8::1 |
CNAME | Alias to another domain | www.example.com → example.com |
MX | Mail server | example.com → mail.google.com |
TXT | Text records (verification) | SPF, DKIM records |
HTTP: The Language of the Web
HTTP (HyperText Transfer Protocol) is the protocol browsers and servers use to communicate. HTTPS is the secure version using TLS encryption.
HTTP Methods
| Method | Purpose | Has Body |
|---|---|---|
GET | Retrieve data | No |
POST | Create new resource | Yes |
PUT | Update entire resource | Yes |
PATCH | Partial update | Yes |
DELETE | Remove resource | No |
HTTP Status Codes
| Range | Category | Examples |
|---|---|---|
1xx | Informational | 100 Continue |
2xx | Success | 200 OK, 201 Created, 204 No Content |
3xx | Redirection | 301 Moved Permanently, 304 Not Modified |
4xx | Client Error | 400 Bad Request, 401 Unauthorized, 404 Not Found |
5xx | Server Error | 500 Internal Server Error, 503 Service Unavailable |
What Happens When You Visit a Website?
- Step 1: DNS Lookup — Browser resolves the domain to an IP address
- Step 2: TCP Connection — Browser establishes connection (
SYN → SYN-ACK → ACK) - Step 3: TLS Handshake — For HTTPS, encryption is negotiated
- Step 4: HTTP Request — Browser sends
GET / HTTP/1.1request - Step 5: Server Processing — Server processes and prepares response
- Step 6: HTTP Response — Server sends back HTML, CSS, JS, assets
- Step 7: Rendering — Browser parses, builds DOM, applies CSS, executes JS
Interactive: Page Load Timeline
Hands-On: Using Browser DevTools
Open your browser's DevTools (F12 or Cmd+Option+I) and navigate to the Network tab.
Exercise: Inspect a Request
- Open DevTools → Network tab
- Visit any website
- Click on the first HTML document request
- Explore: Headers tab, Preview tab, Response tab, Timing tab
Exercise: DNS Timing
- Look at the timing breakdown in the Network tab
- Identify: DNS Lookup, Initial Connection, SSL, Waiting (TTFB), Content Download