How the web works

In plain English

A browser is the app on your device that shows websites, and a server is another computer that stores the site's files and sends them out. The address you type is a URL, and DNS is a phonebook that turns that name into the server's numeric address. Your browser sends an HTTP request asking for the page, and the server replies with an HTTP response carrying the files. A static hosting server simply hands over stored files, keeping the three layers separate: HTML for structure, CSS for style, and JavaScript for behaviour.

Step by step

1. 1Type a URL such as https://example.com into the address bar.
2. 2Your browser asks DNS for the server's numeric address.
3. 3The browser sends an HTTP request to that server.
4. 4The server answers with an HTTP response and the page files.
5. 5The browser reads the HTML, then loads the CSS and JavaScript.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How the web works</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello from a static server</h1>
    <p>This page is just files sitting on a server.</p>
    <script src="app.js"></script>
  </body>
</html>

Common mistakes

• Treating the browser and the server as the same thing, when one runs on your device and the other stores the files.
• Thinking DNS is one machine, when it is a worldwide directory that turns names into addresses.
• Mixing style and behaviour into the HTML instead of keeping the three layers in separate files.
• Forgetting that loading a page is a round trip: a request goes out and a response comes back.