Lesson 1 of 5
What Happens When You Visit a Website
Follow the lightning-fast journey of data from your browser click all the way to your screen in milliseconds.
Learn it
Imagine typing your favourite website address into your browser and pressing enter. It feels instant, but behind the scenes, a message is travelling across the world to fetch your page!
Your computer asks a digital phonebook for directions, zooms through underground cables, and asks a powerful computer called a server for the files. The server sends back text, images, and colours so your browser can rebuild the webpage right in front of your eyes.
Key terms
- Client
- The device or application, such as your web browser, that requests data from a remote computer.
- Server
- A high-performance computer that stores website assets and serves them to clients on demand.
- HTTP / HTTPS
- HyperText Transfer Protocol (Secure), the standard set of rules used to transfer web pages across the internet.
- Rendering Engine
- The browser component that reads HTML and CSS code and translates it into visible graphics.
Inspecting the Web Journey
Use built-in browser developer tools to witness the network dance happening live.
- 1Open Developer Tools: Right-click anywhere on a webpage and select Inspect, or press F12 on your keyboard.
- 2Navigate to Network Tab: Switch to the Network panel at the top of the developer tools dock.
- 3Reload the Page: Hit refresh and watch the waterfall of individual files, images, and scripts load in sequence.
- 4Inspect Headers: Click on the first document request to inspect the HTTP status code (like 200 OK) and response headers.
A Simple HTTP Request and Response
textGET /index.html HTTP/1.1
Host: www.codequest.co.uk
User-Agent: Mozilla/5.0
Accept: text/html
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 128
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to CodeQuest!</h1>
</body>
</html>The client sends a GET command specifying the resource path and host. The server replies with a status code (200 OK) and the raw HTML payload.
Try it
Put the stages of visiting a website into the correct chronological order:
- 1User types a URL into the browser bar and presses Enter
- 2Web server processes the request and returns HTML, CSS, and assets
- 3Browser opens a secure connection and sends an HTTP GET request
- 4Browser rendering engine parses the code and paints the webpage
- 5Browser queries DNS to find the server's numerical IP address
Challenge
Open your browser's Network tab on a busy news website and note down the total number of requests made.
Pick whichever way suits you — every mode earns the same bonus XP.
Write at least 40 more characters to submit.
Mark your own work
Guided walkthrough — 0/5 clues revealed
- Clue 1 locked — reveal it only if you get stuck.
- Clue 2 locked — reveal it only if you get stuck.
- Clue 3 locked — reveal it only if you get stuck.
- Clue 4 locked — reveal it only if you get stuck.
- Clue 5 locked — reveal it only if you get stuck.
Each clue costs 3 XP (never below 13 XP). You'd earn 25 XP right now.
Extension: Filter the requests by 'Img' or 'JS' to see which file type makes up the largest proportion of the page weight.