Skip to main content

Ages 9–12 · 4-Year Cycle

The Programming Learning Portal

One personal website that grows with you — from your first HTML tag at age 9 to a published multi-page hub at 12. Follow the curated free resources, build each year's capstone, and your instructor signs off every milestone. Your work is never restarted; it's only layered.

Explore the curriculumSkill overview →

Your progress

0/16 milestones

Approved by your instructor

Year 1 · HTML Foundations & CSS Basics

The Digital Identity

Write your first real web page — structure it with HTML tags and paint it with CSS colours, fonts and spacing.

Capstone: A navy/teal navbar, hero photo + greeting, biography section and Sprout Club footer.

0/4 approved

Concepts you'll learn

<!DOCTYPE html><html> <head> <body><h1>–<h3><p><header> <nav> <main> <footer><img src alt>background-colorcolorfont-familymargin & paddingborder

Smart Saver target · age 9

R16 / week → R800 this year

R2 050 cumulative in your Smart Saver by the end of this year.

Study material

Year 1 lessons

Read these first — then build the milestones in the sandbox.

  1. The page skeleton every website shares

    Every page starts the same way: <!DOCTYPE html> tells the browser this is modern HTML, <html> wraps everything, <head> holds settings like the page title, and <body> holds what people actually see.

    html example

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body>
    <!-- everything visitors see lives here -->
  </body>
</html>

  2. Headings, paragraphs & pictures

    <h1> is your biggest heading (use one per page), then <h2>, <h3>. <p> holds sentences. <img> needs two important attributes: src (the picture file) and alt (words describing it for screen readers and broken links).

    html example

    <h1>Hi, I'm Themba!</h1>
<h2>About me</h2>
<p>I'm 9 and I love chess.</p>
<img src="me.jpg" alt="Smiling boy in a green shirt" />

  3. Sections that mean something

    <header> tops the page, <nav> holds your links, <main> wraps your unique content, and <footer> closes the page. Browsers and search engines understand these tags — they're better than plain <div>s.

    html example

    <header>
  <nav>Hi, I'm Themba</nav>
</header>
<main> ... your story ... </main>
<footer>&copy; 2026 · Sprout Club</footer>

  4. Paint it with CSS

    CSS rules have a selector and braces: body { background-color: #0B2545; }. Try background-color, color (text), font-family, padding (space inside a box), margin (space outside) and border (a sharp outline).

    css example

    body {
  background-color: #f4f7f6;
  color: #0B2545;
  font-family: Arial, sans-serif;
}
header {
  background-color: #0B2545;
  color: #ffffff;
  padding: 16px;
  border: 2px solid #008080;
}
Curated resources

Learn from the experts

Free, verified sites — everything opens in a new tab.

Profile milestones

Year 1 checklist

0/4 approved

  1. Build the top navbar

    Awaiting sign-off

    Add a <header> with a <nav> that greets the world: "Hi, I'm [Your Name]".

  2. Add the hero photo & greeting

    Awaiting sign-off

    A big <h1> welcome plus a profile <img> with helpful alt text.

  3. Write your biography

    Awaiting sign-off

    Use a <main> section with headings and paragraphs for grade, favourite subject and goals.

  4. Finish the footer bar

    Awaiting sign-off

    Close the page with a <footer> holding the © line and the Sprout Club tag.

Finish the work, then show it to your instructor. They approve each milestone from the admin panel and your progress updates here automatically.