This is an early stop on my roadmap, and I picked it on purpose. You can build things for a while without knowing what happens when someone opens your site, but the day something breaks between “I typed the address” and “the page showed up”, you are lost without this. It takes half a second and involves four separate systems. Here is what they are.
Type a web address, and a delivery starts
Before the jargon, hold one picture in your head: ordering food for delivery.
You (the browser) want something from a restaurant (the server). You do not know the restaurant’s exact street address, so you look it up. A driver carries your order there and brings the food back. If the kitchen is fine it sends the meal, if the dish is off the menu it sends an apology instead. Everything below is just the technical name for a step in that delivery.
A quick word on the two roles, because they come up constantly:
- A client is the thing asking. Your browser (Chrome, Safari, Firefox) is a client.
- A server is the thing answering. It is just a computer, always on, that holds the website and hands out copies when asked.
The four steps between Enter and the page
When you type an address and press Enter, four things happen in order. None of them is complicated on its own.
flowchart LR U[You press Enter] --> D[DNS: find the address] D --> T[TCP: open a connection] T --> H[HTTP: ask, and get an answer] H --> R[Browser: draw the page]
1. DNS finds the real address. You typed a name like example.com, but computers find
each other by number, an IP address (a string like 93.184.216.34). DNS, the Domain Name
System, is the phone book that turns the name into the number. Your browser asks a DNS server
“what is the number for this name”, and gets it back.
2. TCP opens a connection. Now that your browser knows the number, it has to open a line to that server. TCP (Transmission Control Protocol) is the agreement both sides follow so data arrives complete and in order. It opens with a quick back-and-forth nicknamed the “three-way handshake”, basically “can you hear me”, “yes, can you hear me”, “yes”. The line is now open.
NOTE
If the address starts with https (it should), one more step slips in here: TLS. It scrambles
everything sent over that line so nobody in between can read it. That “s” and the little
padlock are the difference between a postcard anyone can read and a sealed envelope.
3. HTTP asks, and the server answers. Over that open line, your browser sends an HTTP request, which is just a politely formatted “please send me the page at this path”. The server does its work and sends back an HTTP response: the page, plus a status code, a three-digit number that says how it went.
| Status | Means | In plain words |
|---|---|---|
| 200 | OK | ”Here is your page.” |
| 301 / 302 | Redirect | ”That moved, look over here instead.” |
| 404 | Not Found | ”No such page.” |
| 500 | Server Error | ”Something broke on my end.” |
4. The browser draws the page. The server usually sends HTML first, the bare skeleton of the page. The browser reads it and notices it needs more things: the CSS for how it looks, the JavaScript for how it behaves, the images. It fires off more requests for each, then assembles everything into the page you finally see. All four steps together take a few hundred milliseconds.
Git and GitHub, the habit you start on day one
One more thing belongs at this first stop, and it is not about the browser. It is how you keep your own work safe from the very beginning.
Git is a tool that saves snapshots of your project. Every time you finish a working bit, you “commit”, and Git remembers exactly how everything looked at that moment. Break something an hour later? You can jump back to a good snapshot. GitHub is a website that stores those snapshots online, so they survive your laptop dying and other people can see them.
TIP
Learn just two moves first: save a snapshot (commit) and go back to one. That covers most
of what a solo beginner needs, and it turns “I broke everything” from a disaster into an undo.
Here are the names from this stop, and the free tools for them, so the words stop being scary:
| Thing | What it is | Where you meet it |
|---|---|---|
| Browser | The client that asks for pages | Chrome, Firefox, Safari (free) |
| DNS | Turns a name into a number | Runs automatically, nothing to install |
| HTTP / HTTPS | The request-and-answer language | Every address you visit |
| Git | Saves snapshots of your code | git, free and open-source |
| GitHub | Stores those snapshots online | github.com (free tier) |
Why this stop is not skippable
Vibe coding lets you build a page without knowing any of this, right up until it does not load. Then the difference between someone who ships and someone who is stuck is knowing which of the four steps failed: a wrong address is DNS, a 404 is the server saying the page is not there, a 500 is the server’s own code breaking. You cannot fix what you cannot locate, and this is the map that tells you where to look.
The web is not magic, it is a delivery with four steps and a good filing habit.
Sources
- MDN: How the web works for the client/server and request/response basics
- DesignGurus: What happens when you type a URL for the step-by-step DNS, TCP, HTTP, render order
- requestly: What is an HTTP request for the request and status-code detail