How the Web Works: Browsers, Servers, DNS & HTTP
What happens between typing a URL and seeing a page.
What you'll learn
- Describe the request/response cycle between a browser and a server
- Explain what DNS does
- Identify the parts of an HTTP request and response
Prerequisites
Explanation
When you type example.com into a browser, several distinct steps happen very quickly:
- DNS lookup. Computers address each other with numbers (IP addresses), not names. The Domain Name System (DNS) translates
example.cominto an IP address, the way a phone contact list translates a name into a number. - Connection. Your browser opens a connection to the server at that address, usually secured with TLS (the "s" in "https").
- HTTP request. The browser sends an HTTP request: a method (like
GETto fetch something, orPOSTto send data), a path (like/about), and headers (metadata like what content types the browser accepts). - Server processing. A server — just another program, often running far away in a data center — reads the request, does whatever work is needed (reading a file, querying a database), and builds a response.
- HTTP response. The server replies with a status code (like
200 OK,404 Not Found, or500 Server Error), headers, and a body — often HTML, JSON, or another file. - Rendering. The browser receives the response and, if it's HTML, builds the DOM and paints the page, potentially requesting more resources (CSS, JavaScript, images) along the way.
This request/response cycle is the foundation for everything from loading a page to calling an API from JavaScript (which you'll do later in the JavaScript track) — the mechanics are the same.
The request/response cycle
Browser → DNS lookup (name → IP address) → HTTP request to server → server processes request → HTTP response (status + headers + body) → browser renders the result.
Example
A page that describes an example request/response pair as readable text.
<!doctype html>
<html>
<body>
<h1>Example exchange</h1>
<p><strong>Request:</strong> GET /about HTTP/1.1</p>
<p><strong>Response:</strong> 200 OK, Content-Type: text/html</p>
</body>
</html>Guided exercise
Guided exercise
Add two paragraphs describing a request for a missing page: one line for the request method+path, one for the response status code and its meaning.
Checks: Mentions an HTTP method · Mentions status code 404
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Independent exercise
Independent exercise
Build a short 'How this page loaded' explainer with a numbered list (<ol>) of at least 4 steps, mentioning DNS, HTTP, and rendering at least once each.
Checks: At least 4 ordered steps · Mentions DNS · Mentions HTTP · plus 1 hidden check
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Common mistakes
- Thinking DNS transmits the actual page content — it only resolves a name to an address.
- Assuming every request returns HTML; APIs commonly return JSON instead (covered in the Git, APIs & SQL track).
- Confusing a 4xx (client error, like a typo'd URL) with a 5xx (server-side failure) status code.
Knowledge check
Takeaway
Loading any page is a request/response conversation: DNS finds an address, HTTP carries the message, and the browser renders what comes back.
Summary
Visiting a URL triggers a DNS lookup, an HTTP request to a server, an HTTP response with a status code and body, and finally browser rendering. The same request/response mechanics power APIs you'll call directly later.
References
Your notes
Notes save automatically.
Finished this lesson?
Mark it complete to track your progress and schedule a future review.
AI tutor
The optional AI tutor isn't enabled in this deployment. All lessons, exercises, quizzes, and search work fully without it.