LESSON 01 · HTML · 90 MIN
Use headings, sections, links, lists and images to build a useful landing page.
Our eight-lesson journey: HTML → CSS → responsive design → JavaScript → interaction → data → Git → deployment.
CONNECT + SET UP · 0–10 MIN
Browser-only? Use free CodePen. Put only body content in its HTML panel; keep a local copy before leaving.
LEARN · INDEX.HTML · 10–17 MIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Opportunities Club</title>
</head>
<body>Hello, community!</body>
</html>Save and refresh. HTML describes meaning; head holds page information and body holds visible content. In CodePen, start with “Hello, community!” only.
LEARN · REPLACE BODY CONTENT · 17–25 MIN
<header>
<h1>Opportunities Club</h1>
<p>Discover free ways to learn together.</p>
</header>
<main>
<section id="about">
<h2>About our club</h2>
<p>Practise new skills with a teammate.</p>
</section>
</main>
<footer>A student community project</footer>Keep the body tags in your local file. Use one clear h1, then h2 section headings. Indent nested elements and match each closing tag.
BUILD · INSIDE MAIN, AFTER ABOUT · 25–40 MIN
<nav aria-label="Main">
<a href="#about">About</a>
<a href="#activities">Activities</a>
</nav>
<section id="activities">
<h2>Try an activity</h2>
<ul>
<li>Coding club: build with a friend.</li>
<li>Design challenge: sketch a helpful page.</li>
</ul>
<a href="#about">Learn about our club</a>
</section>Click both navigation links. Each #target must match an id. A link navigates; a button performs an action. Move nav before the about section once it works.
BUILD · IMAGE INSIDE ABOUT · 40–50 MIN
Create a club sketch and save it as club-sketch.png beside index.html. No names, faces or private details.
<img src="club-sketch.png" width="280"
alt="Sketch of a club page with coding and design activities">Change alt to describe your actual image. CodePen needs a facilitator-approved public image URL instead of this local path. Use only your own or permitted images; credit the source.
PEER REVIEW · 50–60 MIN
Career lens: web developers structure content; QA testers check what actually works. Swap roles and record one improvement.
CAPSTONE CHOICE · 60–65 MIN
Choose one of the three free-tool briefs, not a fourth project. Use fictional or facilitator-approved public content, never personal data.
CAPSTONE BUILD · 65–80 MIN
Example sections: purpose, what visitors can explore, how to use the project. HTML first; styling comes in Lesson 2.
SAVE + EXIT TICKET · 80–90 MIN
← → to navigate · F fullscreen
Slide 1 of 10