diff --git a/04_str_und_darstellung/index.html b/04_str_und_darstellung/index.html
index 0e558d5..82e3720 100644
--- a/04_str_und_darstellung/index.html
+++ b/04_str_und_darstellung/index.html
@@ -195,7 +195,7 @@
diff --git a/04b_umstieg_vscode/README.md b/04b_umstieg_vscode/README.md
new file mode 100644
index 0000000..a95865f
--- /dev/null
+++ b/04b_umstieg_vscode/README.md
@@ -0,0 +1,58 @@
+# Kapitel 04b: Umstieg von Thonny auf Visual Studio Code (VS Code) 🚀💻
+
+Herzlich willkommen zum Exkurs!
+
+Bisher hast du deine Aufgaben vielleicht in **Thonny** bearbeitet. Thonny ist super für die ersten Schritte. Aber ab jetzt werden unsere Projekte größer (mehrere Dateien, Klassen, Tests).
+
+**Visual Studio Code (VS Code)** ist die beliebteste und mächtigste Entwicklungsumgebung der Welt. Hier lernst du, wie du sie einrichtest und wie ein Profi nutzt!
+
+---
+
+## 🏗️ Das wichtigste Grundkonzept: "Ordner öffnen" (Open Folder)
+
+- In Thonny öffnet man meistens nur einzelne Dateien (wie `aufgabe.py`).
+- In **VS Code öffnet man immer den gesamten Projektordner**:
+ 1. Starte VS Code.
+ 2. Klicke auf **Datei → Ordner öffnen...** (oder `Strg + K`, dann `Strg + O` / auf Mac: `Cmd + O`).
+ 3. Wähle den Ordner `Aufgaben-Python` aus.
+
+Jetzt hast du links im Explorer die volle Übersicht über alle Kapitel!
+
+---
+
+## 🧩 Die besten Erweiterungen (Extensions)
+
+Drücke `Strg + Shift + X` (Mac: `Cmd + Shift + X`), um den Erweiterungs-Store zu öffnen. Installiere folgende Plugins:
+
+1. **Python & Pylance (von Microsoft):**
+ Aktiviert Autovervollständigung (IntelliSense), Syntaxprüfung und den Ausführen-Button.
+2. **Error Lens (⭐ Geheimtipp!):**
+ Zeigt Fehler und Warnungen direkt als Text in der Codezeile an! Du musst nicht erst lange im Terminal nach Zeilennummern suchen.
+3. **Material Icon Theme:**
+ Hübsche, bunte Datei-Symbole für Python, Markdown, HTML und Git.
+4. **Better Comments:**
+ Färbt `# TODO`, `# !` und `# ?` farblich ein.
+5. **Black Formatter:**
+ Formatiert deinen Code beim Speichern automatisch sauber und ordentlich.
+
+---
+
+## ⌨️ Die wichtigsten Tastenkombinationen (Shortcuts)
+
+| Aktion | Windows / Linux | macOS |
+| :--- | :--- | :--- |
+| **Datei speichern** | `Strg + S` | `Cmd + S` |
+| **Terminal öffnen / schließen** | `Strg + \`` (oder `Strg + J`) | `Cmd + \`` (oder `Cmd + J`) |
+| **Command Palette (Befehle suchen)** | `Strg + Shift + P` | `Cmd + Shift + P` |
+| **Code formatieren** | `Alt + Shift + F` | `Option + Shift + F` |
+| **Nächstes gleiches Wort markieren** | `Strg + D` | `Cmd + D` |
+| **Skript ausführen** | `Strg + F5` (oder Play-Button oben) | `Cmd + F5` |
+
+---
+
+## 🧪 Ausprobieren in `vscode_test.py`
+
+Öffne `vscode_test.py` in VS Code und teste:
+1. Wie **Error Lens** Fehler in Echtzeit anzeigt.
+2. Wie **IntelliSense** Methoden vorschlägt, wenn du `auto.` tippst.
+3. Öffne das Terminal mit `Strg + \`` und führe `python3 test_all.py` aus!
diff --git a/04b_umstieg_vscode/index.html b/04b_umstieg_vscode/index.html
new file mode 100644
index 0000000..7719495
--- /dev/null
+++ b/04b_umstieg_vscode/index.html
@@ -0,0 +1,274 @@
+
+
+
+
+
+ Kapitel 04b: Umstieg auf Visual Studio Code
+
+
+
+
+
+
+
+
Exkurs & Praxissprung
+
Umstieg von Thonny auf Visual Studio Code 🚀💻
+
Willkommen in der Profi-Entwicklungsumgebung! Lerne die besten Plugins, Shortcuts und Arbeitsabläufe kennen.
+
+
+
+
+
+
+
+
1. Warum wechseln wir von Thonny zu VS Code?
+
+
+ Thonny war für den Anfang genial: Es ist einfach, hat einen Variablen-Inspektor und man kann Zeile für Zeile durch ein Skript gehen.
+
+
+ Doch je größer deine Projekte werden (mehrere Dateien, Klassen, Tests und Git), desto mehr stößt Thonny an seine Grenzen. Visual Studio Code (VS Code) ist der weltweite Standard in der professionellen Softwareentwicklung.
+
+
+
+
🏎️ Vom Fahrschulauto zum Rennwagen:
+
+
Thonny ist das Fahrschulauto mit Doppelpedalen – perfekt für die ersten Fahrstunden auf dem Parkplatz.
+
VS Code ist ein modernes Sportauto mit Navi, Spurhalteassistent, Tempomat und Turbolader. Es hilft dir beim Tippen, findet Fehler automatisch und macht das Coden viel schneller!
+
+
+
+
Die 4 größten Vorteile von VS Code:
+
+
IntelliSense: Schlägt dir automatisch Methoden und Variablennamen vor (kein Vertippen mehr!).
+
Projekt-Ordner: Du siehst alle Dateien deines Projekts auf einen Blick in der Seitenleiste.
+
Integriertes Terminal: Führe Tests und Skripte direkt im Editor aus, ohne Fenster zu wechseln.
+
Tausende Erweiterungen: Passe VS Code mit Themes, Formatierern und Fehleranzeigen perfekt an dich an.
+
+
+
+
+
+
2. Das wichtigste Grundkonzept: "Ordner öffnen" (Open Folder)
+
+
+
⚠️ Wichtigster Unterschied zu Thonny:
+ In Thonny hat man meist nur eine einzelne Datei geöffnet (z.B. aufgabe.py).
+ In VS Code öffnet man immer den gesamten Projektordner (z.B. Aufgaben-Python)!
+
+
+
So öffnest du dein Projekt richtig:
+
+
Starte Visual Studio Code.
+
Klicke im Menü oben auf Datei → Ordner öffnen... (oder Strg + K, dann Strg + O / auf Mac: Cmd + O).
+
Wähle den Hauptordner Aufgaben-Python aus und klicke auf Öffnen.
+
Bestätige eventuell die Frage "Vertrauen Sie den Autoren?" mit Ja.
+
+
Jetzt siehst du links im Explorer alle Kapitelordner, Tests und Dateien sauber aufgelistet!
+
+
+
+
+
3. 🧩 Die unverzichtbaren Erweiterungen (Plugins)
+
+
+ Um Erweiterungen zu installieren, klicke ganz links in der Seitenleiste auf das Erweiterungs-Icon (die vier Quadrate mit einem fliegenden Würfel) oder drücke Strg + Shift + X (Mac: Cmd + Shift + X).
+
+
+
+
+
+
+
🐍
+
+
Python (von Microsoft)
+
Pflicht-Plugin! Aktiviert Syntax-Highlighting, Code-Ausführung, IntelliSense und Debugging.
+
+
+
+
+
+
⚡
+
+
Pylance (von Microsoft)
+
Macht die Autovervollständigung blitzschnell und warnt dich sofort bei falschen Typen.
+
+
+
+
+
+
🔍
+
+
Error Lens Geheimtipp!
+
Zeigt Fehler und Warnungen direkt als farbigen Text in der Codezeile an – kein Suchen im Terminal nötig!
+
+
+
+
+
+
🎨
+
+
Material Icon Theme
+
Verleiht Python-, HTML- und Git-Dateien im Explorer hübsche und bunte Symbole.
+
+
+
+
+
+
💬
+
+
Better Comments
+
Färbt Kommentare ein: # TODO: wird orange, # ! wird rot, # ? wird blau.
+
+
+
+
+
+
🪄
+
+
Black Formatter
+
Formatiert deinen Code beim Speichern (Strg+S) automatisch nach den offiziellen Python-Regeln.
+
+
+
+
+
+
+
+
+
4. 🖥️ Die Benutzeroberfläche im Überblick
+
+
+
+ Seitenleiste links:
+ 📁 Explorer: Dateibaum durchsuchen.
+ 🔍 Suche: Text im gesamten Projekt finden.
+ 🌿 Quellcodeverwaltung: Git Commits & Pushes.
+ 🧩 Erweiterungen: Neue Plugins installieren.
+
+
+ Das integrierte Terminal:
+ Drücke Strg + ` (Taste links neben der Backspace-Taste / bzw. Strg + J).
+ Hier kannst du direkt wie gewohnt deine Befehle tippen:
+
+
python3 test_all.py
+
+
+
+ Python-Interpreter auswählen:
+ Unten rechts in der Statusleiste steht deine Python-Version (z.B. 3.11.x). Falls dort "Select Interpreter" steht, klicke darauf und wähle den empfohlenen Python-Pfad aus.
+
+
+
+
+
+
+
5. ⌨️ Die wichtigsten Tastenkombinationen (Shortcuts)
+
+
Mit diesen Shortcuts codest du wie ein echter Profi:
+
+
+
+
+
Aktion
+
Windows / Linux
+
macOS
+
+
+
+
+
💾 Datei speichern
+
Strg + S
+
Cmd + S
+
+
+
💻 Terminal öffnen / schließen
+
Strg + ` (oder Strg + J)
+
Cmd + ` (oder Cmd + J)
+
+
+
⚡ Command Palette (Alles suchen)
+
Strg + Shift + P
+
Cmd + Shift + P
+
+
+
🪄 Code automatisch formatieren
+
Alt + Shift + F
+
Option + Shift + F
+
+
+
✨ Nächstes gleiches Wort markieren
+
Strg + D
+
Cmd + D
+
+
+
🚀 Skript direkt ausführen
+
Strg + F5 (oder Play-Button oben rechts)
+
Cmd + F5
+
+
+
+
+
+
+
+
6. 🧪 Dein Mitmach-Check in vscode_test.py
+
+
Öffne die Datei 04b_umstieg_vscode/vscode_test.py in VS Code und probiere die neuen Features aus:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🎉 Perfekt vorbereitet!
+ Du beherrschst nun die Grundlagen von VS Code. Jetzt bist du bereit für Kapitel 05 (Objekte kombinieren)!
+
+
+
+
+
+
+
+
+
diff --git a/04b_umstieg_vscode/vscode_test.py b/04b_umstieg_vscode/vscode_test.py
new file mode 100644
index 0000000..7ac9fc1
--- /dev/null
+++ b/04b_umstieg_vscode/vscode_test.py
@@ -0,0 +1,73 @@
+"""
+🚀 VS CODE AUSPROBIER-PLAYGROUND 🚀
+===================================
+Willkommen in VS Code! Diese Datei ist zum Experimentieren da.
+Folge den 4 Mini-Experimenten unten:
+"""
+
+# ==============================================================================
+# EXPERIMENT 1: Better Comments (Farbige Kommentare)
+# Wenn du die Erweiterung 'Better Comments' installiert hast, siehst du hier
+# verschiedene Farben für verschiedene Kommentar-Typen:
+# ==============================================================================
+
+# TODO: Das ist ein normaler orangefarbener Aufgaben-Kommentar
+# ! ACHTUNG: Das ist ein wichtiger roter Warn-Kommentar
+# ? FRAGE: Das ist ein blauer Frage-Kommentar
+# * INFO: Das ist ein hervorgehobener grüner Info-Kommentar
+
+
+# ==============================================================================
+# EXPERIMENT 2: IntelliSense (Automatische Code-Vervollständigung)
+# Schau dir diese Klasse an:
+# ==============================================================================
+class ElektroAuto:
+ def __init__(self, modell, batterie_kwh=60):
+ self.modell = modell
+ self.batterie_kwh = batterie_kwh
+ self.ladestand_prozent = 100
+
+ def fahren(self, kilometer):
+ verbrauch = kilometer * 0.2
+ self.ladestand_prozent -= verbrauch
+ return f"{self.modell} ist {kilometer} km gefahren! (Akku: {self.ladestand_prozent:.0f}%)"
+
+ def batterie_aufladen(self):
+ self.ladestand_prozent = 100
+ return f"{self.modell} ist wieder voll aufgeladen!"
+
+
+# 👇 PROBIERE ES HIER AUS:
+# 1. Entferne das '#' in der nächsten Zeile.
+# 2. Tippe 'tesla.' und warte eine Millisekunde:
+# VS Code schlägt dir automatisch '.fahren', '.batterie_aufladen', '.modell' usw. vor!
+# Wähle mit den Pfeiltasten und drücke Tab oder Enter.
+
+tesla = ElektroAuto("Tesla Model 3")
+# print(tesla.fahren(50))
+
+
+# ==============================================================================
+# EXPERIMENT 3: Automatisches Formatieren (Format Document)
+# Diese Zeilen hier unten sind absichtlich etwas unordentlich eingerückt / mit
+# unschönen Abständen:
+# Drücke: Alt + Shift + F (Mac: Option + Shift + F) oder speichere mit Strg + S.
+# Siehst du, wie VS Code die Abstände automatisch perfekt aufräumt?
+# ==============================================================================
+liste_der_autos = [ "Tesla" , "BMW" , "Porsche" , "Audi" ]
+
+
+# ==============================================================================
+# EXPERIMENT 4: Ausführen im integrierten Terminal
+# 1. Drücke Strg + ` (oder Cmd + ` auf Mac), um das Terminal unten zu öffnen.
+# 2. Tippe: python3 04b_umstieg_vscode/vscode_test.py (oder klicke auf das Play-Symbol ▶️ oben rechts).
+# ==============================================================================
+if __name__ == "__main__":
+ print("=" * 55)
+ print("🎉 HERZLICHEN GLÜCKWUNSCH! VS CODE FUNKTIONIERT PERFEKT!")
+ print("=" * 55)
+ print(f"Auto erstellt: {tesla.modell}")
+ print(tesla.fahren(80))
+ print(f"Bereinigte Liste: {liste_der_autos}")
+ print("\n👉 Du bist jetzt bereit für Kapitel 05 (Objekte kombinieren)!")
+ print("=" * 55)
diff --git a/05_objekte_kombinieren/index.html b/05_objekte_kombinieren/index.html
index 90ba9f3..2d2f63c 100644
--- a/05_objekte_kombinieren/index.html
+++ b/05_objekte_kombinieren/index.html
@@ -13,7 +13,7 @@
@@ -190,7 +190,7 @@
diff --git a/README.md b/README.md
index b0fba49..d3b47b8 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ Die Übungen sind so aufgebaut, dass jedes Kapitel auf dem vorherigen aufbaut:
| **[02. Konstruktor & self](./02_init_und_self/)** | `__init__` & `self` | Objekte sauber mit Startwerten initialisieren |
| **[03. Methoden & Verhalten](./03_methoden_und_verhalten/)** | Methoden & Interaktion | Objekte können handeln & miteinander interagieren |
| **[04. Schöne Textausgabe](./04_str_und_darstellung/)** | `__str__` Dunder-Methode | Wie Objekte lesbar mit `print()` ausgegeben werden |
+| **[04b. Umstieg auf VS Code](./04b_umstieg_vscode/)** | **Exkurs: IDE-Wechsel** | **Von Thonny zu VS Code: Plugins (Error Lens, Python), Shortcuts & Terminal** |
| **[05. Objekte kombinieren](./05_objekte_kombinieren/)** | Komposition | Listen von Objekten & komplexe Datenstrukturen |
| **[06. Abschlussprojekt](./06_abschlussprojekt_tamagotchi/)** | Mini-Projekt: Tamagotchi | Ein interaktives Konsolenspiel mit allem Gelernten |
@@ -37,7 +38,7 @@ In jedem Kapitelordner findest du:
1. Öffne den Ordner des aktuellen Kapitels (z.B. `00_fehlersuche_und_grundlagen`).
2. Öffne die `index.html` im Browser oder lies die `README.md`.
-3. Öffne `aufgabe.py` und bearbeite die nummerierten `TODO`s / Bugs.
+3. Öffne `aufgabe.py` und bearbeite die Aufgaben.
4. Führe die Tests aus, um deine Lösung zu prüfen:
```bash
python3 test_aufgabe.py
diff --git a/assets/style.css b/assets/style.css
index fdf6bdc..b0a6a32 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -258,14 +258,80 @@ pre code {
padding: 0;
}
-/* Code Syntax Highlights (CSS simulated) */
-.kw { color: #f472b6; font-weight: bold; } /* def, class, return, if */
-.fn { color: #60a5fa; } /* function name */
-.str { color: #a7f3d0; } /* strings */
-.num { color: #fbbf24; } /* numbers */
-.cm { color: #64748b; font-style: italic; } /* comments */
-.var { color: #cbd5e1; } /* self, variables */
-.attr { color: #38bdf8; } /* self.attributes */
+/* Code Syntax Highlights */
+.kw { color: #f472b6; font-weight: bold; }
+.fn { color: #60a5fa; }
+.str { color: #a7f3d0; }
+.num { color: #fbbf24; }
+.cm { color: #64748b; font-style: italic; }
+.var { color: #cbd5e1; }
+.attr { color: #38bdf8; }
+
+/* Keyboard Shortcut Badges */
+kbd {
+ display: inline-block;
+ padding: 3px 7px;
+ font-family: var(--font-mono);
+ font-size: 0.85em;
+ font-weight: 700;
+ color: #334155;
+ background-color: #f1f5f9;
+ border: 1px solid #cbd5e1;
+ border-bottom: 2px solid #94a3b8;
+ border-radius: 4px;
+ box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+ margin: 0 2px;
+}
+
+/* Extension Cards (for VS Code Guide) */
+.extension-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 16px;
+ margin: 20px 0;
+}
+
+.extension-card {
+ background: #ffffff;
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ padding: 16px;
+ display: flex;
+ gap: 14px;
+ align-items: flex-start;
+ box-shadow: var(--shadow-sm);
+ transition: transform 0.2s, border-color 0.2s;
+}
+
+.extension-card:hover {
+ transform: translateY(-2px);
+ border-color: var(--primary);
+}
+
+.extension-icon {
+ font-size: 1.8rem;
+ background: var(--primary-light);
+ width: 44px;
+ height: 44px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: var(--radius-sm);
+ flex-shrink: 0;
+}
+
+.extension-info h4 {
+ font-size: 1.05rem;
+ color: var(--text-main);
+ margin-bottom: 4px;
+}
+
+.extension-info p {
+ font-size: 0.88rem;
+ color: var(--text-muted);
+ margin-bottom: 0;
+ line-height: 1.4;
+}
/* Accordion / Details */
details {
@@ -446,4 +512,5 @@ summary:hover {
.card { padding: 18px; }
.footer-nav { flex-direction: column; }
.footer-nav .btn { width: 100%; justify-content: center; }
+ .extension-grid { grid-template-columns: 1fr; }
}
diff --git a/index.html b/index.html
index 34e7f69..51d0ef9 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@
Jetzt machen wir den nächsten großen Schritt in der Softwareentwicklung: Klassen & Objekte!
- Damit du beim Programmieren nie an kleinen Syntaxfehlern verzweifelst, starten wir mit einem kurzen Warm-up zur Fehlersuche (Kapitel 00), bevor es mit den Klassen losgeht.
+ Damit du beim Programmieren nie an kleinen Syntaxfehlern verzweifelst, starten wir mit einem kurzen Warm-up zur Fehlersuche (Kapitel 00), und steigen nach Kapitel 04 auf die Profi-Entwicklungsumgebung VS Code (Kapitel 04b) um.