Ibnovate Course 2 · The Rising Builders
⏱ 75 minLive session · ages 12–15

Session 15 — The Web Stack

Duration: 75 min · Format: live online · Ages: 12–15

Session goal: by the end, students can build a page's structure with HTML, style it with CSS, and explain how the two layers work together in a real editor.

Before class — prep (5 min)

Agenda

Time Segment
0:00 Hook — every website is just text files (5 min)
0:05 Teach — HTML is the structure (15 min)
0:20 Teach — CSS is the styling (15 min)
0:35 Activity — build a profile card in CodePen (23 min)
0:58 Check for understanding (10 min)
1:08 Wrap-up + homework (7 min)

0:00 · Hook (5 min)

Ask the class and take a few answers (chat or unmute):

Then reveal it live: right-click any page → Inspect (or View Source). Show them the wall of tags. Land the idea: every website is just text files the browser reads — three layers, always the same. HTML is the structure, CSS is the style, JavaScript is the behaviour. Tell them: today they build the first two layers themselves, and by Session 18 their own app is live on the internet.

0:05 · Teach — HTML is the structure (15 min)

Explain: HTML (HyperText Markup Language) is the skeleton of a page. You mark up your content with tags so the browser knows what each piece is — a heading, a paragraph, a button. A tag usually comes in a pair that wraps content: an opening tag <p> and a closing tag </p>. Together with the content between them, that's an element.

Share this diagram so students can see the three layers of the web working together — HTML for structure, CSS for style, and JavaScript for behaviour:

Diagram of the web stack shown as three stacked layers of a single page: HTML labelled as the structure or skeleton, CSS labelled as the style or paint that adds colour and layout, and JavaScript labelled as the behaviour that makes the page react

Type/run this together in CodePen (in the HTML panel):

<h1>My First Web Page</h1>
<p>Hello! I am learning to build websites.</p>
<button>Click me</button>

Point out the three parts as the preview updates live: <h1> is a big heading, <p> is a paragraph, <button> is a clickable button. The browser draws each one differently because the tag tells it what the content is.

⚠ Watch for the #1 confusion: in CodePen's HTML panel you do not write <html>, <head>, or <body> — CodePen wraps your code in those for you. Just write the content tags. (In a real file you'd add them; we'll see that in Session 18.)

Explain nesting: tags can go inside other tags, like boxes inside boxes. A <div> is a generic container that groups things.

Type/run this together in CodePen:

<div>
  <h2>About Me</h2>
  <ul>
    <li>I like football</li>
    <li>I like coding</li>
  </ul>
</div>

Ask: "Why does the <li> text appear indented with bullet points?" (Answer: <ul> means unordered list, and each <li> is a list item — the browser draws them as bullets automatically.)

0:20 · Teach — CSS is the styling (15 min)

Explain: HTML gives you a plain, grey page. CSS (Cascading Style Sheets) is the clothing — colours, fonts, spacing, layout. You write a rule: a selector (which elements to style) plus a block of properties (what to change).

Type/run this together in CodePen (in the CSS panel, keeping the HTML from before):

h1 {
  color: darkblue;
  font-family: sans-serif;
}

p {
  color: gray;
  font-size: 18px;
}

Walk through the anatomy out loud: h1 is the selector, then inside { } each line is property: value;. Point out that color changed the text and font-size made it bigger — the preview updated the instant you typed.

⚠ Watch for: every CSS line ends in a semicolon ; and every rule needs its curly braces { }. A missing ; or } silently breaks everything after it. Colours can be a name (red), or a hex code (#F5A623).

Explain selectors by name. To style one specific element, give it a class in the HTML and target it with a dot in the CSS.

Type/run this together in CodePen:

<button class="cta">Click me</button>

.cta {
  background-color: #F5A623;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
}

Ask: "How did the CSS know to style only this button and not every button?" (Answer: the class="cta" label in the HTML, matched by .cta in the CSS — the dot means "class".)

0:35 · Activity — Build a profile card (23 min)

Have students open their own CodePen → Create → Pen, then build a profile card. Screen-share your own Pen as a model.

Type/run this together in CodePen (HTML panel):

<div class="card">
  <h2>Sara A.</h2>
  <p class="role">Future web developer</p>
  <p>I am 13 and I love building things in the browser.</p>
  <button class="cta">Follow</button>
</div>

Then style it (CSS panel):

.card {
  max-width: 300px;
  margin: 40px auto;
  padding: 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: sans-serif;
  text-align: center;
}

.role {
  color: #F5A623;
  font-weight: bold;
}

Then have them make it theirs: change the name, role, and colours; try background-color on .card, a different border-radius, or a new font-size.

Circulate for (or watch the chat for) the two errors nearly everyone hits — forgetting a closing } in CSS, and mismatching the class name (class="card" in HTML but .crd in CSS, so nothing styles).

Demo the Debug Game. Share this broken code and ask students to spot two mistakes before you fix it:

.card {
  color: blue
  background-color white;
}

Ask: "What are the two problems?" Then fix it live: 1. The first line is missing its semicolon: color: blue;. 2. The second line is missing the colon between property and value: background-color: white;.

0:58 · Check for understanding (10 min)

Ask these aloud or drop them in the chat. Answer key (for you):

  1. What are the three layers of the web, and what does each do? → HTML = structure, CSS = style, JavaScript = behaviour.
  2. In the rule p { color: red; }, name the selector, the property, and the value. → Selector p, property color, value red.
  3. How do you style just one element instead of all of them? → Give it a class in the HTML (class="cta") and target it with a dot selector in the CSS (.cta).

1:08 · Wrap-up + homework (7 min)

Teaching notes

.row {
  display: flex;
  gap: 16px;
  justify-content: center;
}

Vocabulary

Term Meaning
HTML The markup that gives a page its structure
Tag / Element A label like <p>…</p> that says what content is
CSS The rules that style a page (colour, font, spacing)
Selector The part of a CSS rule that picks which elements to style
Class A reusable label on an element, targeted with .name in CSS

Resources

Practice set

Extra exercises reinforcing HTML tags and CSS rules — easy to hard. Great for lab time or homework.

1. Predict the output: what will the browser show for this HTML? → A big heading "Menu", then a bulleted list with "Pizza" and "Salad".

<h1>Menu</h1>
<ul>
  <li>Pizza</li>
  <li>Salad</li>
</ul>

2. Name the parts of this rule: h2 { font-size: 24px; }. → Selector h2, property font-size, value 24px.

3. Fix the bug: this CSS does nothing to the button. Why, and how do you fix it? → The HTML class is save but the CSS selector is .saev (typo) — they must match. Change the selector to .save.

<button class="save">Save</button>

.saev {
  color: green;
}

4. Fix the bug: this rule breaks the whole stylesheet. Find the two problems. → Missing colon on line 2 and missing semicolon on line 1: color: white; then background-color: navy;.

.box {
  color white
  background-color: navy;
}

5. Write it: write the HTML for a paragraph that says "Welcome!" and give it a class of intro. → <p class="intro">Welcome!</p>.

6. Write it: write a CSS rule that makes every <h1> centred and orange. → h1 { text-align: center; color: orange; }.

7. Trace it (hard): two rules both target the same paragraph — p { color: blue; } then later .note { color: red; } with <p class="note">Hi</p>. What colour is the text, and why? → Red — a class selector is more specific than a plain tag selector, so .note wins (this is the "Cascading" in CSS).

Going deeper (optional)

For a class that's flying, introduce the box model — the idea that every element is a box with content, padding (space inside), a border, and margin (space outside). No new tools needed:

.card {
  padding: 20px;          /* space inside the box, around the content */
  border: 2px solid #16233A;  /* the box's edge */
  margin: 30px;           /* space outside the box, pushing others away */
}

Have them change one value at a time and watch the card breathe. Land the point: almost all "why is my layout cramped / why is there a weird gap" questions come down to padding vs margin. Challenge them to make a card with lots of inside space but no outside space, then the reverse, and describe the difference in their own words.

Common mistakes & fixes

Next session

Session 16 — Make It Interactive: students add the third layer, JavaScript, so buttons actually do something — reading and updating the page in response to clicks.

Ibnovate · Build · Innovate
Type to search · Esc to close
Welcome back
Sign in to continue building.
Accounts are created by Ibnovate — ask your instructor for your login.
🔒