Session 21 — Build & Share Your Site

Duration: 60 min · Format: live online · Ages: 8–11

Session goal: by the end, students have built a fun multi-section web page about themselves or a topic they love — using everything they learned about HTML and CSS — and presented it to the class.

Before class — prep (5 min)

• Open CodePen and start a new Pen. Have the starter template below ready to paste so students who need a boost can begin fast.
• Remind students to have their Session 20 homework plan (three sections + colours) open.
• Decide how sharing will work: in CodePen, Save the Pen, then use Share → Copy Link (or just share screen) so each student can present.
• Plan a simple presentation order so every child gets a turn.

Agenda

0:00 · Hook (5 min)

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

• "Three sessions ago, none of you had made a website. Today you finish a real one — how does that feel?"
• "Your page can be about anything — you, your pet, space, football, a game. What will yours be about?"

Let a few students shout out their topic, then reveal: today you'll build a multi-section page and show it to the whole class.

0:05 · Teach — Plan the page + starter template (12 min)

Explain: a good page is organised into sections, each with its own heading. Show the plan out loud: a title at the top, then three sections (like "About Me," "My Favourites," "My Goals"), then some style to tie it together.

Picture the page structure: a web page built from stacked sections — header, about, gallery, footer.

Type this together in CodePen — the HTML box (this is the starter template):

<h1>All About Me</h1>

<h2>About Me</h2>
<p>My name is Sara and I am 10 years old.</p>

<h2>My Favourites</h2>
<p>I love drawing, mango juice, and rainy days.</p>

<img src="https://picsum.photos/300/200" alt="A photo I like">

<h2>My Goals</h2>
<p>One day I want to build my own video game.</p>

⚠ Watch for: students copying the example word-for-word instead of making it theirs. Pause and say: "Change every line to be about you or your topic."

Ask: "What are your three section headings going to be?" (Take 3–4 answers so everyone commits to a plan.)

0:17 · Teach — Sections and finishing touches (8 min)

Explain: now bring in CSS to make it look finished. Show a simple style block that works for any page.

Type this together in CodePen — the CSS box:

body {
  background-color: lightyellow;
  font-family: Arial;
  text-align: center;
  padding: 20px;
}
h1 {
  color: teal;
}
h2 {
  color: darkorange;
  margin-top: 20px;
}
p {
  color: darkslategray;
}

Point out how each selector matches a part of the page. Tell students to change the colours to their own favourites.

⚠ Watch for: a broken page after a copy-paste — usually a missing } or ;. Remind them: if the style suddenly stops working, look at the line just above where it broke.

Ask: "Which colour will you change first to make it yours?" (Quick round of answers.)

0:25 · Activity — Build your site (25 min)

Activity — Build & Share Your Site (≈25 min). This is the unit's build project. Each student builds their own multi-section page in a Pen. The finished page must include:

1. One <h1> title.
2. Three sections, each with an <h2> heading and at least one <p>.
3. One <img> with a real image link.
4. CSS styling — at least a background colour, a heading colour, and some spacing.
5. One <a> link to a website they like (bonus: a "find out more" link in one section).

Circulate (or take screen-shares) to help. With 5 minutes left, have everyone Save their Pen and copy the share link, ready to present.

Debrief: "You planned it, built it, and styled it — that's exactly how real websites are made."

0:50 · Check for understanding + share and present (7 min)

Go around the class. Each student shares their screen or link and says one sentence about their page. As they present, quietly check the answer key below. Answer key (for you):

1. Point to your <h1> — what makes it different from your <h2> sections? → <h1> is the main title (biggest); <h2> marks each section below it.
2. Show me one thing your CSS changed. → Any correct example — a background colour, heading colour, font, or spacing.
3. Which part of your code is the picture, and what does its src hold? → The <img> tag; src holds the web address of the picture.

0:57 · Wrap-up + homework (3 min)

• Give a round of applause — every student built a real website from scratch.
• Homework — Keep Building: add one new thing to your page at home — a bullet list, a new section, a fun colour, or another picture. Show a family member your website and explain what HTML and CSS each do.

Teaching notes

• Correct this misconception: "A finished website has to be huge and perfect." Reframe: a great first site is clear, organised, and personal — three tidy sections beat twenty messy ones.
• Fast finishers (extension): challenge them to wrap each section in a styled "card." Add a class to a section's heading and paragraph and style a boxed look:

.card {
  background-color: white;
  padding: 15px;
  margin: 15px;
  border: 2px solid teal;
}

Then have them explain how padding, margin, and border work together to make the card. Another extension: add a second image or a bullet list with <ul> and <li>. - Low-tech fallback: if devices are limited, build one class website together on a shared screen — each student contributes one section (dictate a heading, a line, and a colour), then everyone "owns" a part of the finished page. For presenting, students can describe their planned page from their paper sketch.

Practice set

Assign in class or as homework. Answers are for you, after the arrow.

1. What two languages did you combine to build your site, and what does each do? → HTML (what's on the page) and CSS (how it looks).
2. Write the HTML for a new section heading that says "My Hobbies." → <h2>My Hobbies</h2>
3. You want each <h2> section heading to be purple. Write the CSS. → h2 { color: purple; }
4. Your page looks squashed against the edges. Which CSS property adds breathing room, and where would you put it? → padding on the body, e.g. body { padding: 20px; }.
5. After a copy-paste, all your CSS stopped working. What's the most likely cause? → A missing } or ; — check the line just above where the styling broke.
6. Name the five things your finished page should have. → An <h1> title, three <h2> + <p> sections, an <img>, CSS styling, and a link <a>.

Going deeper (optional)

• Give the page a navigation menu. Show that links can jump to sections on the same page. Add an id to a heading (<h2 id="fav">My Favourites</h2>) and a link that jumps to it (<a href="#fav">Jump to Favourites</a>). Let students test the jump. Land the point: real websites use links like these for menus.
• Publish for real. Explain that CodePen already gives every saved Pen a web address they can send to family. Show the Share → Copy Link button. Mention that grown-up developers use tools like this to put pages on the internet so anyone in the world can visit — a nice bridge to what comes next in their learning.

Common mistakes & fixes

• Mistake: keeping the example text (name "Sara," etc.) instead of personalising. → Fix: change every line to be about the student; the template is only a starting shape.
• Mistake: all three sections run together with no headings. → Fix: start each section with its own <h2> so the page is clearly organised.
• Mistake: the whole page loses its style after a paste. → Fix: hunt for a missing } or ; on the line just above where styling stopped.
• Mistake: the image link is broken or has no quotes. → Fix: use a real link inside quotes, e.g. <img src="https://picsum.photos/300/200" alt="...">.
• Mistake: forgetting to Save before presenting, so the share link is empty. → Fix: click Save first, then Share → Copy Link.

Vocabulary

Resources

• CodePen — build, save, and share your finished page (main tool).
• Lorem Picsum — free placeholder photos for your sections.
• MDN — Learn web development — where curious students go next.
• W3Schools — Try it Editor — another sandbox to keep practising at home.

Next session

This is the final session of Course 1's learning units — students are ready for the Projects & Assessment section.