Browsers DNS and HTTP: The Request Lifecycle
Follow a URL from the address bar through DNS resolution, TCP connection, HTTP request, and server response back to the browser.
Browsers DNS and HTTP: The Request Lifecycle is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Happens When You Type a URL?
Every time you visit a website, your browser kicks off a precise sequence of steps. Understanding this sequence makes you a better developer — you know where things can go wrong and how to speed them up.
Step 1 — DNS Resolution
DNS (Domain Name System) is the phone book of the internet. Your browser asks a DNS resolver: "What IP address is behind example.com?". The resolver checks caches and, if needed, queries authoritative name servers.
# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NSStep 2 — TCP Handshake
Once the IP is known, the browser opens a TCP connection using the three-way handshake: SYN → SYN-ACK → ACK. For HTTPS this is followed by a TLS handshake that negotiates encryption.
Step 3 — The HTTP Request
The browser sends an HTTP request over the TCP connection. It includes a method (GET, POST…), the path (/index.html), HTTP version, and headers like Host and Accept.
GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0Step 4 — The HTTP Response
The server processes the request and sends back a response: a status code (200 OK, 404 Not Found…), response headers (Content-Type, Cache-Control), and the body (HTML, JSON, image bytes).
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
<!DOCTYPE html>...HTTP/1.1 vs HTTP/2 vs HTTP/3
HTTP/1.1 sends one request per connection. HTTP/2 multiplexes many requests over one connection. HTTP/3 uses QUIC (UDP-based) for lower latency, especially on lossy mobile networks.
Status Codes You Must Know
2xx = success (200 OK, 201 Created). 3xx = redirect (301 Moved Permanently, 304 Not Modified). 4xx = client error (400, 401, 403, 404). 5xx = server error (500, 502, 503).
HTTPS and TLS
HTTPS wraps HTTP inside TLS (Transport Layer Security). TLS provides: encryption so traffic can't be read, authentication via certificates (you're really talking to example.com), and integrity so data isn't tampered with.
Caching: Speed Up Repeat Visits
Responses can include Cache-Control: max-age=86400 so the browser reuses the cached copy for a day. ETag and Last-Modified headers let the browser validate whether the cached version is still fresh.
Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMTCookies and Sessions
Servers set cookies with the Set-Cookie header. The browser sends them back automatically with every request to the same domain. Sessions are usually a cookie holding a session ID that the server maps to user data.
CDN — Content Delivery Networks
A CDN stores copies of your assets in data centres worldwide. Users download from the nearest node, cutting latency. Cloudflare, Fastly, and AWS CloudFront are popular CDNs used by most large websites.
Quick Check
Which HTTP method is used to request a webpage from a server?
Recap: The Full Request Lifecycle
URL entered → DNS resolves domain to IP → TCP (+ TLS) connection established → Browser sends HTTP request → Server responds with status + headers + body → Browser renders the response. Each step is observable in the Network panel of DevTools.
Frequently asked questions
Is the “Browsers DNS and HTTP: The Request Lifecycle” lesson free?
Yes — the full text of “Browsers DNS and HTTP: The Request Lifecycle” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Browsers DNS and HTTP: The Request Lifecycle”?
Follow a URL from the address bar through DNS resolution, TCP connection, HTTP request, and server response back to the browser. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Browsers DNS and HTTP: The Request Lifecycle” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Browsers DNS and HTTP: The Request Lifecycle
- HTML CSS and JavaScript: Each Layer's Job
- How a Page Renders: Parsing DOM CSSOM Layout Paint
- Developer Tools: Opening and Using DevTools