Learning on Web Dev Open is free for all.

Take It Apart > What the browser actually doesHTTP has no secrets
Phase 01What the browser actually does32 of 434

HTTP has no secrets

A request is a method, a path, some headers and maybe a body. Once you have read one in the raw, the whole protocol stops being a black box.

Concept17 minAI pair

GET asks for something and should change nothing. POST sends something and is allowed to change the world. PUT, PATCH and DELETE are conventions on top of the same envelope. The reason the distinction matters is not etiquette: browsers, proxies and caches treat GET differently from everything else. They will retry it, prefetch it, and store it without asking you. A GET that deletes a record will eventually be deleted twice by a link prefetcher, and the bug report will make no sense.

Status codes come in families and the family is most of the message. 2xx worked, 3xx go somewhere else, 4xx you asked wrong, 5xx the server broke. Two are useful to know precisely. 304 Not Modified means your cached copy is still good and no body is coming, it is the cheapest useful response on the web. And 404 versus 410 is the difference between "not here" and "never coming back", which is a promise search engines actually act on.

Headers are where the interesting behaviour lives, and none of them appear in your source code, which is exactly why beginners never think to look. Content-Type decides how the bytes are interpreted, and getting it wrong is why a page sometimes renders as plain text. Content-Encoding decides whether you shipped 300KB or 60KB of the same file. Cache-Control decides whether the second visit costs anything at all.

Play with the exchange below until the numbers stop surprising you. Turn on gzip and watch Content-Length fall by roughly eighty per cent, that is not a tuning tweak, that is four fifths of your transfer. Turn on If-None-Match and watch the response become a few hundred bytes with no body, because the server has confirmed nothing changed. Switch the method to HEAD and watch the body vanish while the headers stay, which is how monitoring tools check a site is alive without downloading it.

The whole protocol, both directions

200 OK
Request, out183 B
GET /pricing HTTP/1.1
Host: webdevopen.dev
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)
Accept: text/html,application/xhtml+xml,*/*;q=0.8
Connection: keep-alive
 
no body
Response: back48,153 B
HTTP/1.1 200 OK
Date: Sat, 13 Sep 2026 10:14:22 GMT
Server: nginx
Content-Type: text/html; charset=utf-8
Content-Length: 47930
ETag: "9f4c-6301a8b2"
Cache-Control: public, max-age=300
Age: 213
X-Cache: HIT, edge
 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pricing: WebDevOpen</title>
<link rel="stylesheet" href="/site.css">
</head>
<body>
<h1>Pricing</h1>
… 47,930 bytes in total
Bytes over the wire48,336183 out, 48,153 backa plain GET, nothing saved yet

Hover or tab through any line in either pane to find out what it does. Then change the request and watch which lines in the response appear, disappear, or change their number.

Status codesIt is somewhere else, or you already have it.

304 Not Modified : Nothing was sent. Your copy is still correct. Headers only, no body, a few hundred bytes instead of fifty thousand, and the whole reason ETags exist.

Change the request on the left; the response on the right really changes, including the bytes on the wire.

The reason to read these raw rather than through a library is that every abstraction you will use for the rest of your career, fetch, axios, a framework data loader, an API client someone generated for you, is putting exactly these bytes on the wire. When one of them behaves strangely, the debugging move is always the same: look at the request and the response. When something behaves strangely, start with the request and response before debugging the abstraction on top.

Worth reading

You should now be able to

  • Read a raw request and response by eye
  • Explain what a status code in each family means
  • Name three headers that change what the browser does
  • Predict the byte cost of a request before you make it
Ask the community

Loading…