Kapitel 2: Entwicklungsumgebung und praktische Vorbereitung

2.1 Entwicklungswerkzeuge vorbereiten

Visual Studio Code (VS Code) installieren

Download:

Offizielle Website: https://code.visualstudio.com/
Wähle die Version für dein Betriebssystem (Windows/Mac/Linux)

Installation überprüfen:

bash

# Im Terminal prüfen
code --version

Unverzichtbare VS Code Erweiterungen für Flexbox

1. Live Server

Zweck: HTML-Dateien mit automatischem Reload im Browser öffnen
Installation: In VS Code Erweiterungen suchen: "Live Server" (von Ritwick Dey)
Verwendung: Rechtsklick auf HTML-Datei → "Open with Live Server"

2. HTML CSS Support

Zweck: Bessere Autovervollständigung für HTML und CSS
Installation: Suche nach "HTML CSS Support" (von ecmel)

3. CSS Peek

Zweck: Springe vom HTML direkt zur CSS-Definition
Installation: Suche nach "CSS Peek"

4. Prettier - Code formatter

Zweck: Automatisches Formatieren von Code
Installation: Suche nach "Prettier"

5. Auto Rename Tag

Zweck: Automatisches Umbenennen von HTML-Tags
Installation: Suche nach "Auto Rename Tag"

6. GitLens

Zweck: Bessere Git-Integration in VS Code
Installation: Suche nach "GitLens"

Browser-Erweiterungen (Optional)

Chrome/Edge:

VisBug: Visuelle CSS-Editor-Erweiterung
Pesticide: Zeigt Element-Ränder an (gut zum Debuggen von Layouts)

2.2 Praktische Umgebung einrichten

Schritt 1: Projektordner erstellen

bash

# Terminal oder Explorer verwenden
mkdir flexbox-lernen
cd flexbox-lernen

Schritt 2: Dateistruktur anlegen

flexbox-lernen/
│
├── index.html          # Haupt-HTML-Datei
├── style.css          # Haupt-CSS-Datei
├── übungen/           # Ordner für Übungen
│   ├── uebung1.html
│   └── uebung1.css
└── bilder/            # Ordner für Bilder (optional)

Schritt 3: HTML-Grundgerüst erstellen

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>Flexbox Lernen</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Mein erstes Flexbox-Layout</h1>
  
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

</body>
</html>

Schritt 4: CSS-Datei erstellen

style.css:

css

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

/* Einfaches Styling */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #f0f0f0;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.box {
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  text-align: center;
}

Schritt 5: Live Server starten

Methode 1: Rechtsklick

Rechtsklicke auf index.html
Wähle "Open with Live Server"
Browser öffnet sich automatisch unter http://127.0.0.1:5500

Methode 2: Tastenkombination

Alt + L + O (Öffnen)
Alt + L + C (Schließen)

2.3 Browser-Debugging-Tipps (F12 Entwicklerwerkzeuge)

Die wichtigsten Tabs für Flexbox

1. Elements-Tab (Elemente)

Zeigt HTML-Struktur
Zeigt angewendete CSS-Stile
Ermöglicht Live-Editing von CSS

2. Styles-Panel (Stile)

Zeigt alle CSS-Regeln für ein Element
Kann CSS-Eigenschaften aktivieren/deaktivieren
Zeigt berechnete Werte

3. Layout-Panel (Layout)

Flexbox-Visualisierung: Zeigt Flex-Container und -Elemente farbig hervorgehoben
Grid-Visualisierung: Falls CSS Grid verwendet wird

Flexbox im Browser debuggen

Schritt 1: Element auswählen

Drücke F12, um Entwicklerwerkzeuge zu öffnen
Klicke auf das Element-Auswahl-Symbol (oder drücke Ctrl + Shift + C)
Klicke auf das Element im Browser

Schritt 2: Flexbox-Overlay anzeigen

Im "Elements"-Tab erscheint das Element
Wenn display: flex gesetzt ist, siehst du ein flex-Badge neben dem Element
Klicke auf das flex-Badge, um die Flexbox-Visualisierung zu aktivieren

Schritt 3: Flexbox-Eigenschaften beobachten

Farbige Linien zeigen die Hauptachse und Querachse
Abstände zwischen Elementen werden visualisiert
Ausrichtungen werden farbig markiert

Nützliche Tricks

1. CSS live editieren:

css

/* Im Styles-Panel: */
.container {
  display: flex;
  /* Ändere Werte und sieh das Ergebnis sofort */
  justify-content: center;  /* Probiere verschiedene Werte aus */
}

2. Klassen hinzufügen/entfernen:

Rechtsklick auf ein Element im Elements-Tab
"Add attribute" → class="test"
Oder im Styles-Panel auf .cls klicken

3. Pseudo-Klassen testen:

Im Styles-Panel auf :hov klicken
Dann :hover, :focus, etc. aktivieren

4. Responsive Test:

Klicke auf das Smartphone-Symbol (oder Ctrl + Shift + M)
Wähle verschiedene Gerätegrößen

2.4 Häufige praktische Probleme für Anfänger

Problem 1: Dateipfad-Fehler

Symptom:

CSS wird nicht geladen
Bilder werden nicht angezeigt

Lösung:

html

<!-- Falsch -->
<link rel="stylesheet" href="style.css">
<!-- Richtig (wenn im selben Ordner) -->
<link rel="stylesheet" href="./style.css">

<!-- Falsch -->
<img src="bilder/logo.png">
<!-- Richtig (absoluter Pfad) -->
<img src="/bilder/logo.png">
<!-- Oder (relativer Pfad) -->
<img src="./bilder/logo.png">

Problem 2: CSS wird nicht angewendet

Mögliche Ursachen:

Dateipfad falsch: Siehe Problem 1
CSS-Selektor passt nicht: Überprüfe im Browser, ob der Selektor matcht
Cache-Problem: Ctrl + F5 drücken (harte Aktualisierung)
Syntaxfehler: Überprüfe auf fehlende Semikolons ; oder Klammern {}

Debugging:

css

/* Teste mit auffälligen Farben */
.container {
  background-color: red !important;  /* !important für Testzwecke */
}

Problem 3: Flexbox wirkt nicht

Mögliche Ursachen:

display: flex nicht gesetzt: Überprüfe im Browser
Tippfehler: display: fleks ← Falsch
Vererbung: Das Element ist kein direktes Kind vom Flex-Container

Lösung:

css

/* Falsch */
<div class="container">
  <div>
    <div class="box">Ich bin kein direktes Kind!</div>
  </div>
</div>

/* Richtig */
<div class="container">
  <div class="box">Ich bin ein direktes Kind!</div>
</div>

Problem 4: Live Server startet nicht

Lösungen:

Datei speichern: Live Server funktioniert nur mit gespeicherten Dateien
Port bereits belegt: Andere Instanz von Live Server schließen
Erweiterung neu installieren: Deinstalliere und installiere "Live Server" neu

Problem 5: Layout bricht auf Mobile-Geräten

Ursache:

Kein Viewport-Meta-Tag gesetzt

Lösung:

html

<!-- Im <head> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Problem 6: Flex-Elemente überlaufen den Container

Ursache:

Elemente sind zu breit

Lösungen:

css

/* Möglichkeit 1: Umbruch erlauben */
.container {
  flex-wrap: wrap;
}

/* Möglichkeit 2: Elemente schrumpfen lassen */
.box {
  flex-shrink: 1;
}

/* Möglichkeit 3: Mindestbreite setzen */
.box {
  min-width: 0;  /* Erlaubt Schrumpfung unter die eigentliche Breite */
}

Praxis-Übung: Erste Flexbox-Umgebung

Ziel

Erstelle eine funktionierende Entwicklungsumgebung und ein erstes Flexbox-Layout.

Schritt 1: Projekt anlegen

Erstelle Ordner flexbox-praxis
Erstelle index.html und style.css
Starte Live Server

Schritt 2: HTML-Struktur

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Praxis</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <h1>Meine Webseite</h1>
    <nav class="navbar">
      <a href="#">Home</a>
      <a href="#">Über</a>
      <a href="#">Kontakt</a>
    </nav>
  </header>

  <main class="main">
    <aside class="sidebar">Seitenleiste</aside>
    <section class="content">Hauptinhalt</section>
  </main>

  <footer class="footer">Fußzeile</footer>
</body>
</html>

Schritt 3: CSS mit Flexbox

css

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

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

.navbar a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
}

/* Main Layout */
.main {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
}

.sidebar {
  flex: 0 0 200px;
  background-color: #f4f4f4;
  padding: 20px;
}

.content {
  flex: 1;
  background-color: #fff;
  padding: 20px;
}

/* Footer */
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

Schritt 4: Testen und experimentieren

Ändere flex-direction im .main Container
Ändere justify-content im .header
Füge mehr Inhalt hinzu und beobachte das Verhalten

Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ Welche Entwicklungswerkzeuge du brauchst (VS Code + Erweiterungen)
✅ Wie du deine praktische Umgebung einrichtest
✅ Wie du Flexbox im Browser debuggst (F12 Entwicklerwerkzeuge)
✅ Wie du häufige Anfängerfehler behebst

Nächstes Kapitel: In Kapitel 3 lernen wir die Kernbegriffe von Flexbox (Container, Elemente, Hauptachse, Querachse). Dies ist das wichtigste Kapitel für das Verständnis von Flexbox!

Checkliste: Entwicklungsumgebung

[ ] VS Code installiert
[ ] Live Server Erweiterung installiert
[ ] HTML/CSS Support Erweiterung installiert
[ ] Erstes Projekt erstellt
[ ] Live Server erfolgreich gestartet
[ ] F12 Entwicklerwerkzeuge getestet
[ ] Flexbox-Visualisierung im Browser gefunden

Wenn alle Punkte abgehakt sind, bist du bereit für Kapitel 3!

Kapitel 2: Entwicklungsumgebung und praktische Vorbereitung ​

2.1 Entwicklungswerkzeuge vorbereiten ​

Visual Studio Code (VS Code) installieren ​

Unverzichtbare VS Code Erweiterungen für Flexbox ​

Browser-Erweiterungen (Optional) ​

2.2 Praktische Umgebung einrichten ​

Schritt 1: Projektordner erstellen ​

Schritt 2: Dateistruktur anlegen ​

Schritt 3: HTML-Grundgerüst erstellen ​

Schritt 4: CSS-Datei erstellen ​

Schritt 5: Live Server starten ​

2.3 Browser-Debugging-Tipps (F12 Entwicklerwerkzeuge) ​

Die wichtigsten Tabs für Flexbox ​

Flexbox im Browser debuggen ​

Nützliche Tricks ​

2.4 Häufige praktische Probleme für Anfänger ​

Problem 1: Dateipfad-Fehler ​

Problem 2: CSS wird nicht angewendet ​

Problem 3: Flexbox wirkt nicht ​

Problem 4: Live Server startet nicht ​

Problem 5: Layout bricht auf Mobile-Geräten ​

Problem 6: Flex-Elemente überlaufen den Container ​

Praxis-Übung: Erste Flexbox-Umgebung ​

Ziel ​

Schritt 1: Projekt anlegen ​

Schritt 2: HTML-Struktur ​

Schritt 3: CSS mit Flexbox ​

Schritt 4: Testen und experimentieren ​

Zusammenfassung ​

Checkliste: Entwicklungsumgebung ​

Kapitel 2: Entwicklungsumgebung und praktische Vorbereitung

2.1 Entwicklungswerkzeuge vorbereiten

Visual Studio Code (VS Code) installieren

Unverzichtbare VS Code Erweiterungen für Flexbox

Browser-Erweiterungen (Optional)

2.2 Praktische Umgebung einrichten

Schritt 1: Projektordner erstellen

Schritt 2: Dateistruktur anlegen

Schritt 3: HTML-Grundgerüst erstellen

Schritt 4: CSS-Datei erstellen

Schritt 5: Live Server starten

2.3 Browser-Debugging-Tipps (F12 Entwicklerwerkzeuge)

Die wichtigsten Tabs für Flexbox

Flexbox im Browser debuggen

Nützliche Tricks

2.4 Häufige praktische Probleme für Anfänger

Problem 1: Dateipfad-Fehler

Problem 2: CSS wird nicht angewendet

Problem 3: Flexbox wirkt nicht

Problem 4: Live Server startet nicht

Problem 5: Layout bricht auf Mobile-Geräten

Problem 6: Flex-Elemente überlaufen den Container

Praxis-Übung: Erste Flexbox-Umgebung

Ziel

Schritt 1: Projekt anlegen

Schritt 2: HTML-Struktur

Schritt 3: CSS mit Flexbox

Schritt 4: Testen und experimentieren

Zusammenfassung

Checkliste: Entwicklungsumgebung