🚀 Projekt: Meine erste professionelle Web-Seite (mit KI-Coaching)

Schüler: ___________________________ Datum: ___________________________

Nachdem wir die Grundlagen von HTML, CSS und JavaScript kennengelernt haben, entwickeln wir jetzt ein echtes Projekt! Wir nutzen dafür einen KI-Code-Coach, der uns wie ein Profi-Entwickler bei der Arbeit unterstützt.

Wichtig: Dein Ziel ist es nicht nur, Code per Copy/Paste zu bekommen, sondern die Struktur und das Design professionell (semantisches HTML, Responsive Design) umzusetzen.

Idee und Konzept

Bevor wir coden, überlegen wir, was wir bauen. Wähle eines der Themen aus:

Nutze den Menüpunkt "Struktur-Hilfe" oder stelle eine eigene Frage.
"Hallo KI, ich möchte ein Projekt zum Thema '[THEMA]' bauen. Kannst du mir ein Themenkonzept für 3 Unterbereiche vorschlagen?"

Schreibe hier die 3 Bereiche fest, die du auf deiner Seite haben möchtest:

  1. Subjekt: ________________________
  2. Subjekt: ________________________
  3. Subjekt: ________________________

Phase 1: Das HTML-Grundgerüst

Fangen wir mit dem "Skelett" der Seite an. Wir wollen modernen, sauberen Code schreiben.

Schritt 1: Semantisches HTML

Wir nutzen keine <div>-Suppe, sondern die passenden Tags.

Frage nach Struktur:
"Erstelle mir ein semantisches HTML5-Grundgerüst (ohne Text füllen) für eine Seite mit Header, Navigation, 3 Sections und Footer."
Deine Aufgabe: Speichere den Code als index.html in VS Code und öffne ihn im Browser.

Phase 2: Inhalt & Design mit CSS

Nun machen wir die Seite schön. Wir nutzen CSS für das Layout und die Farben.

Schritt 2: Main Content füllen

Gib deinen Sections (Header, Sections, Footer) jetzt Inhalte (Text, Bilder) und gib ihnen Klassen-Namen, um sie stylen zu können.

Checkliste:
  • Haben alle <img>-Tags ein alt-Attribut? (Wichtig für Screenreader!) ☐
  • Sind Überschriften logisch gegliedert (h1 bis h3)? ☐
  • Haben deine Buttons oder Links sprechende Namen? ☐

Schritt 3: Responsives Layout

Unsere Seite soll auch auf dem Handy gut aussehen. Wir nutzen Flexbox oder Grid.

Frage nach Design:
"Ich habe 3 Boxen in einem Container. Erstelle mir ein CSS-Flexbox-Layout, das die Boxen nebeneinander auf dem Desktop, aber untereinander auf dem Handy zeigt."

Frage nach>:

Phase 3: Interaktivität mit JavaScript

Jetzt wollen wir Leben in die Seite bringen (Mouse-Effekte, Animationen, Tools).

Schritt 4: Web Animations API oder Effects

Professionelle Seiten nutzen heute kaum noch alert(), sondern sanfte Animationen.

Frage nach Animation:
"Zeige mir einen JavaScript-Code für eine sanfte 'Fade-in' Animation, wenn der Nutzer auf meine Seite scrollt."

Schritt 5: Interaktive Komponenten

Baue eine Funktion, die dem User hilft.

Ideen:
  • Ein Galerie-Filter (zeige nur "Menu" oder "Drink").
  • Ein Kontakt-Formular-Check (prüft, ob @-Zeichen in E-Mail).
  • Ein einfacher Slider (Bildwechsler).
Frage nach Logik:
"Zeige mir einen EventListener-Code, der beim Klick auf einen Knopf die Hintergrundfarbe ändert."

Phase 4: Code-Review & Optimierung

Fertig? Fast! Jetzt kommt der Teil, der dich zum Profi macht: Der Code-Check.

Lade deinen gesamten Code hoch!

Kopiere deine index.html, style.css und script.js in ein Dokument oder nutze den Upload-Button.

Nutzung des 🔍 Debugging-Modus aktivieren!
"Kannst du meinen Code überprüfen und mir sagen, wie ich ihn sauberer (Clean Code) machen kann? Achte auf Barrierefreiheit."

Analyse der KI: Notiere hier Verbesserungsvorschläge:

Fehlerbehebung (Bugfixing)

Falls deine Buttons nicht klicken oder das Layout zerspringt:

Finish: Dokumentation

Dein Projekt ist fertig! Nun dokumentieren wir den Erfolg.

Letzter Schritt: Exportieren

Nutze den PDF-Export des Tools, um deine Gespräche mit der KI, wichtige Code-Schnipsel und Erklärungen als Dokument zu speichern.

Was schreibt dein Code-Coach über dein Projekt in der Zusammenfassung?

🎉 Zertifizierung

Wenn du alle Schritte absolviert hast, hast du eine responsive, barrierefreie und interaktive Website gebaut. Herzlichen Glückwunsch!


Zertifikat: Web-Developer Junior
Datumsstempel: ____________________