HTTP101

Understand HTTP with Diagrams and Exercises

"I opened the Network tab in DevTools, but I have no idea where to look." "Someone asked me the difference between 404 and 403 and I froze." — Once you start building for the Web you touch HTTP every day, yet its contents are surprisingly hard to read. Rather than memorizing HTTP, this course builds one habit: HTTP is a correspondence written in plain text, and every time you read it you check the same three things — what was asked (method and path), how it went (status code), and the conditions and notes attached (headers). You grasp the structure with diagrams, then confirm it with short exercises and a simulator placed along each chapter.

Diagram → raw text → hand calculation → curl 43 questions in total Graded in-browser Saved to localStorage

Time

3–4 hours

Question count

43 questions

Format

7 chapters + short exercises + simulator

Cost

Free

This one round trip of text is all HTTP really is. Request and response both share the same skeleton: "first line + headers + blank line + body". Keep this skeleton in mind and every chapter that follows becomes easier to read.

What makes this course different

Short exercises right below the text

You solve 2–3 questions immediately after each section, which makes it hard to move on while only thinking you understood.

Read the raw text

Request lines, status lines, and headers are diagrammed first and then read as actual, unprocessed text. The output of curl and DevTools becomes the course material itself.

Cache decision simulator

With the Chapter 5 simulator, moving max-age, elapsed time, and the ETag toggle shows you with your own eyes how "does a request go out, is the response 200 or 304, and how much is transferred" changes.

Graded in-browser, no sign-up

All 43 questions are graded inside your browser, and results are stored only in your browser's localStorage. Nothing is sent to any server.

The view that runs through this course — read the correspondence as a three-part set

HTTP is a correspondence written in text, exchanged between browser and server. However intimidating an output looks, you can always read it by checking the same three points. As the chapters progress, your resolution on each point keeps increasing.

1. What was asked

Method and path — is it GET or POST, and against which URL. You read the request line. (Chapters 1–2)

2. How did it go

Status code — success, redirect, our mistake, or their failure. Three digits answer. (Chapter 3)

3. What conditions and notes are attached

Headers — in what format, how much, and under which conditions it was carried. The margin notes of the correspondence. (Chapters 4–5)

The watchword of this course: whenever DevTools or curl output threatens to overwhelm you, do not stop thinking — read: What was asked? How did it go? What conditions and notes are attached?

Chapter overview

1 Introduction — Reading the HTTP conversation between browser and server 5 questions. Sort out what happens after you type a URL (DNS → TCP → TLS → HTTP), and grasp the skeleton of raw request and response text and the meaning of stateless. 2 HTTP methods — The safe and idempotent promises 6 questions. Learn when to use GET, POST, PUT, DELETE, and HEAD, draw the line between the two promises — safe and idempotent — and become able to judge whether an update may be retried. 3 HTTP status codes — Reading the result in three digits 6 questions. Classify by the hundreds digit into five classes, and tell apart 301 vs 302 vs 308, 401 vs 403 vs 404, and 500 vs 502 vs 503 with reasons. 4 HTTP headers and content — What is carried, in what form 6 questions. Read Host, Content-Type, Content-Length, Accept, and Cookie as the margin notes of the correspondence, following through to mojibake and how sessions work. 5 HTTP caching — Never ship the same thing twice 6 questions. Hand-compute max-age to decide fresh vs stale, and confirm ETag, conditional GET, and the meaning of 304 with the simulator. 6 Observation — Reading real HTTP with curl and DevTools 6 questions. Learn the > and < of curl -v, the -I and -L options, and how to read the DevTools Network tab, as a standard observation procedure. 7 Final exercises — Reading HTTP conversations through cases 8 questions. Redirect loops, form resubmission, caching, mojibake — practical-style cases that use the knowledge of all chapters together.

Tips for studying

Proceed in the order text → the short exercises right below it. Solving immediately after reading sticks far better than saving questions for later.
Do not do the Chapter 5 calculation questions in your head — write out receive time, elapsed seconds, and max-age on paper. "How many seconds of freshness remain" becomes something your hands know.
Touch the Chapter 5 simulator both before and after solving its exercises. The relation between 304 and transfer size turns into physical intuition.
After the course, open the DevTools Network tab in your real browser and try the three-part reading on sites you visit every day. The same skeleton as the course material appears.
If you get stuck on a Chapter 7 case, go back to the corresponding chapter for just one or two passes. There is no need to redo everything.

Prerequisites before you start

Being at the stage of starting — or about to start — building websites or apps is enough. No server operations experience is required.
If you have ever seen a URL (something like https://example.com/path), you can start from Chapter 1.
The command examples in Chapter 6 are shown in copy-and-try form, but the course is written so you can read it through entirely on paper without running them.