Module 2: The Building Blocks of a Website (HTML, CSS, JavaScript)

Module objective

Understand what a web page is made of — the three "ingredients" that compose it — without needing to write any code.

Simple explanation

Every web page you visit is built with three fundamental building blocks. Each one has a specific role:

1. HTML — The structure

HTML (HyperText Markup Language) is the skeleton of the page. It defines what's on the page: a title, a paragraph, an image, a button, a form...

HTML doesn't deal with appearance. It simply says: "Here's a title. There's an image. Below that, a paragraph of text."

2. CSS — The appearance

CSS (Cascading Style Sheets) is the decorator. It decides what things look like: colors, sizes, spacing, fonts, how elements are laid out on the page...

CSS is the reason two websites can have the same content but look completely different.

3. JavaScript — The behavior

JavaScript (often abbreviated as JS) is the mechanic. It handles what moves and reacts: a menu that opens when you click, a form that checks your email before submission, an animation, a shopping cart that updates in real time...

Without JavaScript, pages would be static — like a printed document. With JavaScript, they become interactive.

The three blocks together

graph TD
    subgraph Page["A web page"]
        H["HTML — Structure"]
        C["CSS — Appearance"]
        J["JavaScript — Behavior"]
    end
    H -->|"What's on the page"| Page
    C -->|"What it looks like"| Page
    J -->|"What moves and reacts"| Page

Concrete example

Let's take the homepage of an e-commerce website:

• HTML says: "There's a logo at the top, a search bar, a list of products each with a name, a price, and an 'Add to cart' button."
• CSS says: "The logo is on the left, in blue. The products are arranged in a 4-column grid. The button is orange with white text and rounded corners."
• JavaScript says: "When you click 'Add to cart', the cart counter in the top right goes from 0 to 1, and a small animation confirms the addition."

Metaphor

Imagine you're building a house:

• HTML is the architect's plan and the walls: it defines the rooms, where the doors and windows are, the overall layout
• CSS is the interior decoration: the wall colors, the type of flooring, the curtains, the style of furniture
• JavaScript is the electrical and plumbing systems: when you flip the switch, the light turns on; when you turn the faucet, water flows

Without the walls (HTML), there's nothing to decorate. Without the decor (CSS), the house is livable but dreary. Without the electricity (JavaScript), everything is there but nothing responds.

Is every block essential?

• HTML: yes, always. No page without structure.
• CSS: technically no, but without it the page is unreadable and ugly. In practice, it's always present.
• JavaScript: not always. A page that simply displays text and images doesn't need it. But as soon as there's interactivity, it becomes essential.

Summary in 3 key points

1. HTML = the structure (what's there), CSS = the appearance (how it's presented), JavaScript = the behavior (what reacts)
2. These three blocks work together to create every page you visit
3. You don't need to know how to code to understand this breakdown — just remember that each block has its role