What Sits Between a URL and a Page
Between pressing Enter and seeing a page, seven things happen, and none of them are magic. Follow one request from your keyboard to a server on another continent and back, and see exactly which step you will be writing.
Between pressing Enter and seeing a page, seven things happen, and none of them are magic. Follow one request from your keyboard to a server on another continent and back, and see exactly which step you will be writing.
A website is files on somebody else's computer
That is not a simplification. A website is a folder, on a machine that is switched on, with a program listening for requests. Somebody asks for a file; the machine sends it.
The folder for a small site looks like a folder. There is nothing else in it.
my-site/ index.html the home page about.html another page styles.css how it all looks photo.jpg a pictureThe machine holding it is called a server, and the word describes a job rather than a kind of hardware. Your laptop can be one. It usually is one, briefly, while you are building something.
The URL is an address in four parts
The string in the address bar is not one thing. It is four, and once you can see the seams a lot of otherwise-mysterious behaviour stops being mysterious.
https://codewithpurpose.org/courses/index.html└─┬─┘ └────────┬────────┘└──┬──┘└────┬────┘ │ │ │ │protocol domain path filehttps means "fetch this the usual way, encrypted". The s is TLS, and it is what puts the padlock in the address bar. Plain http still works and browsers now warn about it.
Which machine. A name somebody rented, pointed at a server. This is the part you buy when you "buy a domain".
Which folder on that machine. Very often it maps to real directories on a real disk, which is exactly how your own folder will work.
Which file. Usually invisible, because of a convention covered in chapter 3 — asking for a folder gets you the index.html inside it.
Two more pieces turn up regularly. A query string after a ? passes information to the server — ?search=css. A fragment after a # points at a place within the page, and never reaches the server at all — the browser handles it locally by scrolling.
DNS turns a name into a number
The network cannot route to codewithpurpose.org. It routes to numbers. So before anything else happens, the browser has to convert one to the other, and that lookup is called DNS — the Domain Name System.
It works like a phone book that is spread across thousands of machines, and the answer is cached at every level: your browser, your operating system, your router, your internet provider. Most lookups never leave your building.
# Ask for it yourself, from any terminal$ nslookup codewithpurpose.org# Name: codewithpurpose.org# Address: 76.76.21.21The server sends text, not a picture
This is the sentence worth stopping on. What comes back over the network is text — the same characters you will type into your editor. Not an image of a page. Not a layout. Not anything the server has drawn.
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 187 <!doctype html><html> <head><title>My site</title></head> <body> <h1>Hello</h1> <p>This is a page.</p> </body></html>A few header lines, a blank line, then your file. The 200 is a status code, and you already know one of its siblings: 404 means the server looked and there is no such file.
Here it is. What you want to see.
It moved permanently; go here instead. The browser follows automatically.
No such file. Almost always a typo in a path or a file that was renamed.
The server broke while trying. Not your browser's fault, and not a URL you can fix.
The browser is the thing that draws it
Everything visual happens on the visitor's machine. The browser reads your text, works out what each part means, applies whatever styling it finds, calculates where every box goes, and paints pixels.
The browser first checks whether it already knows the answer — a cached page, a cached address. A lot of the time the journey stops here and nothing touches the network at all.
The timings are illustrative, but the proportions are not: the network is most of the wait and your file is usually a tiny part of it. Note how much happens before your HTML is even involved — and that everything after step five is the browser reading what you wrote.
Step through that and notice how little of it is yours. The file the server sends in step five is the one you wrote. Everything before it is infrastructure you will never touch, and everything after it is the browser interpreting what you wrote.
Key takeaways
- A website is files in a folder on a machine that is switched on and listening.
- A URL is a protocol, a domain, a path, and a file — plus an optional ?query and #fragment.
- A #fragment never reaches the server; the browser scrolls to it locally.
- DNS converts a domain name into an IP address, and the answer is cached everywhere, which is why domain changes take time to appear.
- The server sends text, not a picture. The same characters you type are what travels.
- 200 means here it is, 404 means no such file, 500 means the server broke.
- The browser does all the drawing, on the visitor's machine.
- You write one step of the seven. The rest is infrastructure you never touch.
Before you move on
Quick check
Answer these to unlock the next chapter: 3 of 4 to pass. You can retake it anytime.
Make a free account to read on
Every chapter is free — an account lets your course progress follow you from your laptop to your phone. No payment, no trial.