1 What is HTML?HTML (HyperText Markup Language) is the language that gives a webpage its structure . Every website you have ever visited is built on HTML.
HTML uses tags to mark up content. A tag is a keyword wrapped in angle brackets:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<button>Click me</button>
Most tags come in pairs — an opening tag <p> and a closing tag </p>. The closing tag has a forward slash.
📥 Load HTML tags example
Every HTML file starts with <!DOCTYPE html>, then <html>, <head>, and <body> tags. The body is where your visible content goes.
2 The Structure of a Web PageEvery HTML page follows the same basic skeleton:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>My first web page.</p>
</body>
</html>
<head> — invisible settings: page title, fonts, styles<body> — everything the visitor actually sees<h1> to <h6> — headings, largest to smallest<p> — a paragraph of text
🧩 Which tag holds everything the visitor can see?
<head>
<body>
<html>
3 Adding Style with CSSCSS (Cascading Style Sheets) controls how HTML looks — colours, sizes, fonts, spacing, and layout.
You write CSS inside a <style> tag in the <head>. Each rule selects an element and sets properties:
h1 {
color: #4f46e5;
font-size: 2rem;
}
p {
color: #64748b;
font-size: 1rem;
}
The part before the { } is the selector (which element to style). Inside the braces are property: value pairs.
📥 Load CSS example
Try changing color: #4f46e5 to any hex colour code — like #ef4444 for red or #10b981 for green.
4 Using ClassesA class is a name you give to an element so you can style it with CSS. You add a class with the class attribute:
<!-- HTML -->
<div class="card">
<h2>My Card</h2>
<p>Some content here.</p>
</div>
/* CSS */
.card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
The dot in .card means "select anything with class card". You can use the same class on multiple elements.
📥 Load card example
🧩 How do you select a class called "box" in CSS?
box { }
#box { }
.box { }
5 Layout with FlexboxFlexbox is a CSS layout tool that makes it easy to arrange elements in a row or column and control their alignment.
.container {
display: flex;
gap: 16px;
justify-content: center;
}
display: flex — turns on flexbox for that elementgap — space between child elementsjustify-content — aligns items along the main axisalign-items — aligns items along the cross axis
📥 Load flexbox example
Flexbox is how most modern websites create navigation bars, card rows, and centred layouts. It is one of the most useful CSS tools to learn.
6 Colours in CSSCSS supports several ways to write colours:
/* Named colour */
color: red;
/* Hex code */
color: #ef4444;
/* RGB */
color: rgb(239, 68, 68);
/* With transparency (alpha) */
color: rgba(239, 68, 68, 0.5);
Hex codes are the most common. They are a # followed by 6 characters using digits 0–9 and letters A–F. You can pick any colour from a site like coolors.co and copy its hex code.
📥 Load colour boxes example
The alpha value in rgba() goes from 0 (invisible) to 1 (fully opaque). Use it for transparent backgrounds and overlays.
7 Now Build Something!You have learned the core building blocks of web design:
✅ HTML tags — give pages their structure
✅ Page skeleton — DOCTYPE, html, head, body
✅ CSS rules — selector + property: value
✅ Classes — reusable styles with a dot selector
✅ Flexbox — arranging elements in rows and columns
✅ Colours — named, hex, rgb, rgba
🎨 Challenge: load the card example, then try changing the background colour, adding a second card, or changing the heading font size. Every change is instant!
🎨 Load card & start building