How the Web Works & Your First Page — HTML & CSS Course

What you'll learn

Welcome to Phase 1 and the very beginning of your web development journey. Every website you've ever visited — from Google to your favourite shop — is built on the same foundation you're about to learn. In this first module you'll understand how the web actually works and write your very first web page.

By the end you'll be able to:

Explain how a browser and a web server talk to each other
Describe what HTML, CSS, and JavaScript each do
Understand how a browser turns code into a page
Create and open your first .html file

How the web works

When you type an address into your browser and hit enter, a quiet conversation happens in milliseconds. Your browser is a client — it sends a request across the internet to a server, a powerful computer that stores the website. The server sends back a response: the files that make up the page. This request-and-response conversation follows a set of rules called HTTP (HyperText Transfer Protocol).

Key idea

Think of it like ordering at a restaurant. You (the browser) ask the waiter for a dish; the kitchen (the server) prepares it and sends it out. The web is just billions of these little request/response exchanges happening every second — and the files the server sends back are usually HTML, CSS, and JavaScript.

The best part for a learner: you don't need a server to start. Your own computer can open an HTML file directly in the browser, so you can build and preview real pages with nothing but a text editor.

HTML, CSS & JavaScript

Web pages are built from three languages, each with one clear job. Learning them in order — structure first, then style, then behaviour — is the fastest path to confidence. This course focuses on the first two, HTML and CSS, which together can build beautiful, complete websites.

Language	Its job	Think of a house
HTML	Structure & content — headings, text, images, links	The frame, walls, and rooms
CSS	Presentation & style — colours, layout, spacing, fonts	The paint, furniture, and decor
JavaScript	Behaviour & interaction — clicks, updates, logic	The electricity and plumbing

Note

A house needs a solid frame before you paint it, and paint before you wire the lights. Same here: HTML gives your page meaning and structure, CSS makes it look good, and JavaScript (a topic for after this course) makes it interactive.

How a browser renders a page

When the browser receives an HTML file, it reads it from top to bottom and builds an internal model of the page called the DOM (Document Object Model) — a tree of all your elements. It then applies your CSS to decide how everything looks, and finally paints the pixels you see on screen. Every page is drawn through this same pipeline: parse → style → paint.

Your first page

Let's write real code. Open your text editor, create a file called index.html, and type the following. Don't worry about understanding every line yet — the next module breaks it all down. Save it, then double-click the file to open it in your browser:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my very first web page. 🎉</p>
  </body>
</html>

Here's exactly what your browser will show:

index.html

Live preview

Your first web page, rendered by the browser.

Tip

Name your main page index.html. When a browser or server is pointed at a folder, it looks for index.html by default — it's the traditional "front door" of any website. Keep each project in its own folder to stay organised.

Recap & quick check

Key takeaways

The browser (client) sends a request; the server responds with the page's files, following HTTP.
HTML is structure, CSS is presentation, and JavaScript is behaviour — three languages, three jobs.
The browser parses HTML into the DOM, applies CSS, and paints the result: parse → style → paint.
You can build and preview pages locally — no server needed — by opening an .html file in your browser.
Name your homepage index.html; it's the default page a browser looks for in a folder.

Quick check

1. In web terms, what is your browser?

2. Which language is responsible for the structure and content of a page?

3. What does CSS do?

4. What is the DOM?

5. What should you usually name your site's main page?

You just wrote your first web page — congratulations! 🎉 Next we'll dissect that boilerplate line by line and learn the structure every HTML document shares.