525 lines
29 KiB
HTML
525 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Python Lernportal: Grundlagen, OOP & Software-Entwicklung</title>
|
||
<link rel="stylesheet" href="assets/style.css">
|
||
<style>
|
||
.track-badge {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
font-size: 0.8rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 8px;
|
||
}
|
||
.track-1-badge { background: #dbeafe; color: #1e40af; }
|
||
.track-2-badge { background: #e0e7ff; color: #4338ca; }
|
||
.track-3-badge { background: #dcfce7; color: #166534; }
|
||
.section-header {
|
||
margin: 40px 0 15px 0;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid var(--border-color);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.section-header h2 {
|
||
margin: 0;
|
||
font-size: 1.45rem;
|
||
color: var(--text-main);
|
||
}
|
||
.section-desc {
|
||
color: var(--text-muted);
|
||
font-size: 0.95rem;
|
||
margin-top: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="header-container">
|
||
<div class="header-badge">🐍 Python Nachhilfe- & Selbstlern-Portal</div>
|
||
<h1>Vom Einsteiger zum Software-Entwickler</h1>
|
||
<p>3 strukturierte Lehrpfade: Prozedurale Grundlagen • Objektorientierung • Professionelle Werkzeuge (Git, TDD, Tkinter)</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container">
|
||
|
||
<!-- Willkommen Card -->
|
||
<section class="card">
|
||
<h2>👋 Willkommen zu deiner interaktiven Python-Lernreise!</h2>
|
||
<p>
|
||
Dieses Portal begleitet dich Schritt für Schritt von den ersten Schritten in Python bis hin zu vollständigen Desktop-Apps mit grafischer Oberfläche. Alle Aufgaben sind mit verständlichen Erklärungen, Alltags-Analogien, visuellen Beispielen und <strong>automatischen Tests</strong> für sofortiges Feedback ausgestattet.
|
||
</p>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin: 20px 0;">
|
||
<div style="background: #f8fafc; border-left: 4px solid #3b82f6; padding: 15px; border-radius: var(--radius-sm);">
|
||
<span class="track-badge track-1-badge">Lehrpfad 1</span>
|
||
<h4 style="margin: 0 0 6px 0; color: #1e3a8a;">🌱 Grundlagen der Programmierung</h4>
|
||
<p style="font-size: 0.88rem; color: var(--text-muted); margin: 0;">Für Einsteiger oder zur Wiederholung: Rechnen, Variablen, Bedingungen, Schleifen, Funktionen, Listen, Dictionaries & Strings (G01–G10).</p>
|
||
</div>
|
||
<div style="background: #f8fafc; border-left: 4px solid #6366f1; padding: 15px; border-radius: var(--radius-sm);">
|
||
<span class="track-badge track-2-badge">Lehrpfad 2</span>
|
||
<h4 style="margin: 0 0 6px 0; color: #312e81;">🏗️ Einstieg in OOP & Tools</h4>
|
||
<p style="font-size: 0.88rem; color: var(--text-muted); margin: 0;">Klassen, Baupläne, <code>__init__</code>, Methoden, UML-Diagramme, VS Code Umstieg, Git-Versionskontrolle & Tamagotchi-Projekt (00–06).</p>
|
||
</div>
|
||
<div style="background: #f8fafc; border-left: 4px solid #22c55e; padding: 15px; border-radius: var(--radius-sm);">
|
||
<span class="track-badge track-3-badge">Lehrpfad 3</span>
|
||
<h4 style="margin: 0 0 6px 0; color: #14532d;">🚀 Fortgeschrittenes OOP, Container & GUIs</h4>
|
||
<p style="font-size: 0.88rem; color: var(--text-muted); margin: 0;">Speicher-Referenzen, Dunder-Methoden, Unit Tests (TDD), Vererbung, Polymorphie, Exceptions, JSON, Tkinter, Container & Masterprojekt (07–16).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box box-tipp">
|
||
<div class="box-title">📚 Schulabgleich & Lehrplan:</div>
|
||
Alle Kapitel sind 1:1 mit dem offiziellen Skriptum des Informatik-Unterrichts abgestimmt. Detaillierter Leitfaden in <a href="LEHRPLAN.md" style="color: var(--primary); font-weight: bold;">LEHRPLAN.md</a>.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LEHRPFAD 1: GRUNDLAGEN -->
|
||
<section>
|
||
<div class="section-header">
|
||
<div>
|
||
<h2>🛣️ Lehrpfad 1: Grundlagen der Programmierung (Prozedural)</h2>
|
||
<div class="section-desc">Die unverzichtbare Basis: Datentypen, Kontrollstrukturen, Funktionen und Datenstrukturen.</div>
|
||
</div>
|
||
<span class="track-badge track-1-badge">10 Kapitel • G01 bis G10</span>
|
||
</div>
|
||
|
||
<div class="roadmap-grid">
|
||
|
||
<!-- G01 -->
|
||
<a href="g01_erste_schritte_taschenrechner/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G01</span>
|
||
<div class="roadmap-title">🧮 Python als Taschenrechner</div>
|
||
<div class="roadmap-desc">Zahlen (<code>int</code>, <code>float</code>), Grundrechenarten, Ganzzahldivision <code>//</code>, Modulo <code>%</code>, Potenzen <code>**</code> & <code>print()</code>.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G01 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G02 -->
|
||
<a href="g02_variablen_und_datentypen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G02</span>
|
||
<div class="roadmap-title">📦 Variablen & Datentypen</div>
|
||
<div class="roadmap-desc">Speicherboxen, die 4 Basisdatentypen (<code>int</code>, <code>float</code>, <code>str</code>, <code>bool</code>), Type Casting & Type Hints.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G02 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G03 -->
|
||
<a href="g03_ein_und_ausgabe/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G03</span>
|
||
<div class="roadmap-title">💬 Interaktive Ein- & Ausgabe</div>
|
||
<div class="roadmap-desc">Benutzereingaben mit <code>input()</code>, Textumwandlung und moderne formatierte <code>f-Strings</code> (z.B. <code>{preis:.2f} €</code>).</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G03 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G04 -->
|
||
<a href="g04_verzweigungen_und_bedingungen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G04</span>
|
||
<div class="roadmap-title">🚦 Bedingungen & Verzweigungen</div>
|
||
<div class="roadmap-desc">Entscheidungen treffen mit <code>if</code>, <code>elif</code>, <code>else</code>, Vergleichs- und Logikoperatoren (<code>and</code>, <code>or</code>, <code>not</code>).</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G04 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G05 -->
|
||
<a href="g05_schleifen_und_wiederholungen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G05</span>
|
||
<div class="roadmap-title">🎡 Schleifen & Wiederholungen</div>
|
||
<div class="roadmap-desc">Zählschleifen mit <code>for in range(...)</code>, Bedingungsschleifen mit <code>while</code>, <code>break</code> & <code>continue</code>.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G05 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G06 -->
|
||
<a href="g06_funktionen_und_module/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G06</span>
|
||
<div class="roadmap-title">🪄 Eigene Funktionen & Module</div>
|
||
<div class="roadmap-desc">Wiederverwendbarer Code mit <code>def</code>, <code>return</code>, Parametern, Scope und Modulen (<code>math</code>, <code>random</code>).</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G06 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G07 -->
|
||
<a href="g07_listen_und_sequenzen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G07</span>
|
||
<div class="roadmap-title">📋 Listen & Sequenzen</div>
|
||
<div class="roadmap-desc">Elemente speichern, Indexzugriff, Slicing (<code>[1:4]</code>), Listen-Methoden (<code>append</code>, <code>pop</code>) & <code>sum/len/min/max</code>.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G07 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G08 -->
|
||
<a href="g08_textverarbeitung_und_strings/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G08</span>
|
||
<div class="roadmap-title">🔤 Textverarbeitung & Strings</div>
|
||
<div class="roadmap-desc">String-Methoden wie <code>.strip()</code>, <code>.replace()</code>, <code>.split()</code>, <code>.join()</code> und Palindrom-Analyse.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G08 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G09 -->
|
||
<a href="g09_dictionaries_und_sets/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G09</span>
|
||
<div class="roadmap-title">🗃️ Dictionaries & Sets</div>
|
||
<div class="roadmap-desc">Schlüssel-Wert-Paare (<code>{key: val}</code>), sicheres <code>.get()</code>, Telefonbuch-Suche & Mengen (<code>set</code>) ohne Duplikate.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G09 öffnen →</div>
|
||
</a>
|
||
|
||
<!-- G10 -->
|
||
<a href="g10_comprehensions_datum_algorithmen/index.html" class="roadmap-card" style="border-left: 4px solid #3b82f6;">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #dbeafe; color: #1e40af;">Grundlagen G10</span>
|
||
<div class="roadmap-title">🚀 Comprehensions & Algorithmen</div>
|
||
<div class="roadmap-desc">List Comprehensions (<code>[x for x in ...]</code>), <code>datetime</code> für Kalenderberechnungen & Min/Max-Suche.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel G10 öffnen →</div>
|
||
</a>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LEHRPFAD 2: EINSTIEG IN OOP & WERKZEUGE -->
|
||
<section>
|
||
<div class="section-header">
|
||
<div>
|
||
<h2>🛣️ Lehrpfad 2: Einstieg in OOP & Entwickler-Werkzeuge</h2>
|
||
<div class="section-desc">Der Übergang zur Objektorientierung: Baupläne, Methoden, UML, VS Code & Git.</div>
|
||
</div>
|
||
<span class="track-badge track-2-badge">Kapitel 00 bis 06</span>
|
||
</div>
|
||
|
||
<div class="roadmap-grid">
|
||
|
||
<!-- Kapitel 0 -->
|
||
<a href="00_fehlersuche_und_grundlagen/index.html" class="roadmap-card" style="border-left: 4px solid var(--purple);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--purple-light); color: var(--purple);">Warm-up 00</span>
|
||
<div class="roadmap-title">🔍 Fehlersuche & Bugs</div>
|
||
<div class="roadmap-desc">Tracebacks von unten lesen, Einrückungen (IndentationError), Typfehler und Detektiv-Aufgabe.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 1 -->
|
||
<a href="01_einstieg_klassen/index.html" class="roadmap-card">
|
||
<div>
|
||
<span class="roadmap-number">Kapitel 01</span>
|
||
<div class="roadmap-title">🐶 Die erste Klasse</div>
|
||
<div class="roadmap-desc">Bauplan vs. Objekt, Instanziierung, Punktnotation und Type Hints am Fahrrad- & Haustier-Beispiel.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 2 -->
|
||
<a href="02_init_und_self/index.html" class="roadmap-card">
|
||
<div>
|
||
<span class="roadmap-number">Kapitel 02</span>
|
||
<div class="roadmap-title">💳 Konstruktor & self</div>
|
||
<div class="roadmap-desc">Wie <code>__init__</code> Objekte startklar macht, was <code>self</code> bedeutet und erste UML-Klassendiagramme.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 3 -->
|
||
<a href="03_methoden_und_verhalten/index.html" class="roadmap-card">
|
||
<div>
|
||
<span class="roadmap-number">Kapitel 03</span>
|
||
<div class="roadmap-title">⚔️ Methoden & Verhalten</div>
|
||
<div class="roadmap-desc">Objekte führen Aktionen aus! Interaktion zwischen Objekten in Rennautos und RPG-Heldenduellen.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 4 -->
|
||
<a href="04_str_und_darstellung/index.html" class="roadmap-card">
|
||
<div>
|
||
<span class="roadmap-number">Kapitel 04</span>
|
||
<div class="roadmap-title">🧾 Schöne Textausgabe</div>
|
||
<div class="roadmap-desc">Wie man <code>print(objekt)</code> mit <code>__str__</code> lesbar macht und Rechnungsdruck im Warenkorb.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 4b -->
|
||
<a href="04b_umstieg_vscode/index.html" class="roadmap-card" style="border-left: 4px solid var(--secondary);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #e0f2fe; color: #0284c7;">Exkurs 04b</span>
|
||
<div class="roadmap-title">🚀 Installation & Setup VS Code</div>
|
||
<div class="roadmap-desc">Installationsanleitung (Win/Mac/Linux), Plugins (Error Lens, Python), Shortcuts & Terminal.</div>
|
||
</div>
|
||
<div class="roadmap-footer">VS Code Guide →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 4c (Git) -->
|
||
<a href="04c_git_und_versionskontrolle/index.html" class="roadmap-card" style="border-left: 4px solid var(--success);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--success-light); color: var(--success);">Exkurs 04c</span>
|
||
<div class="roadmap-title">🌿 Git & Versionskontrolle</div>
|
||
<div class="roadmap-desc">Die Programmier-Zeitmaschine: Spielstände (Commits) sichern, Diffs in VS Code, Terminal & Push.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Git Guide →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 5 -->
|
||
<a href="05_objekte_kombinieren/index.html" class="roadmap-card">
|
||
<div>
|
||
<span class="roadmap-number">Kapitel 05</span>
|
||
<div class="roadmap-title">🎵 Assoziation & Komposition</div>
|
||
<div class="roadmap-desc">Objekte verwalten andere Objekte: Song-Suche, Längenberechnung und Filter in Spotify-Playlists.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 6 -->
|
||
<a href="06_abschlussprojekt_tamagotchi/index.html" class="roadmap-card">
|
||
<div>
|
||
<span class="roadmap-number">Kapitel 06</span>
|
||
<div class="roadmap-title">🥚 Mini-Projekt: Tamagotchi</div>
|
||
<div class="roadmap-desc">Kombiniere alles in einem voll spielbaren, interaktiven virtuellen Haustier für dein Terminal!</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LEHRPFAD 3: FORTGESCHRITTENES OOP -->
|
||
<section>
|
||
<div class="section-header">
|
||
<div>
|
||
<h2>🛣️ Lehrpfad 3: Fortgeschrittenes OOP, Testing & Desktop-GUIs</h2>
|
||
<div class="section-desc">Professionelle Softwaretechnik: Speicherverwaltung, Vererbung, TDD-Tests, Persistenz und GUIs.</div>
|
||
</div>
|
||
<span class="track-badge track-3-badge">Kapitel 07 bis 16</span>
|
||
</div>
|
||
|
||
<div class="roadmap-grid">
|
||
|
||
<!-- Kapitel 7 -->
|
||
<a href="07_referenzen_und_speicher/index.html" class="roadmap-card" style="border-left: 4px solid var(--success);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--success-light); color: var(--success);">Kapitel 07</span>
|
||
<div class="roadmap-title">🌳 Referenzen & Stammbäume</div>
|
||
<div class="roadmap-desc">Speicherbereiche im RAM, Aliasing (<code>b = a</code>), <code>is</code> vs. <code>==</code> und Familienstammbäume.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 8 -->
|
||
<a href="08_operator_overloading_dunder/index.html" class="roadmap-card" style="border-left: 4px solid var(--secondary);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #e0f2fe; color: #0284c7;">Kapitel 08</span>
|
||
<div class="roadmap-title">➕ Operator Overloading & Dunder</div>
|
||
<div class="roadmap-desc">Eigene Klassen rechenbar machen mit <code>__add__</code>, <code>__mul__</code>, <code>__eq__</code> für 2D-Vektoren & Wegstrecken.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 9 -->
|
||
<a href="09_eigene_unit_tests_schreiben/index.html" class="roadmap-card" style="border-left: 4px solid var(--primary);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--primary-light); color: var(--primary);">Kapitel 09</span>
|
||
<div class="roadmap-title">🧪 Eigene Unit Tests & TDD</div>
|
||
<div class="roadmap-desc">Schreibe eigene Testsuiten mit <code>unittest</code>, <code>self.assertEqual()</code>, <code>assertRaises()</code> und lerne TDD.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 10 -->
|
||
<a href="10_vererbung_und_super/index.html" class="roadmap-card" style="border-left: 4px solid var(--primary);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--primary-light); color: var(--primary);">Kapitel 10</span>
|
||
<div class="roadmap-title">🧬 Vererbung & super()</div>
|
||
<div class="roadmap-desc">DRY-Prinzip, Basis- & Kindklassen, <code>super().__init__()</code>, Methoden erweitern & Fahrzeugflotten.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 11 -->
|
||
<a href="11_polymorphie_und_interfaces/index.html" class="roadmap-card" style="border-left: 4px solid var(--secondary);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #e0f2fe; color: #0284c7;">Kapitel 11</span>
|
||
<div class="roadmap-title">🎭 Polymorphie & Interfaces</div>
|
||
<div class="roadmap-desc">Vielgestaltigkeit, Duck Typing, abstrakte Basisklassen (<code>ABC</code>), Geometrie-Engine & Zeichenflächen.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 12 -->
|
||
<a href="12_exceptions_und_fehlerbehandlung/index.html" class="roadmap-card" style="border-left: 4px solid var(--danger);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--danger-light); color: var(--danger);">Kapitel 12</span>
|
||
<div class="roadmap-title">🛡️ Exceptions & Fehlerbehandlung</div>
|
||
<div class="roadmap-desc">Robuste Fehlerkontrolle mit <code>try-except-else-finally</code>, <code>raise</code> und eigene Fehlerklassen im Banking.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 13 -->
|
||
<a href="13_persistenz_json_und_csv/index.html" class="roadmap-card" style="border-left: 4px solid var(--primary);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--primary-light); color: var(--primary);">Kapitel 13</span>
|
||
<div class="roadmap-title">💾 Datei-Persistenz: JSON & CSV</div>
|
||
<div class="roadmap-desc">Dauerhaftes Speichern & Laden: Savegames mit <code>to_dict()</code>/<code>from_dict()</code>, <code>json.dump</code> und CSV-Export.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 14 -->
|
||
<a href="14_gui_mit_tkinter/index.html" class="roadmap-card" style="border-left: 4px solid var(--purple);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--purple-light); color: var(--purple);">Kapitel 14</span>
|
||
<div class="roadmap-title">🖥️ Desktop-GUIs mit Tkinter</div>
|
||
<div class="roadmap-desc">Fenster, Buttons, Labels, Grid-Layout, Event-Loop und MVC-Architektur im interaktiven Zähler & Rechner.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 15 -->
|
||
<a href="15_parameter_und_container/index.html" class="roadmap-card" style="border-left: 4px solid var(--success);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: var(--success-light); color: var(--success);">Kapitel 15</span>
|
||
<div class="roadmap-title">🎒 Parameter & Eigene Container</div>
|
||
<div class="roadmap-desc">Variable Argumente (<code>*args</code>, <code>**kwargs</code>), Unpacking und Container-Dunder (<code>len</code>, <code>[]</code>, <code>in</code>, <code>iter</code>) im Gaming-Inventar.</div>
|
||
</div>
|
||
<div class="roadmap-footer">Kapitel öffnen →</div>
|
||
</a>
|
||
|
||
<!-- Kapitel 16 -->
|
||
<a href="16_master_abschlussprojekt/index.html" class="roadmap-card" style="border-left: 4px solid #f59e0b; background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);">
|
||
<div>
|
||
<span class="roadmap-number" style="background: #fef3c7; color: #b45309; font-weight: bold;">🏆 Kapitel 16 • Masterprojekt</span>
|
||
<div class="roadmap-title">🐾 PetCare & Tierheim-Manager</div>
|
||
<div class="roadmap-desc">Das große Meisterstück: MVC-Architektur, Vererbung, Polymorphie, JSON-Savegames, CSV-Export & Tkinter Desktop-App!</div>
|
||
</div>
|
||
<div class="roadmap-footer" style="color: #b45309; font-weight: bold;">Meisterstück starten →</div>
|
||
</a>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AUSFÜHRLICHE TEST-ANLEITUNG -->
|
||
<section class="card" style="margin-top: 35px; border-left: 5px solid var(--primary);">
|
||
<h2>🧪 Wie benutze ich die Tests? (Komplette Test-Anleitung)</h2>
|
||
|
||
<p>
|
||
In der professionellen Softwareentwicklung schreibt man zu jedem Code automatische <strong>Unit Tests</strong>.
|
||
Das Geniale daran: <strong>Du musst nie raten, ob deine Lösung stimmt!</strong> Das Testskript überprüft deine Funktionen in Sekundenbruchteilen mit vielen verschiedenen Testfällen.
|
||
</p>
|
||
|
||
<h3>1. Einen Test für ein einzelnes Kapitel ausführen</h3>
|
||
<p>Öffne das Terminal in VS Code mit <kbd>Strg</kbd> + <kbd>`</kbd> (Mac: <kbd>Cmd</kbd> + <kbd>`</kbd>). Wechsle in den jeweiligen Kapitelordner und starte das Testskript:</p>
|
||
|
||
<div class="code-container">
|
||
<div class="code-header">
|
||
<span>Terminal (Beispiel für Grundlagen G01)</span>
|
||
</div>
|
||
<pre><code>cd g01_erste_schritte_taschenrechner
|
||
python3 test_aufgabe.py</code></pre>
|
||
</div>
|
||
|
||
<h3>2. Wie lese ich das Testergebnis?</h3>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 15px 0;">
|
||
|
||
<div style="background: var(--success-light); border: 1px solid var(--success); border-radius: var(--radius-sm); padding: 14px;">
|
||
<h4 style="color: var(--success); margin-bottom: 6px;">✅ Alles bestanden (OK)</h4>
|
||
<pre style="padding: 6px; font-size: 0.82rem; background: rgba(0,0,0,0.05); color: #064e3b; border-radius: 4px;"><code>Ran 4 tests in 0.002s
|
||
OK</code></pre>
|
||
<p style="font-size: 0.88rem; margin: 6px 0 0 0; color: #064e3b;">Perfekt! Alle Anforderungen sind erfüllt. Du bist bereit für das nächste Kapitel!</p>
|
||
</div>
|
||
|
||
<div style="background: var(--warning-light); border: 1px solid var(--warning); border-radius: var(--radius-sm); padding: 14px;">
|
||
<h4 style="color: var(--warning); margin-bottom: 6px;">❌ Falsches Ergebnis (FAIL)</h4>
|
||
<pre style="padding: 6px; font-size: 0.82rem; background: rgba(0,0,0,0.05); color: #78350f; border-radius: 4px;"><code>AssertionError: 25 != 40
|
||
berechne_endstand falsch</code></pre>
|
||
<p style="font-size: 0.88rem; margin: 6px 0 0 0; color: #78350f;">Dein Code stürzt nicht ab, aber liefert einen falschen Wert (z.B. falsche Rechenformel).</p>
|
||
</div>
|
||
|
||
<div style="background: var(--danger-light); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: 14px;">
|
||
<h4 style="color: var(--danger); margin-bottom: 6px;">💥 Absturz / Syntax (ERROR)</h4>
|
||
<pre style="padding: 6px; font-size: 0.82rem; background: rgba(0,0,0,0.05); color: #7f1d1d; border-radius: 4px;"><code>AttributeError: 'Fahrrad'
|
||
object has no attribute 'gang'</code></pre>
|
||
<p style="font-size: 0.88rem; margin: 6px 0 0 0; color: #7f1d1d;">Ein Attribut oder Methodenname fehlt oder ist falsch geschrieben (z.B. Tippfehler).</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h3>3. Gesamten Kursfortschritt auf einen Klick prüfen</h3>
|
||
<p>Du möchtest wissen, wie viele Kapitel du schon gelöst hast? Führe im Hauptordner <code>Aufgaben-Python</code> einfach folgenden Befehl aus:</p>
|
||
|
||
<div class="code-container">
|
||
<div class="code-header">
|
||
<span>Terminal (Hauptordner)</span>
|
||
</div>
|
||
<pre><code>python3 test_all.py</code></pre>
|
||
</div>
|
||
|
||
<div class="box box-tipp">
|
||
<div class="box-title">💡 Die 3 goldenen Regeln beim Arbeiten mit Tests:</div>
|
||
<ol style="margin-left: 20px; margin-top: 6px;">
|
||
<li style="margin-bottom: 6px;"><strong>Immer <code>return</code> statt nur <code>print()</code>:</strong> Tests prüfen das, was eine Funktion mit <code>return</code> zurückliefert. Ein <code>print()</code> zeigt es zwar auf dem Bildschirm an, reicht dem Test aber nicht!</li>
|
||
<li style="margin-bottom: 6px;"><strong>Exakte Namen beachten:</strong> Wenn die Aufgabe <code>def addieren(a, b):</code> verlangt, darf die Funktion nicht <code>def Addieren</code> heißen (Python unterscheidet Groß- und Kleinschreibung).</li>
|
||
<li style="margin-bottom: 6px;"><strong>Fehlermeldungen von unten nach oben lesen:</strong> Ganz unten steht immer genau, was nicht gepasst hat!</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ & Troubleshooting Card -->
|
||
<section class="card">
|
||
<h2>🩺 Häufige Fragen & Troubleshooting</h2>
|
||
|
||
<details>
|
||
<summary>❌ Fehlermeldung: <code>TypeError: ... takes 0 positional arguments but 1 was given</code></summary>
|
||
<div class="details-content">
|
||
<p><strong>Ursache:</strong> Du hast bei einer Methode in deiner Klasse das <code>self</code> im Methodenkopf vergessen!</p>
|
||
<p><strong>Lösung:</strong> Schreibe <code>def meine_methode(self):</code> statt <code>def meine_methode():</code>.</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details>
|
||
<summary>❌ Fehlermeldung: <code>AttributeError: 'NoneType' object has no attribute '...'</code></summary>
|
||
<div class="details-content">
|
||
<p><strong>Ursache:</strong> Eine Funktion oder Methode hat nichts zurückgegeben (also <code>None</code>), und du versuchst, darauf zuzugreifen.</p>
|
||
<p><strong>Lösung:</strong> Prüfe, ob du am Ende der Methode das <code>return ...</code> vergessen hast!</p>
|
||
</div>
|
||
</details>
|
||
|
||
<details>
|
||
<summary>❌ Wie wechsle ich im Terminal zwischen den Ordnern hin und her?</summary>
|
||
<div class="details-content">
|
||
<p><strong>In einen Unterordner hinein:</strong> <code>cd g01_erste_schritte_taschenrechner</code></p>
|
||
<p><strong>Einen Ordner nach oben zurück:</strong> <code>cd ..</code></p>
|
||
<p><strong>Inhalt des aktuellen Ordners auflisten:</strong> <code>ls</code> (oder <code>dir</code> auf Windows)</p>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Lokale Gamification-Scripts (funktionieren auch offline per Doppelklick via file://) -->
|
||
<script src="assets/gamification_data.js"></script>
|
||
<script src="assets/gamification.js"></script>
|
||
</body>
|
||
</html>
|