it-praxisportal/index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Python OOP Lernportal: Klassen & Objekte</title>
  <link rel="stylesheet" href="assets/style.css">
</head>
<body>

  <header>
    <div class="header-container">
      <div class="header-badge">🐍 Python Nachhilfe & Selbstlern-Kurs</div>
      <h1>Objektorientierte Programmierung (OOP)</h1>
      <p>Lerne Schritt für Schritt, wie du eigene Klassen baust, Methoden nutzt und komplexe Programme strukturierst.</p>
    </div>
  </header>

  <main class="container">

    <!-- Willkommen Card -->
    <section class="card">
      <h2>👋 Willkommen zu deiner Übungsreihe!</h2>
      <p>
        Dieser Kurs begleitet dich durch die gesamte Objektorientierte Programmierung in Python – exakt abgestimmt auf dein Schulskriptum, aber mit viel mehr Erklärungen, Analogien, Visualisierungen und automatischen Tests!
      </p>
      
      <div class="box box-analogie">
        <div class="box-title">🏗️ Die Grundidee von OOP in einem Satz:</div>
        Eine <strong>Klasse</strong> ist wie ein Bauplan (oder eine Plätzchen-Ausstechform). Ein <strong>Objekt</strong> ist das fertige Haus (oder das gebackene Plätzchen), das nach diesem Bauplan entstanden ist!
      </div>

      <div class="box box-tipp">
        <div class="box-title">📚 Schulabgleich &amp; Lehrplan:</div>
        Alle Kapitel sind 1:1 mit den Themen deines Informatik-Unterrichts (Type Hints, UML, Assoziationen, Referenzen, Vererbung, Tkinter) abgestimmt.
      </div>
    </section>

    <!-- PHASE 1: GRUNDLAGEN -->
    <section>
      <h2 style="margin: 30px 0 10px 0; color: var(--text-main); font-size: 1.4rem;">🌱 Phase 1: Grundlagen OOP &amp; Entwicklungsumgebung</h2>
      <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 &amp; Bugs</div>
            <div class="roadmap-desc">Tracebacks richtig lesen, Einrückungsfehler (IndentationError), Typfehler und Detektiv-Aufgabe.</div>
          </div>
          <div class="roadmap-footer">Vorkapitel öffnen &rarr;</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- &amp; Haustier-Beispiel.</div>
          </div>
          <div class="roadmap-footer">Kapitel öffnen &rarr;</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 &rarr;</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 &rarr;</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 &rarr;</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">🚀 Umstieg &amp; Installation VS Code</div>
            <div class="roadmap-desc">Installationsanleitung (Win/Mac/Linux), Plugins (Error Lens, Python), Shortcuts &amp; Terminal.</div>
          </div>
          <div class="roadmap-footer">VS Code Guide öffnen &rarr;</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 &rarr;</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 &rarr;</div>
        </a>

      </div>
    </section>

    <!-- PHASE 2: FORTGESCHRITTENES OOP -->
    <section>
      <h2 style="margin: 35px 0 10px 0; color: var(--text-main); font-size: 1.4rem;">🧠 Phase 2: Fortgeschrittenes OOP, Speicher &amp; Persistenz</h2>
      <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 &amp; Stammbäume</div>
            <div class="roadmap-desc">Speicherbereiche im RAM, Aliasing (<code>b = a</code>), <code>is</code> vs. <code>==</code> und Familienstammbaum-Klassen.</div>
          </div>
          <div class="roadmap-footer">Kapitel 07 öffnen &rarr;</div>
        </a>

        <!-- Vorschau Kapitel 8 -->
        <div class="roadmap-card" style="opacity: 0.85;">
          <div>
            <span class="roadmap-number">Kapitel 08 &bull; Geplant</span>
            <div class="roadmap-title">➕ Operator Overloading &amp; Dunder</div>
            <div class="roadmap-desc">Eigene Klassen rechen- und vergleichbar machen mit <code>__add__</code>, <code>__eq__</code>, <code>__lt__</code> für 2D-Vektoren &amp; Kartenspiele.</div>
          </div>
          <div class="roadmap-footer" style="color: var(--text-muted);">In Vorbereitung &bull; Schulabgleich 28.0</div>
        </div>

        <!-- Vorschau Kapitel 9 -->
        <div class="roadmap-card" style="opacity: 0.85;">
          <div>
            <span class="roadmap-number">Kapitel 09 &bull; Geplant</span>
            <div class="roadmap-title">🧬 Vererbung &amp; super()</div>
            <div class="roadmap-desc">Basisklassen, Kindklassen, Code-Wiederverwendung und <code>super().__init__()</code> für Fahrzeugflotten &amp; RPG-Helden.</div>
          </div>
          <div class="roadmap-footer" style="color: var(--text-muted);">In Vorbereitung &bull; Schulabgleich 25.0</div>
        </div>

        <!-- Vorschau Kapitel 10-12 -->
        <div class="roadmap-card" style="opacity: 0.85;">
          <div>
            <span class="roadmap-number">Kapitel 10 - 12 &bull; Geplant</span>
            <div class="roadmap-title">🛡️ Exceptions, Persistenz &amp; GUI</div>
            <div class="roadmap-desc">Polymorphie (10), Eigene Fehlerklassen (11), Spielstände dauerhaft mit JSON/CSV sichern (12) und Desktop-Apps mit Tkinter (13).</div>
          </div>
          <div class="roadmap-footer" style="color: var(--text-muted);">Ausführlicher Plan in LEHRPLAN.md</div>
        </div>

      </div>
    </section>

    <!-- Wie lerne ich Card -->
    <section class="card" style="margin-top: 35px;">
      <h2>🚀 Wie du vorgehst (Schritt-für-Schritt)</h2>
      <ol style="margin-left: 20px; margin-bottom: 15px;">
        <li style="margin-bottom: 8px;">Wähle das nächste offene Kapitel aus der Liste oben (starte mit Kapitel 00 zum Warm-up).</li>
        <li style="margin-bottom: 8px;">Lies die Erklärungen und schau dir die vollständigen Codebeispiele an.</li>
        <li style="margin-bottom: 8px;">Öffne die <code>aufgabe.py</code> im entsprechenden Kapitelordner und löse die Aufgaben.</li>
        <li style="margin-bottom: 8px;">
          Führe im Terminal den automatischen Test aus:
          <div class="code-container" style="margin: 10px 0;">
            <div class="code-header">
              <span>Terminal</span>
            </div>
            <pre><code>python3 test_aufgabe.py</code></pre>
          </div>
        </li>
        <li>Wenn alle Tests mit <strong>OK</strong> durchlaufen, hast du das Kapitel erfolgreich gemeistert! 🎉</li>
      </ol>

      <div class="box box-tipp">
        <div class="box-title">💡 Gesamten Fortschritt auf einen Blick prüfen:</div>
        Du kannst jederzeit im Hauptordner folgenden Befehl ausführen, um zu sehen, wie viele Kapitel du schon gelöst hast:
        <div class="code-container" style="margin: 8px 0 0 0;">
          <pre><code>python3 test_all.py</code></pre>
        </div>
      </div>
    </section>

  </main>

</body>
</html>