Start with meaning and structure
HTML is more than a way to place text on a screen. Headings, landmarks, links, lists and forms communicate how a page is organized to both people and browsers. A thoughtful document structure makes content easier to navigate, maintain and extend as the page grows.
Make the layout work at every size
CSS turns that structure into a visual experience. You will practise spacing, hierarchy and responsive layout so the page remains readable on a narrow phone and a wide display. The goal is not to shrink a desktop composition, but to make the content adapt naturally.
Add behavior without losing clarity
JavaScript fundamentals introduce interaction: responding to input, updating the interface and connecting behavior to page content. Accessibility and SEO then become practical checks on the result—can people navigate it, and can search systems understand its structure? The stage brings these foundations together in clean, responsive pages.
From concept to working code
These short excerpts show how the ideas in each stage appear in real projects. They are starting points to read, question, adapt and test—not code to paste without understanding.
Give content a meaningful structure
The page is organized with a main landmark, a clear heading hierarchy and a real list. The CSS grid uses minmax() and auto-fit so cards wrap as space changes, instead of relying on a fixed desktop layout.
<main class="program-page">
<section class="intro" aria-labelledby="page-title">
<p class="eyebrow">Community learning</p>
<h1 id="page-title">Build your first web project</h1>
<p>Learn by making a page people can actually use.</p>
<a class="button" href="#apply">Explore the program</a>
</section>
<section aria-labelledby="outcomes-title">
<h2 id="outcomes-title">What you will practise</h2>
<ul class="outcomes">
<li>Structure content with HTML</li>
<li>Shape a responsive layout with CSS</li>
<li>Add useful behavior with JavaScript</li>
</ul>
</section>
</main>
<style>
.outcomes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
</style>Make an interaction accessible
The button controls its answer and exposes its state with aria-expanded. The native button already supports keyboard activation; JavaScript updates both the visible answer and the state assistive technology announces.
const questions = document.querySelectorAll("[data-faq]");
questions.forEach((question) => {
const button = question.querySelector("button");
const answer = question.querySelector("[data-answer]");
button.addEventListener("click", () => {
const isOpen = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!isOpen));
answer.hidden = isOpen;
});
});Read it, then make it yoursChange one requirement, predict what should happen, then run the code and check your prediction. In review, be ready to explain the trade-off you chose and one improvement you would make next.