🌐 What Happens When You Type a URL?
Every time you visit a website, an incredible chain of events unfolds in milliseconds. Before writing a single line of HTML or CSS, it helps to understand what's actually happening behind the scenes.
In this module, you'll learn about the key players — browsers, servers, DNS, and HTTP — and see how they work together to deliver web pages to your screen.
The Journey of a Web Request
You type a URL
→
DNS finds the IP
→
HTTP request sent
→
Server responds
→
Browser renders
🎯 By the end of this module, you will:
- Explain the roles of browsers and servers
- Break down the parts of a URL
- Understand how DNS translates domain names to IP addresses
- Describe the HTTP request/response cycle
- Read and interpret common HTTP status codes
- Use Chrome DevTools to inspect network traffic
🔗 Anatomy of a URL
A URL (Uniform Resource Locator) is the address of a resource on the web. Let's break one down:
https://www.example.com:443/products/shoes?color=red&size=42#reviews
Protocol
https://
Domain
www.example.com
Port
:443
Path
/products/shoes
Query
?color=red&size=42
Fragment
#reviews
| Part | Example | Purpose |
|---|---|---|
| Protocol | https:// |
The "language" for communication. HTTPS = encrypted. |
| Domain | www.example.com |
Human-readable name for the server. |
| Port | :443 |
Door number on the server. 80 = HTTP, 443 = HTTPS. |
| Path | /products/shoes |
Location of the resource on the server. |
| Query | ?color=red |
Extra parameters (filters, search terms, etc.). |
| Fragment | #reviews |
Jumps to a specific section on the page. |
Good to know:
The port is usually hidden — browsers use 80 for HTTP and 443 for HTTPS by default. The fragment (#) is never sent to the server — it's handled entirely by the browser.
🖥️ Client & Server Model
The web is built on a simple idea: a client (your browser) asks for something, and a server (a computer somewhere) sends it back.
Client–Server Communication
Client (Browser)
Chrome, Firefox, Safari…
Sends requests, renders HTML/CSS
Sends requests, renders HTML/CSS
HTTP Request
→
←
HTTP Response
Server
Stores files & data
Processes requests, sends responses
Processes requests, sends responses
🌐 What the Browser Does
- Sends HTTP requests to servers
- Receives HTML, CSS, JS, images
- Parses HTML into a DOM tree
- Applies CSS styles
- Executes JavaScript
- Renders the final visual page
🖥️ What the Server Does
- Listens for incoming requests
- Finds the requested resource
- Runs server-side code (if needed)
- Queries databases
- Sends back the response (HTML, JSON…)
- Includes a status code (200, 404…)
🔍 DNS: The Web's Phone Book
Computers communicate using IP addresses (like 93.184.216.34). But humans prefer names like example.com. DNS (Domain Name System) is the translator between the two.
DNS Resolution Steps
1
Browser checks its local cache
2
Asks the OS resolver
3
Queries the ISP's DNS server
4
Walks up to root → TLD → authoritative servers
✓
IP address 93.184.216.34 returned!
Analogy:
DNS is like a phone book. You look up "Pizza Palace" (domain name) and get their phone number (IP address). Then you can call them (connect to the server).
📡 HTTP: The Language of the Web
HTTP (HyperText Transfer Protocol) is the set of rules browsers and servers use to communicate. Every web page you visit involves at least one HTTP request and response.
📤 HTTP Request (what the browser sends)
📥 HTTP Response (what the server sends back)
Common HTTP Methods
GET
Retrieve data (load a page)
POST
Send data (submit a form)
PUT
Update existing data
DELETE
Remove data
HTTPS
= HTTP + encryption (TLS/SSL). The padlock icon 🔒 in your browser's address bar means the connection is encrypted. Always prefer HTTPS.
📊 HTTP Status Codes
Every HTTP response includes a status code — a 3-digit number telling the browser what happened. They're grouped by their first digit:
1xx — Informational
100 Continue2xx — Success ✅
200 OK — everything worked201 Created — new resource made3xx — Redirection ↪️
301 Moved Permanently304 Not Modified (use cache)4xx — Client Error ❌
400 Bad Request403 Forbidden404 Not Found — the classic!5xx — Server Error 💥
500 Internal Server Error503 Service Unavailable
Quick memory trick:
2xx = 😊 success, 3xx = 🔀 redirect, 4xx = 🤦 you messed up, 5xx = 🔥 server messed up.
🛠️ Chrome DevTools: Your X-Ray Vision
Chrome DevTools (and similar tools in Firefox/Safari) let you see everything happening under the hood. As a web developer, you'll use them constantly.
How to open DevTools:
Press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac). You can also right-click any element and choose "Inspect".
Key DevTools Tabs
Elements
Inspect and edit the live HTML & CSS of any page. See the DOM tree, modify styles in real-time, and debug layout issues.
Network
See every HTTP request the browser makes — HTML, CSS, JS, images, API calls. Inspect headers, status codes, and response times.
Console
Run JavaScript directly, see errors and warnings, and log messages from your code. Your debugging best friend.
Responsive Mode
Toggle device toolbar to test how your page looks on phones, tablets, and different screen sizes.
🚀 Try it yourself!
- Open DevTools right now (F12)
- Click the Network tab
- Reload this page (Ctrl+R)
- Watch all the HTTP requests appear! Click on any to see headers and response
📋 Module Summary
🔗
URL
The address to find any resource on the web (protocol + domain + path + query + fragment).
💻
Client (Browser)
Sends requests, receives HTML/CSS/JS, and renders the visual page you see.
🖥️
Server
Stores files and data, processes requests, and sends back responses.
🔍
DNS
Translates human-readable domain names into machine-readable IP addresses.
📡
HTTP/HTTPS
The protocol for communication. Methods (GET, POST…) + Status codes (200, 404…).
🛠️
DevTools
Your X-ray vision into any web page — inspect HTML, network traffic, and run JS.