Modul 3 – Deine erste Webseite

🏠 Kursübersicht · Modul 3 von 8

🎯 Lernziele

Nach diesem Modul kannst du …

⏱️ Zeit: ca. 45 Minuten · Voraussetzungen: Modul 2 (ein startklares Werkzeug)

Warum mit einer Webseite anfangen?

Webseiten eignen sich perfekt für den Einstieg: Änderungen werden sofort sichtbar. Eine Webseite besteht aus drei Bausteinen, die die KI für dich schreibt:

Du musst keinen davon beherrschen. Du beschreibst – die KI baut.

🛠️ Praxis 1: Eine To-do-Liste in 4 Schritten

Wir bauen eine kleine Aufgabenliste. Folge dem 4-Schritte-Zyklus aus Modul 1.

Schritt 1 – Beschreiben

Gib deinem Werkzeug (opencode oder Chat-KI) diesen Prompt:

Erstelle eine einzelne Datei index.html mit einer einfachen To-do-Liste.
Man soll oben eine Aufgabe in ein Textfeld eingeben und mit einem Button
hinzufügen können. Aufgaben werden in einer Liste angezeigt und lassen sich
durch Anklicken abhaken (durchgestrichen). Halte das Design schlicht und
freundlich. Baue keine unnötige Komplexität ein.

Schritt 2 – Generieren lassen

Die KI erzeugt die Datei index.html. (Bei Weg 0: Code in eine Datei index.html kopieren.)

Schritt 3 – Testen

Öffne index.html per Doppelklick im Browser. Prüfe:

🧠 Verstehens-Check (gehört ab jetzt zu jedem Projekt): Bevor du nachsteuerst, überlege zuerst selbst: Was passiert wohl im Code, wenn ich eine Aufgabe anklicke? Formuliere deine Erwartung in einem Satz. Frage dann die KI:

Erkläre mir in einfachen Worten, Schritt für Schritt: Was passiert, wenn ich
eine Aufgabe anklicke und sie durchgestrichen wird?

Vergleiche die Antwort mit deiner Erwartung. Erst die eigene Vorhersage macht aus Zuschauen Lernen – warum, steht in Modul 1.

Schritt 4 – Nachsteuern

Beschreibe Wünsche oder Fehler in Alltagssprache – nicht den Code. Probiere nacheinander:

Füge einen Button hinzu, der alle erledigten Aufgaben ausblendet.

Die Karten sind auf dem Smartphone schlecht lesbar. Mach das Layout responsiv,
sodass es auf Handy und Desktop gut aussieht.

Mach das Design ruhiger und professioneller. Verwende dezente Farben.

Nach jeder Änderung: Browser neu laden und erneut testen. Genau das ist der Vibe-Coding-Zyklus.

Das Prompt-Rezept

Gute Prompts folgen einem einfachen Bauplan. Diese Vorlage liegt auch als material/prompt-vorlage.md zum Kopieren bereit:

Ich möchte per Vibe Coding ein kleines Projekt erstellen.

Ziel:
[Beschreibe, was am Ende funktionieren soll.]

Zielgruppe:
[Wer nutzt es?]

Wichtige Funktionen:
1. [...]
2. [...]
3. [...]

Technischer Rahmen:
[Webseite mit HTML/CSS/JavaScript]

Bitte erstelle eine einfache erste Version.
Erkläre kurz, wie ich sie starte.
Halte die Struktur übersichtlich.
Baue keine unnötige Komplexität ein.

🛠️ Praxis 2 (optional): Eine kleine Quiz-Seite

Wenn du Lust auf mehr hast, baue eine zweite Seite:

Erstelle eine interaktive Webseite zum Thema "Vibe Coding". Sie soll haben:
eine Startansicht mit Titel, drei Infokarten mit kurzen Texten, und ein kleines
Quiz mit 3 Fragen, das am Ende die Punktzahl anzeigt. Modernes, ruhiges Design.

Ein fertiges Beispiel genau dieser Art liegt im Kurs unter beispiele/webseite/ – öffne dort index.html im Browser und sieh dir an, was möglich ist. (Es wurde selbst per Vibe Coding gebaut.)

Worauf achten? Sinnvolle Checks für jede Webseite: Wird alles korrekt angezeigt? Funktionieren Buttons und Formulare? Sieht es auf dem Handy gut aus? Gibt es Fehler in der Browser-Konsole (F12)?

🎓 Varianten für dein Fach

Die To-do-Liste ist nur das Übungsstück. Mit demselben Vorgehen baust du Werkzeuge für deinen eigenen Unterricht – ersetze einfach den Prompt aus Praxis 1, der Rest des Zyklus (testen, Verstehens-Check, nachsteuern) bleibt gleich:

Erstelle eine einzelne Datei vokabeltrainer.html: Ich kann Wortpaare
(Deutsch – Fremdsprache) eingeben, dann fragt mich die Seite die Vokabeln in
zufälliger Reihenfolge ab und zählt richtige Antworten. Schlichtes Design.

Erstelle eine einzelne Datei quiz.html mit einem Multiple-Choice-Quiz zum Thema
[dein Thema, z. B. "Photosynthese, Klasse 7"]. 5 Fragen, sofortiges Feedback
pro Frage, am Ende die Punktzahl. Die Fragen gebe ich dir gleich vor.

Erstelle eine einzelne Datei gruppen.html: Ich füge eine Namensliste ein
(ein Name pro Zeile), wähle eine Gruppengröße und bekomme per Klick eine
zufällige Gruppeneinteilung – gut lesbar fürs Whiteboard.

⚠️ Auch hier gilt Modul 6: keine echten Schülernamen in Cloud-KIs eingeben – nimm für Tests erfundene Listen.

💡🎓 Hinweise

💡 Für Schüler: Trau dich, die Seite „kaputtzumachen”. Bitte die KI um wilde Ideen – z. B. „mach einen Dark-Mode-Schalter” oder „lass es bei jedem Klick kurz wackeln”. Du lernst am meisten, wenn du ausprobierst.

🎓 Für Lehrkräfte: Dieses Modul passt zum Einsatzszenario „Prototypen für Projektarbeit” (ab Klasse 7). Der Lerngewinn liegt im Beschreiben und Testen der Nutzererfahrung – nicht im Code. Eine Doppelstunde reicht für die To-do-Liste samt zwei Nachbesserungen.

✅ Selbstcheck

1. In welchem Schritt beschreibst du einen Fehler – und wie formulierst du ihn?

Lösung Im Schritt **Nachsteuern**. Du beschreibst das **Verhalten/Problem** („abgehakte Aufgaben verschwinden nicht"), nicht eine konkrete Codezeile.

2. Wozu dienen HTML, CSS und JavaScript – grob?

Lösung HTML = Struktur/Inhalt, CSS = Aussehen/Design, JavaScript = Verhalten/Interaktivität.

3. Warum ist eine Webseite ein guter Einstieg ins Vibe Coding?

Lösung Weil Änderungen **sofort im Browser sichtbar** werden – der Test-Schritt ist schnell und direkt.

4. Warum sollst du beim Verstehens-Check zuerst deine eigene Erwartung formulieren?

Lösung Weil die Vorhersage dich zwingt, **aktiv zu denken**. Eine Erklärung nur zu lesen ist passiv – erst der Vergleich zwischen deiner Erwartung und der Antwort zeigt dir, was du wirklich verstanden hast (und was nicht).

📋 Aufgaben

Abhaken speichert direkt in dieser Datei. In MindGraph Notes erscheinen diese Aufgaben automatisch im Tasks-Widget und am Fälligkeitstag im Focus. Übersicht & Kursfahrplan: Aufgaben.md.

⬅️ Modul 2 · 🏠 Übersicht · ➡️ Modul 4: Ein Python-Skript