Web-Entwicklung Masterplan

10 Doppelstunden à 100 Minuten

Editor

Vom ersten Tag zum eigenen Projekt

Dieser Lehrpfad führt Schüler schrittweise von den absoluten Grundlagen bis zur Veröffentlichung einer eigenen, responsiven Website.

1

Hallo Internet! (Einstieg)

WOCHE 1

Wie funktioniert das Web? Erste HTML-Tags und die "Anatomie" einer Website.

  • Was ist HTML?
  • Tags: h1, p, body, head
2

Inhalte & Medien

WOCHE 2

Die Website wird lebendig: Bilder einbetten, Videos verlinken und Listen erstellen.

  • img-Tag & Alt-Texte
  • Listen (ul, ol, li)
3

Make it Pretty: CSS Intro

WOCHE 3

Einführung in das Design. Selektoren, Farben und Schriftarten.

  • color & background
  • font-family & size
4

Box-Modell & Abstände

WOCHE 4

Abstand halten! Margin, Padding und Border verstehen lernen.

  • Padding vs. Margin
  • Border-Radius (runde Ecken)
5

Layout mit Flexbox (Teil 1)

WOCHE 5

Das Geheimnis moderner Layouts: Elemente nebeneinander anordnen.

  • display: flex
  • justify-content & align-items
6

Projektplanung & Wireframes

WOCHE 6

Kein Code ohne Plan. Wir skizzieren die eigene Website auf Papier.

  • Skizzen zeichnen
  • Themenfindung (Hobby/Portfolio)
7-9

Die Coding-Phase (Projektarbeit)

WOCHE 7-9

Drei Wochen intensive Arbeit am eigenen Projekt. Der Lehrer wird zum Coach.

Fokus-Themen während der Arbeit:

Fehlersuche, Clean Code, Google-Suche für Fortgeschrittene.

10

Show & Tell (Release)

WOCHE 10

Präsentation der Ergebnisse. Feedback-Runde und gemeinsames Bestaunen der Websites.

  • PIZZA & CODE
  • ZERTIFIKATE

Pro-Tipps für die 10 Wochen

Regelmäßigkeit

Lass die Schüler jede Stunde mit einer "5-Minuten-Challenge" beginnen (z.B. Hintergrundfarbe ändern), um wieder reinzukommen.

Fehlertoleranz

Etabliere eine "Frag-zuerst-deinen-Nachbarn"-Regel, bevor sie dich fragen. Das fördert das gemeinsame Lernen.

Speichern

Da wir Firebase nutzen, werden die Projekte gespeichert. Erinnere sie trotzdem daran, Versionen (Kopien) zu erstellen.