Intro

Was ihr nach diesem Kapitel können solltet

Ihr solltet ein vorgegebenes Design einspaltig nachbauen können, sodass es visuell übereinstimmt. Dafür verwendet ihr ausschließlich CSS über externe Stylesheets - noch ganz ohne Flexbox/Grid.

• Farben aus der Vorlage korrekt übernehmen (Hintergrund, Text, Buttons, Akzente) - per Hex/RGB/HSL, idealerweise als CSS-Variablen definiert
• Schriftarten passend wählen bzw. einbinden (Google Fonts o.ä.) und mit sinnvollem Font-Stack als Fallback versehen
• Schriftgrößen & -gewichte an die Vorlage anpassen (Überschriften vs. Fließtext unterscheiden), Einheiten mit rem
• Abstände über das Box-Modell nachbauen & in eigenen Worten das Boxmodel erklären: padding, margin, border, inkl. box-sizing: border-box
• einfache Dark-Mode-Unterstützung mit light-dark() und prefers-color-scheme

Recap: Wo stehen wir?

Bisher (Session 1–2): nur HTML

<article class="card">
  <h2>Produktname</h2>
  <p>Eine kurze Beschreibung des Produkts.</p>
  <button>In den Warenkorb</button>
</article>

• Das ist reine Struktur - der Browser zeigt es mit Standard-Styles an
• Kein Layout, keine Farben, keine Schriftgestaltung nach unseren Wünschen
• Heute: Wir fangen an, dieses HTML gestalten zu können

HTML = was es ist (Bedeutung/Struktur) CSS = wie es aussieht (Präsentation)