Knowledge Hub

Learning Journey

HTML & CSS Grundlagen

Frontend-Unterkategorie: Projektordner, HTML-Skelett, wichtige Tags, CSS-Regeln, Flexbox und der Merksatz Struktur vs. Aussehen.

Gesamtfortschritt

0%

Nächster Schritt: Projektordner anlegen

  1. 01

    Projektordner anlegen

    Mit mkdir, cd und touch die Dateien index.html und style.css für die erste Webseite anlegen.

    Offen · 2 Themen
    Öffnen
    • Einen Projektordner und die beiden Startdateien anlegen
    • Die Grundstruktur meine-webseite/ verstehen
    mkdirtouchindex.htmlstyle.css

    Ordner und Dateien erstellen

    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

    Warum index.html?

    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

  2. 02

    Das HTML-Grundgerüst

    Jede HTML-Datei beginnt mit demselben Skelett: DOCTYPE, html, head und body.

    Offen · 1 Themen
    Öffnen
    • Das HTML5-Skelett auswendig und sinnvoll befüllen
    • head (Metadaten) und body (sichtbarer Inhalt) unterscheiden
    DOCTYPEheadbodymetatitlelink

    Festes HTML-Skelett

    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

  3. 03

    Die Seite im Browser ansehen

    index.html öffnen — per Doppelklick, Terminal oder Live Server mit Auto-Reload.

    Offen · 2 Themen
    Öffnen
    • Die lokale HTML-Datei im Browser öffnen
    • Live Server als empfohlenen Workflow kennen
    openLive ServerBrowser

    Einfachste Methode

    Lesson · Anleitung · 2 min

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

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

    Live-Reload (empfohlen)

    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

  4. 04

    Wichtigste HTML-Elemente

    Überschriften, Absätze, Links, Bilder, Listen, div/span und Buttons für den Start.

    Offen · 1 Themen
    Öffnen
    • Die häufigsten Tags für Text, Links und Medien einsetzen
    • Block- (`div`) und Inline-Elemente (`span`) unterscheiden
    h1paimguldivspanbutton

    Tags zum Start

    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

  5. 05

    CSS mit HTML verknüpfen

    Im head die stylesheet-Verknüpfung setzen — danach wirkt style.css auf index.html.

    Offen · 1 Themen
    Öffnen
    • CSS über `<link rel="stylesheet">` einbinden
    • Verstehen: alles in style.css gilt für die HTML-Datei
    linkstylesheetstyle.css

    link im head

    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`

  6. 06

    Erste CSS-Regeln

    Reset, body-Typografie und Selektoren: Element, Klasse und ID.

    Offen · 2 Themen
    Öffnen
    • CSS-Regeln im Schema Selektor { Eigenschaft: Wert } schreiben
    • Element-, Klassen- und ID-Selektoren unterscheiden
    Selektormarginfont-familyKlasseID

    Reset und Grundstyles

    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

    Selektor-Typen

    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"`

  7. 07

    Klassen & IDs verwenden

    Wiederverwendbare Klassen für Karten-Layouts — IDs nur einmal pro Seite.

    Offen · 1 Themen
    Öffnen
    • Eine CSS-Klasse in HTML und CSS verbinden
    • Den Unterschied Klasse (mehrfach) vs. ID (einmal) kennen
    .karteclassidborder-radius

    Beispiel .karte

    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

  8. 08

    Layout mit Flexbox

    display: flex, gap, justify-content und align-items — Basis moderner Layouts.

    Offen · 1 Themen
    Öffnen
    • Elemente mit Flexbox nebeneinander und zentriert ausrichten
    • gap, justify-content und align-items gezielt einsetzen
    display: flexgapjustify-contentalign-items

    Flex-Container

    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

  9. 09

    Mini-Ablauf & Merksatz

    Copy-Paste-Vorlage von mkdir bis erste Styles — plus Merksatz HTML vs. CSS.

    Offen · 2 Themen
    Öffnen
    • Den Komplettablauf einmal durchspielen können
    • HTML = Struktur und CSS = Aussehen verinnerlichen
    Copy-PasteMerksatzHTMLCSS

    Kompletter Mini-Ablauf

    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

    Merksatz

    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)
Zurück zum Frontend-Hub