How a web page reaches your screen

What actually happens in the two seconds between typing a URL and seeing the page.

The question nobody asks in class

You type google.com and press Enter. A page appears. Most students never ask what happened in between. If you skip this, every later bug feels like magic. Let us walk through it once, slowly.

Step 1: your browser needs an address

google.com is a name for humans. Computers talk using IP addresses like 142.250.183.14. So the browser first asks a DNS server: "what is the IP for this name?"

This lookup takes about 20 to 120 milliseconds on normal college WiFi. The answer is cached, so the second visit skips it.

Step 2: a connection is opened

The browser opens a TCP connection to that IP on port 443 (HTTPS) or port 80 (plain HTTP). Then it does a TLS handshake so nobody on the network can read your traffic. That handshake costs one or two more round trips.

Step 3: the request

Your browser sends a few lines of plain text:

Code

GET /index.html HTTP/1.1
Host: firsthack.in
User-Agent: Mozilla/5.0
Accept: text/html

That is it. An HTTP request is just text with a method (GET), a path (/index.html) and some headers.

Step 4: the response

The server sends text back:

Code

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 148

<!DOCTYPE html>
<html>...</html>

200 means fine. 404 means the path does not exist. 500 means the server code crashed. 301 means the page moved. You will meet all four.

Step 5: the browser builds the page

The browser reads the HTML top to bottom and builds a tree in memory called the DOM. When it hits <link rel="stylesheet"> it downloads the CSS. When it hits <script src="..."> it downloads and runs the JavaScript.

Then it does three things: style (which rule applies to which element), layout (where each box sits, in pixels), and paint (fill in colours on screen).

See it yourself

Install Node.js, save this as server.js, and run node server.js.

JavaScript

const http = require('http');

const server = http.createServer((req, res) => {
  console.log(req.method, req.url);
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.end('<!DOCTYPE html><html><body><h1>Hello from my server</h1></body></html>');
});

server.listen(3000, () => {
  console.log('Listening on http://localhost:3000');
});

Open http://localhost:3000 in your browser. Look at your terminal. You will see GET / and then usually GET /favicon.ico. That second line is the browser asking for the tab icon on its own. You just watched a real HTTP request arrive.

Front end and back end

Front end is the code that runs in the browser: HTML, CSS,

JavaScript. The user's phone or laptop does this work.

Back end is the code that runs on the server: PHP, Node, Python,

Java. It decides what HTML or data to send.

This course is front end. The server.js above was a five-line back end so you could see both sides once.

⚠️

Opening a file with file:///C:/Users/you/index.html is not the same as loading it from a server. Some things break in file mode, especially fetch in the last lesson. Use a real local server. In VS Code the Live Server extension does this in one click.

What to remember

Piece	Job
DNS	name to IP address
HTTP	the request and response text
HTML	structure and content
CSS	how it looks
JavaScript	how it behaves

💡

Press F12 in Chrome and open the Network tab, then reload any site. Every row is one request. Click one and read its headers. Do this on three sites today. It will make the rest of this course feel obvious.

Next lesson you write the HTML yourself, and you learn why <div> everywhere is a habit worth avoiding early.