de:modul:m291:learningunits:lu01:aufgaben:a_landingpage

Dies ist eine alte Version des Dokuments!

Projekt 1: Landingpage Hero Section (Light/Dark Mode)

Landing Page preview

Projektziel: Sie setzen eine Hero Section pixel-nah nach Figma um und bauen einen Light/Dark-Mode Switch mit JavaScript.

→ Vorwissen: UI-Elemente lesen (Figma → HTML)

Lernziele

  • HTML-Struktur mit header/nav/main/section bauen
  • CSS: Variablen, Typografie, Flexbox, Responsive (Media Query)
  • JS: DOM-Elemente abfragen, EventListener, Klassen toggeln

Material

  • Figma-Design + Assets (SVG/PNG)
  • Starter-Ordner (index.html, resources/)
  • Live Server / Preview im Browser

Ablauf in Etappen

Etappe A: Design analysieren (15 Min.)

  1. Identifizieren Sie: Header, Navigation, Hero, 2-Spalten-Layout, Switch
  2. Messen Sie Abstände und Font-Sizes genau (nicht raten).
  3. Legen Sie eine Farbpalette fest → als CSS-Variablen.

Etappe B: HTML-Struktur (30–40 Min.)

  1. <header> erstellen: Logo + <nav> + Switch
  2. <main> und <section> für Hero
  3. Textblock (h3/h1/p) und Button-Gruppe
  4. Hero-Bild mit srcset einbauen

Check: Wenn CSS/JS aus ist, ist die Seite trotzdem logisch lesbar.

Etappe C: CSS-Basics (30–45 Min.)

  1. Reset: * { margin:0; padding:0; box-sizing:border-box }
  2. :root Variablen (Farben, Fontgrössen)
  3. Typografie: font-family, font-weight, line-height
  4. Max-Width + Padding in .main-wrapper

Etappe D: Layout mit Flexbox (45 Min.)

  1. Header: Logo links, Navigation mittig, Switch rechts
  2. Hero: 2 Spalten (Text links, Bild rechts)
  3. Buttons als Gruppe (display:flex, gap)

Etappe E: Responsive (30–45 Min.)

  1. Ab einer Breite (z.B. < 1024px):
    1. Hero wird flex-direction: column-reverse
    2. Abstände/Fontgrössen mit Variablen anpassen

Etappe F: JS Interaktivität (30–45 Min.)

1. Elemente holen:

  1. document.getElementById(…)
  2. document.documentElement

2. Funktion applyTheme(…):

  1. Klasse theme-dark auf <html> toggeln
  2. Logo-Datei wechseln

3. EventListener:

  1. change auf Checkbox (nicht onclick im HTML!)

Debugging-Checkliste

  • Öffnen Sie DevTools → Console
  • Prüfen Sie, ob Selektoren etwas finden (nicht null)
  • Prüfen Sie Pfade zu ./resources/…

Abgabe-Kriterien

  1. Struktur semantisch (nav als Liste)
  2. Layout desktop + mobile korrekt
  3. Switch funktioniert und wechselt Farben + Logo
  4. Code lesbar: sprechende Namen, wenig “magische” Selektoren

Stretch Goals

  1. Mobile Menu (Hamburger) als echtes button mit aria-expanded
  2. “prefers-color-scheme” als Default berücksichtigen
  3. Features als ul/li statt span
  • de/modul/m291/learningunits/lu01/aufgaben/a_landingpage.1769267650.txt.gz
  • Zuletzt geändert: 2026/01/24 16:14
  • von gkoch