Zum Inhalt springen

Eine Kurs-Landingpage erstellen

Mittelstufe~15 Min.0/4 Schritte

Mit deiner Schule teilen

Das ist das Abschlussprojekt. Du hast Inhalte gamifiziert, Fortschritte verfolgt und adaptive Lernpfade erstellt – jetzt verpackst du alles in eine Kurs-Landingpage, die du mit Eltern, Kolleginnen und Kollegen und deiner ganzen Schule teilen kannst.

Eine großartige Landingpage erfüllt vier Aufgaben: ein Header, der den Kurs benennt und die Lesenden neugierig macht, eine Lektionsliste, die zeigt, was drin steckt, ein Anmelde-Call-to-Action, der die Registrierung mühelos macht, und ein Footer, der alles abrundet. Du baust jeden Abschnitt der Reihe nach zusammen.

Das ist die Seite, die du verschickst, wenn jemand fragt: „Woran arbeiten deine Schülerinnen und Schüler?" Bau sie gut und lass sie für deine Klasse sprechen.

Anweisungen

1

Füge einen Header-Bereich mit einem Verlaufshintergrund, dem Kurstitel in einem h1 und einem einzeiligen Untertitel hinzu.

Tipp: Verwende `<header class="bg-gradient-to-br from-indigo-900 via-gray-900 to-gray-900 py-20 px-6 text-center">` mit einem `<h1>` darin.

Wo kommt das hin?

<!-- Assemble your course landing page here -->

Schreib es in Zeile 11 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.

2

Füge eine Lektionsliste hinzu: eine „Was du lernen wirst"-Überschrift und eine ul mit abgerundeten Listenelementen (rounded-xl).

3

Füge einen Anmelde-Call-to-Action hinzu: eine hervorgehobene Box mit einem „Jetzt anmelden"-Button.

4

Schließe die Seite mit einem Footer ab, der die Seite abrundet und den Kurs erwähnt.

Dein Code

html
13 Zeilen
1
2
3
4
5
6
7
8
9
10
11
12
13

Live-Vorschau

Live-Vorschau