🚀 Bedienungsanleitung: Dein KI-Code-Coach für Web-Development
⚡ Schnellstart: So programmierst du mit dem Code-Coach
Dieser Assistent ist dein Mentor für HTML, CSS und JavaScript. Er gibt dir nicht einfach nur die Lösung, sondern hilft dir, das "Warum" hinter dem Code zu verstehen. So startest du:
- Aufgabe wählen: Wähle aus dem Menü eine Option (z. B. "Fehlersuche (Bugfix)" oder "Responsive Design") oder stelle eine eigene Frage.
- Code teilen: Du musst nicht alles tippen! Kopiere deinen Code in das Textfeld oder lade deine Projektdateien (.html, .css, .js) direkt hoch. Die KI liest den Quellcode exakt so aus, wie er in deinem Editor steht.
- Interaktiv lernen: Die Antwort erscheint im Chat. Du kannst jede Nachricht einfach anklicken, um sie zurück ins Schreibfeld zu holen und gemeinsam mit der KI weiter zu verfeinern.
- Code sichern: Den fertigen Code kannst du kopieren und direkt in deinen Editor (z. B. VS Code) einfügen oder als Dokument speichern.
🛠️ Deine Entwickler-Tools im Detail
1. Intelligenter Code-Verlauf
Das Tool merkt sich euren Dialog. Wenn du eine Lösung bereits hattest, aber nun eine neue Funktion hinzufügen möchtest, bleibt der Kontext erhalten.
💡 Schnelles Iterieren: Möchtest du eine bestimmte Code-Zeile anpassen? Klicke einfach auf die entsprechende Chat-Blase. Der Code springt zurück ins Eingabefeld und du kannst ihn ergänzen oder ändern.
2. Der 🔍 Debugging-Modus (Lernmodus)
Wenn du den speziellen "Debugging-Modus" aktivierst, gibt die KI nicht sofort die fertige Lösung aus.
Was ist der Vorteil? Die KI verhält sich wie ein Senior-Entwickler. Sie stellt dir Fragen zur Browser-Konsole oder zu deinen Variablen, damit du den Fehler selbst findest. Das ist der schnellste Weg, um ein echter Profi zu werden!
3. Code- & Dokumenten-Upload 📂
Du musst deinen Code nicht mühsam kopieren und einfügen. Du kannst Dateien direkt hochladen:
- Web-Dateien: Lade .html, .css und .js Dateien hoch. Die KI analysiert den reinen Quelltext und erkennt sofort Syntaxfehler oder Logikprobleme.
- Dokumente: Lade PDFs oder Word-Dateien hoch (z.B. Aufgabenstellungen deines Lehrers oder Design-Vorgaben).
- Interaktion: Die KI integriert den Inhalt der Datei direkt in euer Gespräch, sodass du sofort Fragen zum hochgeladenen Code stellen kannst.
4. Barrierefreiheit & Audio
- 🎤 Mikrofon-Button: Beschreibe dein Problem einfach per Sprache, wenn das Tippen von langen Erklärungen zu mühsam ist.
- 🔊 Vorlesen-Button: Lass dir die Erklärungen zur Logik eines Code-Abschnitts vorlesen, um sie besser zu verstehen.
📄 Deinen Code exportieren
Alle Werkzeuge am oberen Bildschirmrand beziehen sich immer auf die aktuellste Antwort der KI:
- 📋 Kopieren: Überträgt den Code-Block sofort in die Zwischenablage. Ideal für den schnellen Transfer in deinen Editor.
- 📄 Word / PDF: Erstellt eine Dokumentation deiner Lernschritte oder eine Zusammenfassung der Code-Erklärungen – perfekt für die Projektdokumentation.
💡 Tipps für erstklassigen Code
Die KI hilft dir am besten, wenn du präzise beschreibst, was passieren soll. Nutze die Klick-Funktion, um deinen Code Schritt für Schritt zu optimieren!
Hinweis: Code blind zu kopieren bringt keinen Lerneffekt. Nutze den Debugging-Modus und frage nach dem "Warum"!
📌 Kurzübersicht der Funktionen
| Button / Symbol | Funktion |
|---|---|
| Aktions-Button (z.B. Code analysieren) | Startet die Analyse deines Codes und generiert die Lösung/Erklärung. |
| Abbrechen | Stoppt die KI sofort, falls du merkst, dass die Antwort in die falsche Richtung geht. |
| Chat-Blase (Klick) | Übernimmt Code oder Texte aus dem Verlauf zurück in das Feld zur weiteren Bearbeitung. |
| ✕ (im Textfeld) | Leert das Eingabefeld schnell für eine neue Anfrage. |
| 📋 / 📄 / 🔊 | Kopiert den Code, speichert die Doku oder liest die letzte Antwort vor. |