Library
00/07 · ~36 min
GUIDEDECK · how the web actually moves bytes

Networking —
a packet's journey
from your app to the wire.

A 36-minute working session on what really happens when you click a link — the layers, IP and TCP vs UDP, DNS, TLS, the HTTP versions, the boxes in the middle (load balancers, proxies, CDNs), and the tools to debug it all when it breaks.

~36 MINBEGINNER → INTERMEDIATEVENDOR-NEUTRAL
SCROLL
01 · The mental model 4 min

The network is built in
layers — each one hides the next.

Nobody designed the internet as one giant program. It is a stack of layers, each solving one job and handing the rest down. Your app says "send this text"; it never worries about voltage on a cable. Understanding the stack is the single best map for debugging: when something breaks, you can ask which layer.

Protocol an agreed set of rulestwo computers follow so they can understand each other — like both sides of a phone call agreeing to speak the same language, take turns, and say "goodbye" before hanging up. A layer is one job in that conversation (move bits, find a host, deliver reliably, format the message), and each layer only talks to the ones directly above and below it.

The TCP/IP model — four practical layers

  • Link — moves bits between two directly-connected machines (Wi-Fi, Ethernet). Uses MAC addresses.
  • Internet — gets a packet across many networks to the right machine. This is IP.
  • Transport — delivers data to the right program on that machine, reliably or not. This is TCP / UDP.
  • Application — the meaning: HTTP, DNS, email. What your code actually speaks.

You may also hear of the OSI 7-layer model— an older teaching diagram. People still say "a Layer 4 load balancer" (transport) or "Layer 7" (application); those numbers come from OSI.

Application HTTP · DNS · TLS the meaning Transport TCP · UDP · ports to the right program Internet IP · routing to the right machine Link Wi-Fi · Ethernet · MAC bits on the wire down the stack to send

To send, your data travels down the stack; on the other machine it travels back up.

Link frame IP packet TCP segment your HTTP data MAC IP port each layer adds its own HEADER (an address label)

Encapsulation: each layer wraps the one above in its own header — like putting a letter in an envelope, in a mailbag, on a truck.

Read the schema — encapsulation

  • Your HTTP data is the letter. TCP adds a header with the port (which program), IP adds the machine address, Link adds the next-hop hardware address.
  • Routers in the middle only peel back the outer layers they need — they read the IP address, not your data.
  • The receiver unwraps in reverse and hands the letter up to its app. Same envelopes, opened in the opposite order.

Like mailing a parcel: you write the note, the courier adds a shipping label, the depot adds a route — each layer trusts the one below to deliver.

02 · Addresses, ports & transport 6 min

IP finds the machine; ports find the program.

An IP address is like a building's street address; a port is the apartment number inside it. Together they pinpoint one running program. On top of that, you pick a transport: TCP when every byte must arrive in order, UDP when speed beats perfection.

IP address the numeric address of a machine on a network. IPv4 looks like 93.184.216.34 (about 4.3 billion possible — now scarce, so we share them with NAT). IPv6 looks like 2606:2800:220:1::1 and has effectively unlimited room. A port is a number from 0 to 65535 that says which program on the machine should get the data.
:80

HTTP — plain web traffic.

:443

HTTPS — encrypted web traffic.

:53

DNS — name lookups.

:22

SSH — remote shell.

TCP — the reliable phone call

Before any data flows, TCP does a three-way handshake to agree to talk. Then it numbers every chunk, waits for acknowledgements, re-sends anything lost, and slows down when the network is congested — so your bytes arrive complete and in order.

  • SYN— client: "can we talk?"
  • SYN-ACK— server: "yes, can you hear me?"
  • ACK— client: "yes — let's go."
client server SYN SYN-ACK ACK · data flows

Three messages set up the connection — one full round trip before the first byte of real data.

TCP — reliable & ordered
// Used by: web (HTTP), email, file transfer // + delivery guaranteed, in order, no dupes // + flow & congestion control built in - handshake + acks add latency & overhead // "Resend page 3 — it never arrived."
UDP — fast & lean
// Used by: video calls, gaming, DNS, QUIC // + tiny overhead, no setup, no waiting // + you control retries (or skip them) - packets can drop, arrive late or out of order // "Lost a frame? Skip it — keep the call live."

Rule of thumb: choose TCP when missing data corrupts the result (a web page, a bank transfer). Choose UDP when stale data is worthless anyway and you would rather move on than wait (a live voice packet from two seconds ago helps no one).

03 · Names into addresses 5 min

DNS is the internet's
phone book.

You remember example.com; machines route by numbers like 93.184.216.34. DNS is the lookup service that translates one into the other — and because that lookup happens before every new connection, it is aggressively cached so it does not become the slowest step.

DNS the Domain Name System — turns a human-friendly name (example.com) into the IP address a packet needs. Think of saving a contact by name in your phone: you tap "Mum", the phone dials the number. DNS does the same lookup for every domain you visit.
resolver (your ISP) root · "." TLD · ".com" authoritative 1 ask root 2 ask .com 3 get the IP

The resolver walks the hierarchy: root → .com→ the domain's own server, then hands you the address.

How a lookup resolves

  • Your machine asks a recursive resolver (run by your ISP or a public one like 1.1.1.1 / 8.8.8.8).
  • If it does not already know, it asks the root servers, which point it to the .com(TLD) servers, which point it to the domain's authoritative server.
  • That server returns the A record (IPv4) or AAAA record (IPv6). The resolver caches it and replies to you.

Records you'll meet — and why caching matters

A / AAAA

Name → IP

A maps a name to an IPv4 address; AAAA to IPv6. The core lookup.

CNAME

Alias

Points one name at another (www example.com). One canonical target, many aliases.

MX

Mail route

Says which servers receive email for the domain. TXT holds free-form text (SPF, domain verification).

TTL

Cache lifetime

Time To Live, in seconds — how long a record may be cached before it must be looked up fresh.

Why DNS caches everywhere

  • A lookup that walked the full hierarchy every time would add latency to every first request. Caching keeps the common case to roughly zero round trips.
  • Results are cached at many layers — your browser, your OS, your resolver — each honoring the record's TTL.
  • The trade-off: after you change a record, old answers can linger until their TTL expires. Lower the TTL before a planned migration so changes propagate fast.
# ask the public resolver for the A record dig example.com A +short 93.184.216.34 # the +noall +answer view shows the TTL dig example.com example.com. 3600 IN A 93.184.216.34 # ^^^^ TTL: cache for 3600s (1h)
04 · Encryption & trust 6 min

HTTPS is just HTTP
inside a TLS tunnel.

The S in HTTPS is TLS doing three jobs at once: it encrypts the traffic so eavesdroppers see gibberish, checks integrity so nothing was tampered with in transit, and proves you are really talking to the right server and not an impostor.

TLS Transport Layer Security (the modern successor to SSL) — wraps an ordinary connection in encryption. TLS 1.3 is the current version; it is faster and drops the old insecure options. A certificate is a digital ID card for a domain, signed by a trusted Certificate Authority (CA) — that signature is what stops anyone from impersonating a site.
client server ClientHello ServerHello + cert verify · key exchange encrypted application data 🔒

TLS 1.3 sets up the secure channel in a single round trip, then every byte after is encrypted.

The handshake, step by step

  • ClientHello— "here are the cipher versions I support, and a random number."
  • ServerHello + certificate — the server picks a cipher and sends its certificate (its signed public key).
  • Verify — the client checks the certificate chains up to a CA it already trusts. If it does not, you get the scary browser warning.
  • Key exchange — both sides derive a shared secret key (via ECDHE) and switch to fast symmetric encryption.
Confidentiality

No eavesdropping

On open Wi-Fi, anyone can capture packets. With TLS they capture only ciphertext — useless without the key.

Integrity

No tampering

Each message carries a tag so any change in flight (an injected ad, a flipped bit) is detected and rejected.

Authentication

Right server

The certificate proves the server owns the domain — so you are not handing your password to an impostor.

Good to know: the handshake uses slow asymmetric crypto only long enough to agree on a shared key, then switches to fast symmetric crypto for the bulk data — the best of both. Free, automated certificates (e.g. Let's Encrypt) are why HTTPS is now the default across the web.

05 · Why each version got faster 6 min

HTTP/1.1 → HTTP/2 → HTTP/3:
killing the waiting.

HTTP is the language of the web — the same verbs (GET, POST) the whole way through. What changed across versions is how the bytes are carried, and each step removed a source of waiting.

Head-of-line blocking when one stuck item holds up everything behind it — like a single checkout lane where the person at the front can't find their wallet and the whole queue waits. Every HTTP upgrade is, at heart, an attempt to remove a version of this queue.
HTTP/1.1
one TCP connection req 1 req 2 req 3 wait… one at a time

One request finishes before the next starts. Browsers opened ~6 connections to fake parallelism.

HTTP/2
one TCP connection stream 1 stream 2 stream 3 all in parallel, interleaved but 1 lost packet stalls the whole TCP pipe

Many streams share one connection (multiplexing) — but a TCP loss still stalls them all.

HTTP/3
QUIC over UDP TLS 1.3 built in stream 1 stream 2 ✕ stream 3 a lost packet stalls only its own stream ✓ + faster setup, conn. migration

Streams are independent, so one loss can't block the others — and setup is a single combined handshake.

HTTP/1.1 — text, one request per connection

Human-readable text requests over a TCP connection that stays open (keep-alive). But a connection handles one request at a time, so a slow response blocks the queue. The workaround was opening several connections in parallel — wasteful, but it worked for two decades.

Strength
Simple, universal, trivially debuggable — you can literally type it.
Pain
One-at-a-time per connection; no header compression; latency-bound.

HTTP/2 — binary framing & multiplexing

Switches to a compact binary format and multiplexes many requests as interleaved streams over a single connection, plus header compression (HPACK). The catch: everything still rides on one TCP connection, so a single lost packet stalls all streams — TCP-level head-of-line blocking.

Strength
One connection, many parallel streams; smaller headers; big real-world speedup.
Pain
TCP loss stalls every stream; server push proved unhelpful and is now deprecated.

HTTP/3 — HTTP over QUIC over UDP

Drops TCP for QUIC, a transport built on UDP that keeps streams independent — a lost packet only stalls its own stream. TLS 1.3 is baked in, so the transport and encryption handshakes combine into one (often a single round trip), and a connection can survive a network change (Wi-Fi → cellular) without reconnecting.

Strength
No transport-level HOL blocking; faster setup; seamless connection migration on mobile.
Pain
UDP is sometimes throttled or blocked; more CPU per packet; newer, so harder to inspect.
06 · The boxes in the middle 5 min

Between client and server sit
helpers that scale and protect it.

Real systems rarely have one client talking to one server. In between sit a few standard middlemen — a load balancer to spread traffic, proxies to stand in front or behind, and a CDN to serve content from near the user. Same building blocks, different jobs.

clients CDN edge cache load balancer server A server B server C

Cached static content is served at the CDN edge; everything else flows to a load balancer that spreads it across servers.

Who does what

  • Load balancer — spreads incoming requests across many identical servers (round-robin, least-connections), and stops sending to any that fail a health check.
  • Reverse proxy — a single front door for your servers: handles TLS, caching, routing, rate limits. (A forward proxy sits in front of clients instead.)
  • CDN — a global network of caches near users, so a visitor in Tokyo loads from Tokyo, not from your one server in Virginia.
L4 vs L7 load balancing — an L4 balancer routes by IP and port only (fast, protocol-blind); an L7balancer understands HTTP, so it can route by URL path, host, or cookie — at a little more cost. The layer numbers come from the OSI model in Part 01.

CDN / edge vendors — pick by fit

Cloudflare

Breadth & security

Pro — huge network, generous free tier, integrated DDoS/WAF and edge compute (Workers).

Con — opinionated platform; deep config and edge runtime have a learning curve.

Fastly

Control & instant purge

Pro — programmable edge (VCL/Compute) and near-instant cache purges; loved for fine control.

Con — pricier and more hands-on; smaller free footprint, steeper for beginners.

CloudFront

AWS-native

Pro — tight integration with S3, ALB and the rest of AWS; one bill, one IAM.

Con — config is verbose; best value only if you are already all-in on AWS.

How to choose: already on AWS → CloudFront; want the most out-of-the-box security and a free start → Cloudflare; need surgical caching control and instant purges → Fastly.

07 · Debugging & recap 4 min

When it breaks, ask
which layer — then reach for a tool.

The layered model pays off here: each tool inspects a specific layer. Work top-down or bottom-up, but isolate the layer first — that turns "the site is down" into a question you can actually answer.

The network toolbox — when to use which

dig / nslookup — is it a name problem?

# resolve a name, see the answer + TTL dig example.com A +short # ask a specific resolver (Cloudflare) dig @1.1.1.1 example.com # trace the full delegation chain dig example.com +trace

Start here when a name won't resolve or points somewhere stale. dig shows the record, its TTL, and which server answered. nslookup is the simpler, cross-platform cousin.

Pro
Pinpoints DNS issues and propagation in seconds.
Con
Only the name layer — says nothing about whether the server is healthy.

curl — is the HTTP/TLS layer healthy?

# headers + status, follow redirects curl -sIL https://example.com # show the timing + protocol used curl -s -o /dev/null -w "%{http_version} %{time_total}s\n" \ https://example.com # inspect the TLS handshake curl -v https://example.com 2>&1 | grep -i TLS

The workhorse for the application layer: status codes, headers, redirects, TLS details, even the HTTP version negotiated. If dig is fine but the page is not, curl is your next stop.

Pro
Sees status, headers, TLS and timing — scriptable everywhere.
Con
Tests one request; not a load or path tool.

traceroute / mtr — where on the path is it dying?

# list every hop to the host traceroute example.com # mtr = traceroute + ping, live & continuous mtr example.com # watch the % loss column per hop

Maps the route packets take and where latency or loss appears. mtrcombines traceroute with a running ping so you can spot a flaky hop over time — ideal for "slow only sometimes".

Pro
Localizes latency/loss to a specific hop or network.
Con
Many routers de-prioritize the probes, so a scary hop can be a red herring.

tcpdump / Wireshark — show me the actual packets

# capture port-443 traffic to a file sudo tcpdump -i any port 443 -w cap.pcap # then open cap.pcap in Wireshark # to inspect the handshake packet-by-packet

The deepest view: capture raw packets and read them. tcpdump grabs them on the command line; Wiresharkgives a rich GUI to dissect handshakes, retransmits and resets. The tool of last resort when higher-level tools can't explain it.

Pro
Ground truth — nothing hides at the packet level.
Con
Verbose and overkill for simple issues; encrypted payloads stay opaque without keys.

Top-down triage

  • 1 · Name? dig — does the domain resolve to the IP you expect?
  • 2 · Reachable? traceroute/mtr — do packets reach the host, and where do they stall?
  • 3 · App/TLS? curl -v — right status, headers, certificate, HTTP version?
  • 4 · Still stuck? tcpdump + Wireshark — read the packets themselves.
1Think in layers. Link → Internet → Transport → Application. Every problem lives at one of them.
2IP finds the machine, the port finds the program.TCP for reliable & ordered; UDP for fast & lossy.
3DNS is a cached phone book. Names → IPs, with TTLs deciding how long answers stick.
4HTTPS = HTTP in a TLS tunnel — confidentiality, integrity, authentication, in one handshake.
5Every HTTP version killed a queue; the middle boxes (LB, proxy, CDN) scale and shield the origin.
Knowledge check

Did it stick?

Five quick questions on layers, transport, DNS, TLS, and the HTTP versions — instant feedback, no sign-in.

Rate this deck
be the first

Navigate with ← → or scroll · back to library