Mit Bedeutung und Struktur beginnen
HTML dient nicht nur dazu, Text auf einem Bildschirm zu platzieren. Überschriften, Bereiche, Links, Listen und Formulare zeigen Menschen und Browsern, wie eine Seite aufgebaut ist. Eine durchdachte Dokumentstruktur erleichtert Navigation, Pflege und spätere Erweiterungen.
Das Layout für jede Bildschirmgröße gestalten
CSS macht aus der Struktur ein visuelles Erlebnis. Du übst Abstände, Hierarchie und responsive Layouts, damit die Seite auf dem Smartphone ebenso lesbar bleibt wie auf einem großen Bildschirm. Es geht nicht darum, ein Desktop-Layout zu verkleinern, sondern Inhalte natürlich anzupassen.
Verhalten ergänzen, ohne Klarheit zu verlieren
JavaScript-Grundlagen führen in Interaktionen ein: auf Eingaben reagieren, die Oberfläche aktualisieren und Verhalten mit Inhalten verbinden. Barrierefreiheit und SEO werden zu praktischen Prüfungen: Können Menschen die Seite bedienen und Suchsysteme ihre Struktur verstehen? Die Stufe verbindet diese Grundlagen in sauberen, responsiven Seiten.
Vom Konzept zu funktionierendem Code
Diese Ausschnitte zeigen, wie die Inhalte jeder Stufe in echten Projekten aussehen. Sie sind Ausgangspunkte zum Lesen, Hinterfragen, Anpassen und Testen — kein Code zum blinden Kopieren.
Inhalt sinnvoll strukturieren
Die Seite verwendet einen Hauptbereich, eine klare Überschriftenhierarchie und eine echte Liste. Das CSS-Grid kombiniert minmax() und auto-fit, damit sich Karten dem verfügbaren Platz anpassen.
<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>Eine barrierefreie Interaktion ergänzen
Der Button steuert seine Antwort und veröffentlicht den Zustand mit aria-expanded. Ein nativer Button ist bereits per Tastatur bedienbar; JavaScript aktualisiert Anzeige und den Zustand für assistive Technologien.
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;
});
});Lesen und selbst anpassenÄndere eine Anforderung, überlege dir das Ergebnis und überprüfe deine Annahme durch Ausführen. Erkläre im Review deine Entscheidung und eine mögliche nächste Verbesserung.