FoundationsBeginner3h

How the internet works.

Clients, servers, packets, and the trip your request takes.

What is it?

The internet is a network of computers that pass small chunks of data called packets to each other. When you open a website, your browser (the client) asks another computer (the server) for a page. The server splits the page into packets and sends them back across many cables and wireless hops until your browser stitches them together.

Why it matters

Every bug, every slow load, every "it works on my machine" question eventually points back to this layer. You don't need to memorize protocols. You need a mental model of where your code runs, what it asks for, and what crosses the wire.

What to learn

  • Clients vs servers: who asks, who answers
  • IP addresses and ports: how machines find each other
  • TCP vs UDP at a high level: reliable vs fast
  • The request / response loop in plain English
  • What the network tab in devtools is actually showing you
  • Latency vs bandwidth: round trips matter more than pipe size

Common pitfall

Treating the network as zero-cost. Every fetch crosses a real wire with real latency. A page that does 40 small requests will always feel slower than one that does 4, even on fast connections. Count round trips before optimizing payload size.

Resources

Primary (free):

Practice

Open your browser's devtools, go to the Network tab, and load any website you visit often. Sort by Time. Pick the slowest request and explain why it's slow in one sentence. Then count how many round trips the page made before the first paint. Done when you can describe the waterfall to someone else without notes.

Outcomes

  • Explain a request / response cycle in your own words.
  • Read a Network panel waterfall and identify the slowest call.
  • Distinguish between latency and bandwidth out loud.
  • Estimate roughly how many round trips a page makes before it paints.
Back to Frontend roadmap