Skip to content
Tolu AdeoyeCourses

Module 1 · Lesson 1.1 · About 25 minutes

What happens when you visit a website

Follow a page from the address bar to your screen: URLs, DNS, requests, responses and rendering.

Every time you open a website, your computer has a quick conversation with another computer. That computer is often far away, and the whole conversation usually takes less than a second.

By the end of this lesson, you’ll be able to explain that conversation in your own words. You’ll also write your first line of HTML.

Two computers, one conversation

The web works on a simple idea: one computer asks, another answers.

  • The computer that asks is the client. Most of the time, that’s your web browser: Chrome, Safari, Firefox or Edge.
  • The computer that answers is the server. It stores websites and sends them to anyone who asks.

A website is a set of files on a server. The main file is written in HTML, the language that describes what’s on a page: headings, paragraphs, links and images.

The journey, step by step

Here’s what happens when you visit a website:

  1. You ask for a page. You type an address, called a URL, and press Enter.
  2. DNS finds the server. Your browser asks DNS for the server’s number, its IP address.
  3. Your browser sends a request to that server.
  4. The server sends a response, with the page’s HTML inside.
  5. Your browser draws the page. This is called rendering.

Now try it with a page of your own. You’ll see the real messages computers send each other, just a bit simplified.

Try it

Follow your page's journey

Change the text between <h1> and </h1> to anything you like. Then press Visit the site and step through what happens.

https://my-first-site.example/

Press Visit the site to start.

Your first line of HTML

HTML uses tags to label each part of a page. Here’s a heading:

<h1>Hello, world!</h1>

It has three parts:

  • <h1> is the opening tag. h1 means “the main heading of the page”.
  • Hello, world! is the content: what people see.
  • </h1> is the closing tag. It’s the same as the opening tag, with a / added.

The browser doesn’t show the tags. It uses them to decide how to show the content: here, as a big, bold heading.

Try it

Bug zoo: fix the heading

Someone wrote this heading, but the preview shows strange characters and no big heading. Fix it so the browser shows a proper heading. Then change the words to your own.

Preview

The preview updates as you type.

Quick check

Quick check

Answer from memory first, then check. Getting one wrong is useful: it shows what to look at again.

  1. Question 1: What does DNS do?
  2. Question 2: What happens right after DNS answers?
  3. Question 3: What does the server send back?
  4. Question 4: In https://my-first-site.example/about, which part is the domain?

Cheat sheet

How the web works

Client
The computer that asks for a page. Usually your web browser.
Server
The computer that stores a website and sends it to anyone who asks.
URL
A web address, like https://my-first-site.example/about.
Domain
The site's name in a URL, like my-first-site.example.
DNS
The internet's phone book. It turns domains into IP addresses.
IP address
The number that identifies a computer on the internet, like 203.0.113.42.
Request
The message your browser sends to ask for a page.
Response
The server's answer: how it went (200 OK), then the page.
HTML
The language that describes what's on a page.
Tag
A label in HTML, like <h1> and </h1>, that tells the browser what something is.
Rendering
The browser reading HTML and drawing the page on screen.

Tip: print this page, or save it as a PDF, to keep the cheat sheet.

Coming next

In the next lesson, you’ll be the browser. You’ll read HTML the way a browser does, and predict what it will draw before you see it.

Sources and further reading

Your progress

0 of 3 done

Saved in this browser only. Nothing is sent anywhere.