Module 03 / 20 · Phase A — Request & Response · 45 min

HTTP, HTTPS
& the hidden handshake.

The protocol behind 90% of the internet. You've spoken it your whole life without realizing — and underneath, there's a careful little ceremony happening every time you load a page. Time to read the script.

// What you'll know by the end

  • Read raw HTTP requests and responses
  • The five methods and what they each mean
  • Status codes — and what they're really saying
  • What the "S" in HTTPS is actually doing
§ 01 — The opening reveal

HTTP is
just text.

Most people think HTTP is some elaborate binary protocol — magic happening on the wire that only computers understand. It isn't. HTTP is one of the most readable things in computing: literal ASCII text sent over a TCP connection. If you opened a wiretap and looked at what your browser sends, you'd see something like this.

// CAPTURED ON WIRE · loading systemdesigntutorial.com GET /courses/beginner HTTP/2 Host: systemdesigntutorial.com User-Agent: Mozilla/5.0 (Macintosh; Intel) Accept: text/html,application/xhtml+xml Accept-Language: en-US,en;q=0.9 Accept-Encoding: gzip, br Cookie: session=eyJhbGc... Connection: keep-alive (no body for GET requests)

That's it. That's the entire request your browser just sent to load a page. A verb, a path, some headers as key-value pairs, a blank line — done. The server reads that text, does some work, and writes back a similar block of text containing the page. HTTP is text. Once you internalize that, half of "backend" stops being mysterious.

§ 02 — Anatomy of the conversation

Every HTTP exchange
has two halves.

The client sends a request. The server sends a response. Both have the same shape: a one-line summary, a block of headers, a blank line, and (sometimes) a body. Learn this skeleton and you can read any HTTP traffic in the world.

// THE REQUEST

START LINE POST /api/login HTTP/2
HEADERS Host: systemdesigntutorial.com
Content-Type: application/json
Content-Length: 52
Authorization: Bearer eyJhbGc...
BODY { "email": "soms@example.com", "password": "•••" }

// THE RESPONSE

STATUS LINE HTTP/2 200 OK
HEADERS Content-Type: application/json
Set-Cookie: session=abc123; HttpOnly; Secure
Cache-Control: no-store
BODY { "user": { "id": 42, "name": "Soms" }, "token": "..." }
Start line. Headers. Blank line. Body.
That's every HTTP message, forever.

The start line says what you want (request) or what happened (response). Headers are metadata — who's talking, what format, what encoding, what authorization. The body is the actual payload — JSON, HTML, an image, a file. Many requests have no body (a GET asking for a page). Many responses have huge bodies (an HTML document). Same shape either way.

You'll see HTTP/1.1, HTTP/2, and HTTP/3 on those start lines. The underlying ceremony of methods, headers, and bodies is the same across all three — the differences are about how the bytes are framed and multiplexed on the wire. For now, ignore the version number; the rules don't change.

§ 03 — The five methods · interactive

Five verbs.
One complete vocabulary.

HTTP has many methods, but in practice you'll use five. Each one tells the server what kind of action you want. Click any card to expand — pay attention to the traits at the bottom (safe, idempotent, has body). Those distinctions matter when things go wrong.

GET

Fetch something

// the reader

Ask the server to return a resource. Should never modify anything. The most common HTTP method by far — every page load is a flurry of GETs.

Mental model: "show me." Used for loading pages, fetching API data, downloading files. Cacheable, repeatable, never has a body in the request. If a GET changes server state, that's a bug.
✓ safe ✓ idempotent no body cacheable
click to expand
POST

Create something

// the maker

Send data to the server to create a new resource — a comment, a transaction, a user. Repeating a POST usually creates duplicates, so handle it carefully.

Mental model: "do this thing." Used for form submissions, creating records, processing payments, sending messages. Has a body. Not safe, not idempotent — repeating it does it again.
✗ not safe ✗ not idempotent has body not cacheable
click to expand
PUT

Replace something

// the replacer

Send a complete resource to a specific URL — replacing whatever was there. Used when you know the exact identity of the thing you're writing.

Mental model: "set this thing to this." PUT /users/42 says "user 42 should now look like this." Repeating it gives the same result — that's idempotent. Safe to retry on network failures.
✗ not safe ✓ idempotent has body not cacheable
click to expand
DELETE

Remove something

// the eraser

Ask the server to delete a resource at a specific URL. Sounds dramatic; it's just like any other method, just with destructive intent.

Mental model: "make this thing not exist." Idempotent because deleting twice has the same effect as deleting once (it's already gone). Often returns 204 No Content on success — nothing to send back.
✗ not safe ✓ idempotent no body not cacheable
click to expand
PATCH

Modify something

// the surgeon

Like PUT, but you only send the fields you want to change. The diff, not the whole document. Useful when the resource is big and you're tweaking a small thing.

Mental model: "change just this part." PATCH /users/42 { "email": "new@x.com" } updates only the email. Not strictly idempotent in all cases (depends on payload), so use with care.
✗ not safe ~ usually idempotent has body not cacheable
click to expand
+ MORE

The honorable mentions

// less common

HEAD (like GET but no body — for checking if a resource exists). OPTIONS (asks the server what's allowed — used for CORS preflights). TRACE and CONNECT are even rarer.

You'll meet these in the wild: CORS preflights send OPTIONS before any cross-origin POST. Health checks sometimes use HEAD. CONNECT is what a browser sends when going through an HTTPS proxy. The five methods above cover ~99% of real traffic.
HEADOPTIONSTRACECONNECT
click to expand

The key concepts to walk away with: safe means it doesn't change anything on the server. Idempotent means doing it twice has the same effect as doing it once. These two properties decide whether it's OK to retry a request after a network blip — which is one of the most common decisions in real backend code.

§ 04 — The wire inspector · interactive lab

Now read the wire,
scenario by scenario.

Pick a scenario below and you'll see the exact bytes that travel between client and server. Click any line in the request or response to get an explanation of what it does and why it's there. This is the single most valuable habit you can build as a backend engineer — actually reading the protocol.

HTTP_WIRE_INSPECTOR.SIM // m.03 lab
→ REQUEST · client to server 242 bytes
← RESPONSE · server to client 1.2 KB · 84ms
// CLICK ANY LINE TO LEARN ABOUT IT
Read the wire

Each line in HTTP has a job. Click a line above to see what it does, why it's there, and what would happen if you removed it. Try the status line — it tells you everything in 3 characters.

§ 05 — The S in HTTPS · interactive

A tiny ceremony
before every secure request.

HTTP is plain text. Anyone with the right tools — your coffee shop's WiFi, your ISP, a router operator — can read it. HTTPS solves this with one elegant trick: before any actual HTTP is exchanged, the client and server perform a handshake to agree on a shared secret. After the handshake, everything is encrypted. Press Play handshake below to watch it.

TLS_HANDSHAKE.SIM // hidden ceremony
CLIENT browser SERVER systemdesigntutorial.com 🔒 ENCRYPTED CHANNEL
STEP 1 / 5
ClientHello

The browser opens the conversation by sending a "ClientHello" — basically a list of: which TLS versions it supports, which encryption ciphers it understands, and a random number. It's the browser saying "here's everything I can do — pick something."

Notice what just happened: at no point did the actual HTTP request go out in plain text. Before the browser even sent GET /, the two sides verified each other's identity (via certificates), agreed on encryption, and established a shared secret. The whole HTTP exchange afterwards rides through an encrypted tunnel. That's all "the S" really is. No magic — just a polite ceremony that happens to be cryptographically rock-solid.

§ 06 — Eight words for this terrain

Vocabulary,
extended again.

Each one of these will appear in interviews, design docs, and incident reports for the rest of your career. Burn them in.

Header
/ˈhɛdə/
A key-value pair of metadata in an HTTP message. Content-Type, Authorization, Cookie — all headers. Cheap to add; powerful in effect.
Body
/ˈbɒdi/
The actual payload of the message — JSON, HTML, an image, anything. GET requests usually have no body; POST/PUT/PATCH usually do.
Status Code
/ˈsteɪtəs koʊd/
Three digits that summarize the response. 2xx = ok, 3xx = redirect, 4xx = your fault, 5xx = server's fault. Memorize the ranges.
Idempotent
/ˌaɪdɛmˈpoʊtənt/
An operation you can repeat safely with the same result. PUT is idempotent; POST is not. Crucial for deciding when to retry a failed request.
MIME Type
/maɪm taɪp/
The format of the body — application/json, text/html, image/png. Tells the receiver how to parse what came in.
TLS
/tiː ɛl ɛs/
"Transport Layer Security." The cryptographic layer that turns HTTP into HTTPS. Used to be called SSL — the names get used interchangeably, but TLS is current.
Cookie
/ˈkʊki/
A small piece of data the server tells the browser to store and resend on future requests. The reason your login persists across page loads.
CORS
/kɔːz/
"Cross-Origin Resource Sharing." Rules about which websites are allowed to call which APIs from a browser. Source of 90% of confused frontend questions.
§ 07 — Knowledge check

Five questions.
Read every line.

Locking in what you read on the wire. Tap an answer; explanation appears instantly.

QUESTION 1 OF 5
Loading question...
Score: 0 / 5
5 / 5

Fluent.

You read HTTP now. Most engineers never quite get there.

§ 08 — The recap

Three ideas to
carry forward.

You can now read what your browser is whispering. Use it.

i

HTTP is text, with rules

Start line, headers, blank line, body. Same shape for requests and responses. Read it like a letter, not a spell.

ii

Methods carry meaning

GET reads, POST creates, PUT replaces, DELETE removes, PATCH modifies. Idempotency tells you when it's safe to retry.

iii

HTTPS is HTTP in a sealed envelope

The "S" is a quick handshake before any data flies. Same protocol on top — just wrapped in a cryptographic tunnel.

↓ UP NEXT

M.04 — REST APIs
from First Principles

You speak HTTP. Now let's see what happens when teams agree to use it consistently. REST is a discipline, not a technology — and most "REST APIs" out there break the rules. Time to learn which ones matter.

Continue to Module 04 →