Getting Started with HTMLBeginner⏱ 7 min02 / 8

How the Web Works

Learn how your browser fetches a web page from a server and what roles HTML, CSS, and JavaScript each play in making it come alive.

Every time you open a web page — whether it's a recipe blog, a banking app, or a social network — something remarkable happens in milliseconds. Your browser travels across the internet, knocks on a server's door, and brings back a bundle of files that get transformed into the page you see. Before you write a single line of HTML, understanding this journey will make everything else click into place.

#The Web is a Conversation

You (the client) sit at a table and ask a waiter for a cheeseburger. The waiter (the internet) walks to the kitchen (the server), which prepares your order and sends it back. You eat the meal (your browser renders the page). You never go into the kitchen yourself — you just make requests and receive responses.

On the web, your browser is the client. A server is a computer somewhere in the world that stores website files and is always switched on, waiting for requests. The conversation between them follows a set of rules called HTTP (HyperText Transfer Protocol) — the common language the web uses.

#What Happens When You Type a URL

Let's break down what happens step by step when you type https://example.com/about into your browser and press Enter:

DNS lookup — The browser asks a Domain Name System (DNS) server to translate the human-readable domain example.com into a numeric IP address like 93.184.216.34. Think of DNS as the internet's phonebook.
HTTP request — The browser sends a request to that IP address, asking for the /about page.
Server response — The server finds the right file(s) and sends back an HTTP response containing status information and the page content.
Browser renders — The browser reads the HTML, fetches any linked CSS and JavaScript files, and paints the finished page on your screen.

This is what the server sends back — a plain text HTML file. The browser does the rest.

1
2
3
4
5
6
7
8
9
10
11
12
13
14<!-- A minimal HTML page the server might send back -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>About Us</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>About Us</h1>
    <p>Welcome to our site!</p>
    <script src="app.js"></script>
  </body>
</html>

#Understanding URLs

A URL (Uniform Resource Locator) is just a structured address. Each part has a job:

`` https://www.example.com/about?ref=home │ │ │ │ │ │ │ └─ query string (extra data) │ │ └─ path (which page/resource) │ └─ domain (which server) └─ protocol (how to communicate) ``

The protocol https means the conversation is encrypted — the s stands for secure. Plain http sends data in the open, which is why modern sites always use https.

#HTTP Requests and Responses

Every request the browser makes gets a status code in reply. You've probably encountered some already:

| Code | Meaning | |------|---------| | 200 OK | Everything worked. Here's your page. | | 301 Moved Permanently | The page lives at a new URL now. | | 404 Not Found | The server can't find what you asked for. | | 500 Internal Server Error | Something broke on the server's side. |

Think of status codes like the waiter's reply before bringing your food: "Coming right up!" (200), "Sorry, we moved locations" (301), or "We don't have that on the menu" (404).

#The Three Languages of the Web

Once the browser has the files, it uses three languages together to build the page you see. They each have a distinct job, and that separation is intentional.

HTML defines WHAT is on the page and its meaning.

1
2
3
4
5
6<!-- HTML: Structure — the skeleton -->
<article>
  <h2>My First Post</h2>
  <p>This is the content of the post.</p>
  <button>Read more</button>
</article>

CSS controls HOW the page looks — colours, spacing, fonts, layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15/* CSS: Style — the skin and clothes */
article {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
}

button {
  background: #0070f3;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

JavaScript makes the page interactive and dynamic — it responds to what the user does.

1
2
3
4
5
6// JavaScript: Behaviour — the muscles
const button = document.querySelector('button');

button.addEventListener('click', () => {
  alert('Opening the full post!');
});

Common mistake

Common mix-up: where does HTML end and CSS begin?

Beginners sometimes style things directly inside HTML with style attributes (e.g. <p style="color:red">). This works, but it mixes structure with presentation, making both harder to maintain. As a rule: use HTML files for structure, separate .css files for style. Your future self will thank you.

Note

The browser does a LOT of work for free

When your browser receives an HTML file it finds <link> and <script> tags and automatically fires off extra HTTP requests to fetch those CSS and JS files. You don't have to manage this — the browser handles it. That's why the order of your tags matters: link CSS in <head> so styles load before content appears, and often place scripts at the bottom of <body> so the HTML is ready before JavaScript runs.

Quick check

You type a URL into your browser and see a '404' status code in the developer tools. What does this mean?

Key takeaways

The browser (client) sends HTTP requests to a server; the server responds with files the browser then renders.
A URL has distinct parts: protocol, domain, path, and optional query string — each with its own job.
HTTP status codes are shorthand for the server's reply: 200 = success, 404 = not found, 500 = server error.
HTML structures content, CSS styles it, and JavaScript adds interactivity — three separate concerns, working together.
The browser automatically fetches linked CSS and JS files after receiving the initial HTML response.

Practice challenges

Test yourself · earn XP

0/4

Fill in the blank#1

The lesson showed that the browser reads the HTML and automatically fetches any linked CSS file. Fill in the attribute that tells the <link> tag WHERE the stylesheet lives, so the browser knows which file to request.

<link rel="stylesheet" ="styles.css" />

Reorder the lines#2

Arrange these lines into the minimal HTML document the server sends back (from the lesson). The document type comes first, the head holds page info and the linked stylesheet, and the body holds the visible content.

  </head>

  <body>

  </body>

  <head>

    <h1>About Us</h1>

<html lang="en">

    <title>About Us</title>

<!DOCTYPE html>

</html>

    <link rel="stylesheet" href="styles.css" />

Fix the bug#3

This code was meant to load an encrypted page, but the URL sends data in the open instead of securely. What's wrong?

fix-bug

1<a href="http://www.example.com/about">About Us</a>

Predict the output#4

A user types a URL and, in the developer tools, the browser reports a 404 status code for the page. What happened, and what will the user see?

predict-output

1
2GET https://www.example.com/about
→ 404 Not Found

Your turn

Practice exercise

Build a tiny 'business card' web page. It should include: your name in an <h1>, your job title in a <p>, and a link to any website wrapped in an <a> tag. Then add a <style> block inside <head> that makes the <h1> a colour of your choice and centres all text on the page. This exercise practices using all three web technologies (HTML structure + CSS style) in one file.

Try it live — edit the code and hit Run to see it rendered:

solution.html · editable

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Business Card</title>
    <style>
      /* TODO: centre all text on the page */

      /* TODO: give h1 a colour of your choice */

    </style>
  </head>
  <body>
    <!-- TODO: add an h1 with your name -->

    <!-- TODO: add a p with your job title -->

    <!-- TODO: add an a tag linking to a website -->

  </body>
</html>