Lesson · Anleitung · 3 min

`mkdir meine-webseite`, hineinwechseln und `index.html` sowie `style.css` anlegen.

• `mkdir meine-webseite` und `cd meine-webseite`
• `touch index.html` und `touch style.css`
• Zielbaum: meine-webseite/ → index.html + style.css

Lesson · Anleitung · 1 min

`index.html` ist der Standardname für die Startseite — Browser und Server erkennen ihn automatisch.

• `index.html` = Einstiegspunkt der Seite
• Browser und Server suchen diese Datei zuerst

Lesson · Anleitung · 6 min

Von `<!DOCTYPE html>` über `lang="de"` bis zu charset, viewport, title und CSS-Link.

• `<!DOCTYPE html>` sagt dem Browser: HTML5
• `<html lang="de">` startet das Dokument auf Deutsch
• `<head>` = unsichtbare Metadaten, Titel, CSS-Verknüpfung
• `<meta charset="UTF-8">` für korrekte Umlaute
• `viewport` skaliert die Seite auf Handys richtig
• `<body>` enthält den sichtbaren Inhalt

Lesson · Anleitung · 2 min

Doppelklick auf `index.html` oder auf dem Mac `open index.html`.

• Doppelklick öffnet den Standardbrowser
• Mac-Terminal: `open index.html`

Practice · Anleitung · 3 min

In Cursor/VS Code die Erweiterung Live Server nutzen — die Seite aktualisiert sich bei jeder Speicherung.

• Erweiterung „Live Server“ installieren
• Rechtsklick auf `index.html` → „Open with Live Server“
• Speichern → Browser aktualisiert automatisch

Lesson · Anleitung · 8 min

Von `h1`/`h2` und `p` über Links und Bilder bis zu Listen, Containern und Buttons.

• `<h1>` / `<h2>` Überschriften, `<p>` Absätze
• `<a href="…">` Links, `<img src alt>` Bilder
• `<ul>` / `<li>` ungeordnete Listen
• `<div>` Block-Container, `<span>` Inline für Textteile
• `<button>` klickbare Schaltfläche

Lesson · Anleitung · 2 min

`<link rel="stylesheet" href="style.css">` im `<head>` verbindet Design und Struktur.

• Bereits im HTML-Grundgerüst im `<head>` erledigt
• Ab jetzt: alles in `style.css` wirkt auf `index.html`

Lesson · Anleitung · 6 min

Universal-Reset (`*`), body-Schrift/Farben und gezielte Regeln für `h1` und `p`.

• `* { margin: 0; padding: 0; box-sizing: border-box; }`
• `body` mit font-family, Hintergrund, Textfarbe, line-height
• `h1` Farbe/Größe, `p` mit margin-bottom

Lesson · Anleitung · 4 min

Element (`p`), Klasse (`.karte`) und ID (`#header`) — Aufbau: Selektor { Eigenschaft: Wert; }.

• Element: `p { }` trifft alle `<p>`-Tags
• Klasse: `.karte { }` trifft `class="karte"`
• ID: `#header { }` trifft das eine `id="header"`

Practice · Anleitung · 5 min

HTML mit `class="karte"`, CSS mit Hintergrund, Padding, Radius und Schatten.

• `<div class="karte">` im HTML
• `.karte { background; padding; border-radius; box-shadow }`
• Klassen (`.name`) mehrfach, IDs (`#name`) nur einmal pro Seite

Lesson · Anleitung · 5 min

Ein `.container` mit `display: flex` richtet Kinder aus, zentriert und verteilt sie.

• `display: flex` aktiviert Flexbox
• `gap: 1rem` Abstand zwischen Kindern
• `justify-content` und `align-items` für Ausrichtung
• Flexbox = Basis für die meisten modernen Layouts

Practice · Anleitung · 8 min

Ordner anlegen, Grundgerüst und erste CSS-Regeln einfügen, Seite öffnen.

• `mkdir` / `touch index.html style.css` / `open index.html`
• HTML-Skelett mit h1 und p
• body- und h1-Styles in style.css

Bridge · Anleitung · 1 min

HTML = Struktur (was ist da). CSS = Aussehen (wie sieht es aus).

• Immer zuerst HTML-Struktur mit richtigen Tags
• Dann mit CSS gestalten
• Speichern → Browser aktualisieren (oder Live Server)