Kapitel 2: Entwicklungsumgebung einrichten

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ Die richtigen Entwicklungstools auswählen
✅ Visual Studio Code für Grid Layout einrichten
✅ Browser-Entwicklungstools effektiv nutzen
✅ Häufige Anfängerfehler bei der Praxis vermeiden

2.1 Entwicklungstools vorbereiten

🛠️ Empfohlene Toolkombination

Grundsatz: Einfach, effizient, kostenlos

Visual Studio Code (Editor) + Live Server (Plugin) + Chrome/Firefox (Browser)

📝 Tool-Übersicht

Tool	Zweck	Warum?
Visual Studio Code	Code-Editor	Kostenlos, mächtig, große Community
Live Server	Echtzeit-Vorschau	Sofortige Aktualisierung beim Speichern
Chrome/Firefox	Browser + DevTools	Beste Unterstützung für Grid Layout
Browser DevTools	Debugging	Visualisierung von Grid-Linien

💻 Visual Studio Code installieren

Schritt 1: Herunterladen

Offizielle Webseite: https://code.visualstudio.com/
Version wählen: Windows/Linux/macOS

Schritt 2: Installieren

Windows: .exe ausführen, Standardeinstellungen beibehalten
macOS: .dmg öffnen und in Programme verschieben
Linux: .deb oder .rpm installieren

Schritt 3: Erfolg prüfen

VS Code öffnen
Begrüßungsbildschirm erscheint

2.2 Erforderliche VS Code Plugins

🔌 Plugin 1: Live Server

Zweck: Automatische Seitenneuladung bei Dateiänderungen

Installationsschritte:

VS Code öffnen
Linke Seitenleiste: Erweiterungen (Extensions) klicken
Suche: Live Server
Autor: Ritwick Dey
Install klicken

Verwendung:

HTML-Datei öffnen
Rechtsklick im Editor → Open with Live Server
Browser öffnet sich automatisch (meist http://127.0.0.1:5500)
Änderungen speichern → Seite aktualisiert sich automatisch

🔌 Plugin 2: HTML CSS Support

Zweck: Bessere Autovervollständigung für HTML und CSS

Installationsschritte:

Erweiterungen suchen: HTML CSS Support
Autor: ecmel
Install klicken

🔌 Plugin 3: CSS Peek

Zweck: CSS-Definitionen direkt aus HTML heraus ansehen

Installationsschritte:

Erweiterungen suchen: CSS Peek
Autor: Pranay Prakash
Install klicken

🔌 Empfohlene zusätzliche Plugins

Plugin	Zweck	Empfohlen für
Prettier	Code-Formatierung	Alle
ESLint	Code-Überprüfung	Fortgeschrittene
Auto Rename Tag	Automatisches Umbenennen von HTML-Tags	HTML-Entwicklung
Bracket Pair Colorizer	Farbige Klammern	Bessere Lesbarkeit

2.2 Praxisumgebung einrichten

📁 Schritt 1: Projektordner erstellen

Windows:

powershell

# Terminal öffnen (PowerShell oder CMD)
mkdir grid-lernen
cd grid-lernen

macOS / Linux:

bash

mkdir grid-lernen
cd grid-lernen

📄 Schritt 2: Dateien erstellen

Mindestanforderung:

grid-lernen/
├── index.html       (Hauptseite)
└── style.css       (Stylesheets)

Erstellen mit VS Code:

VS Code öffnen
Datei → Ordner öffnen → grid-lernen wählen
In der Seitenleiste: Neue Datei klicken
index.html eingeben
Wiederholen für style.css

📝 Schritt 3: Grundgerüst schreiben

index.html:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Lernen</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Mein erstes Grid Layout</h1>
  
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

style.css:

css

/* Einfaches Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Container wird zum Grid-Container */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

/* Elemente stylen */
.item {
  background-color: #3498db;
  color: white;
  padding: 40px;
  text-align: center;
  font-size: 24px;
  border-radius: 8px;
}

/* Überschrift stylen */
h1 {
  text-align: center;
  margin: 20px 0;
  color: #2c3e50;
}

🚀 Schritt 4: Live Server starten

index.html öffnen
Rechtsklick → Open with Live Server
Browser öffnet sich automatisch
Ergebnis: 3-Spalten-Grid mit blauen Kacheln

2.3 Browser-Debugging-Tipps

🔍 Chrome DevTools verwenden

Schritt 1: DevTools öffnen

Tastenkombination: F12 oder Strg + Umschalt + I (Windows/Linux) / Cmd + Option + I (macOS)
Oder: Rechtsklick auf Seite → Untersuchen

Schritt 2: Grid-Layout untersuchen

Elements-Tab öffnen
Grid-Container auswählen (das Element mit display: grid)
Grid-Überlagerung anzeigen:
- In den Styles auf der rechten Seite nach display: grid suchen
- Ein kleines Grid-Symbol (Gitter) erscheint daneben
- Klicken Sie darauf, um die Grid-Linien im Browser anzuzeigen

Angezeigte Informationen:

🟢 Grid-Linien (nummeriert)
🔵 Grid-Tracks (Zeilen und Spalten)
🟡 Grid-Bereiche

🎨 Grid-Inspektor verwenden

Firefox (bester Grid-Inspektor):

DevTools öffnen (F12)
Inspektor-Tab → Layout-Panel
Grid-Bereich:
- Grid-Container auswählen
- Optionen aktivieren:
  - ✅ Grid-Linien anzeigen
  - ✅ Bereichsnamen anzeigen
  - ✅ Spur-Größen anzeigen

Vorteile von Firefox DevTools:

Bessere Visualisierung von Grid-Linien
Nummerierung der Grid-Linien
Anzeige von fr-Einheiten
Unterstützung für grid-template-areas

🐛 Häufige Debugging-Szenarien

Szenario 1: Grid funktioniert nicht

css

/* Falsch */
.container {
  display: grid;
  /* Aber keine Spalten definiert! */
}

/* Richtig */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Spalten definieren */
}

Debugging-Schritte:

DevTools öffnen
.container auswählen
Prüfen: Hat es display: grid?
Prüfen: Sind grid-template-columns definiert?

Szenario 2: Elemente überlappen unerwartet

css

/* Falsch */
.item1 {
  grid-column: 1 / 3; /* Überschreibt andere Elemente */
}

/* Richtig */
.item1 {
  grid-column: 1 / 3;
}

.item2 {
  grid-column: 3 / 4; /* Explizite Platzierung */
}

Szenario 3: Responsives Verhalten prüfen

DevTools öffnen
Geräte-Symbol (Toggle device toolbar) klicken
Verschiedene Bildschirmgrößen testen
CSS-Medienabfragen überprüfen

2.4 Häufige Anfängerfehler bei der Praxis

❌ Fehler 1: Dateipfad-Fehler

Problem:

html

<!-- Falsch -->
<link rel="stylesheet" href="style.css">

<!-- Wenn die Datei in einem anderen Ordner liegt -->

Lösung:

html

<!-- Richtig (absoluter Pfad) -->
<link rel="stylesheet" href="/style.css">

<!-- Oder (relativer Pfad) -->
<link rel="stylesheet" href="./style.css">

Debugging:

DevTools → Network-Tab
Prüfen: Hat style.css den Status 200 oder 404?

❌ Fehler 2: CSS wird nicht aktualisiert

Grund: Browser-Cache

Lösungen:

Hard Refresh: Strg + F5 (Windows/Linux) / Cmd + Shift + R (macOS)
Cache deaktivieren: DevTools → Network → Disable cache aktivieren

CSS-Datei versionieren:

html

<link rel="stylesheet" href="style.css?v=1.0">

❌ Fehler 3: Grid-Layout wird nicht angezeigt

Häufige Ursachen:

display: grid fehlt oder falsch geschrieben
Keine grid-template-columns oder grid-template-rows definiert
Elemente sind leer (kein Inhalt, keine Höhe)

Lösung:

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Immer definieren! */
  gap: 20px;
}

.item {
  /* Mindestens einer der folgenden: */
  height: 100px;        /* Feste Höhe */
  min-height: 50px;     /* Mindesthöhe */
  padding: 20px;        /* Innenabstand */
  /* Oder Inhalt hinzufügen */
}

❌ Fehler 4: Grid-Linien werden falsch gezählt

Problem:

css

.item {
  /* Falsch: Denkt, Linie 1 ist die erste Spalte */
  grid-column: 1 / 2; /* Tatsächlich: Linie 1 bis Linie 2 = erste Spalte */
}

Richtige Zählung:

Grid-Linien:   1       2       3       4
               |       |       |       |
Spalten:      [Spalte 1] [Spalte 2] [Spalte 3]

Tipp: Verwenden Sie span, um Verwirrung zu vermeiden:

css

.item {
  /* Richtig: Erste Spalte überspannen */
  grid-column: 1 / span 1; /* Von Linie 1, 1 Spalte breit */
}

❌ Fehler 5: `fr`-Einheit missverstanden

Problem:

css

.container {
  grid-template-columns: 1fr 1fr 1fr;
  /* Denkt: 3 gleiche Spalten à 33.33% */
}

/* Aber wenn ein Element breiter Inhalt hat: */
.item:first-child {
  width: 500px; /* Sprengt das Layout! */
}

Erklärung:

fr verteilt verfügbaren Platz, nicht die Gesamtbreite
Wenn Inhalt breiter ist als 1fr, wächst die Spalte

Lösung:

css

.container {
  grid-template-columns: 1fr 1fr 1fr;
  /* Optional: Mindestgröße setzen */
  grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Entwicklungstools einrichten:

Visual Studio Code installieren
Wichtige Plugins: Live Server, HTML CSS Support, CSS Peek

✅ Praxisumgebung einrichten:

Projektordner erstellen
HTML- und CSS-Dateien erstellen
Erstes Grid Layout zum Laufen bringen

✅ Browser-Debugging:

Chrome DevTools verwenden
Firefox Grid Inspector nutzen
Grid-Linien visualisieren

✅ Häufige Fehler vermeiden:

Dateipfad-Fehler
Cache-Probleme
Grid-Layout wird nicht angezeigt
Grid-Linien falsch gezählt
fr-Einheit missverstanden

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

📖 Grid Layout Kernbegriffe (Container, Element, Grid-Linien, Tracks)
🎯 Unterschied zwischen explizitem und implizitem Grid
🛠️ Praktische Übungen zur Visualisierung

👉 Weiter zu Kapitel 3: Kernbegriffe

💡 Tipps für effizientes Arbeiten

Live Server immer nutzen: Spart enorm Zeit beim Testen
DevTools permanent offen halten: Hilft sofort bei Fehlern
Kleine Änderungen testen: Lieber oft speichern und prüfen
Code formatieren: Nutzen Sie Prettier für sauberen Code
Backup erstellen: Regelmäßig Committen (wenn Git verwendet wird)

Viel Erfolg beim Grid-Lernen! 🚀

Kapitel 2: Entwicklungsumgebung einrichten ​

🎯 Lernziele ​

2.1 Entwicklungstools vorbereiten ​

🛠️ Empfohlene Toolkombination ​

📝 Tool-Übersicht ​

💻 Visual Studio Code installieren ​

2.2 Erforderliche VS Code Plugins ​

🔌 Plugin 1: Live Server ​

🔌 Plugin 2: HTML CSS Support ​

🔌 Plugin 3: CSS Peek ​

🔌 Empfohlene zusätzliche Plugins ​

2.2 Praxisumgebung einrichten ​

📁 Schritt 1: Projektordner erstellen ​

📄 Schritt 2: Dateien erstellen ​

📝 Schritt 3: Grundgerüst schreiben ​

🚀 Schritt 4: Live Server starten ​

2.3 Browser-Debugging-Tipps ​

🔍 Chrome DevTools verwenden ​

🎨 Grid-Inspektor verwenden ​

🐛 Häufige Debugging-Szenarien ​

Szenario 1: Grid funktioniert nicht ​

Szenario 2: Elemente überlappen unerwartet ​

Szenario 3: Responsives Verhalten prüfen ​

2.4 Häufige Anfängerfehler bei der Praxis ​

❌ Fehler 1: Dateipfad-Fehler ​

❌ Fehler 2: CSS wird nicht aktualisiert ​

❌ Fehler 3: Grid-Layout wird nicht angezeigt ​

❌ Fehler 4: Grid-Linien werden falsch gezählt ​

❌ Fehler 5: fr-Einheit missverstanden ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

💡 Tipps für effizientes Arbeiten ​

Kapitel 2: Entwicklungsumgebung einrichten

🎯 Lernziele

2.1 Entwicklungstools vorbereiten

🛠️ Empfohlene Toolkombination

📝 Tool-Übersicht

💻 Visual Studio Code installieren

2.2 Erforderliche VS Code Plugins

🔌 Plugin 1: Live Server

🔌 Plugin 2: HTML CSS Support

🔌 Plugin 3: CSS Peek

🔌 Empfohlene zusätzliche Plugins

2.2 Praxisumgebung einrichten

📁 Schritt 1: Projektordner erstellen

📄 Schritt 2: Dateien erstellen

📝 Schritt 3: Grundgerüst schreiben

🚀 Schritt 4: Live Server starten

2.3 Browser-Debugging-Tipps

🔍 Chrome DevTools verwenden

🎨 Grid-Inspektor verwenden

🐛 Häufige Debugging-Szenarien

Szenario 1: Grid funktioniert nicht

Szenario 2: Elemente überlappen unerwartet

Szenario 3: Responsives Verhalten prüfen

2.4 Häufige Anfängerfehler bei der Praxis

❌ Fehler 1: Dateipfad-Fehler

❌ Fehler 2: CSS wird nicht aktualisiert

❌ Fehler 3: Grid-Layout wird nicht angezeigt

❌ Fehler 4: Grid-Linien werden falsch gezählt

❌ Fehler 5: `fr`-Einheit missverstanden

📝 Zusammenfassung

🎯 Nächste Schritte

💡 Tipps für effizientes Arbeiten