Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
Die HTML-Datei, die Claude ausspuckt, sieht anfangs ganz gut aus. Aber sobald es mehr als 3 Seiten sind, wird die Bearbeitung zum Albtraum. Es ist Zeitverschwendung, 10 Dateien öffnen zu müssen, nur um die Schriftgröße einmal zu ändern. Trenne den Code.
<head>-Bereich deines Haupt-HTMLs <link rel="stylesheet" href="/assets/css/global.css"> ein und verwalte die Styles zentral.Auf diese Weise werden Änderungen sofort auf alle Seiten angewendet, selbst wenn du nur den Header bearbeitest. Du musst nicht jedes Mal Zeit damit verschwenden, jede Datei einzeln zu ändern.
Gib Farbcodes nicht direkt in jeder Komponente ein. Wenn du die Button-Farbe ändern willst, müsstest du sonst tausende Zeilen durchsuchen. Verwende stattdessen CSS-Variablen.
:root { --main-color: #000000; --sub-color: #ffffff; }.background-color: var(--main-color);.Wenn sich die Markenfarbe später ändert, bearbeite einfach eine Datei für 3 Sekunden. Die Farbe der Buttons auf allen Seiten ändert sich gleichzeitig. Das ist wesentlich effizienter, als das Design jedes Mal manuell anzupassen.
Wenn du ständig den Code änderst, zum Browser zurückkehrst und die Seite neu lädst, verlierst du den Fokus. Installiere die Live Server-Erweiterung für VS Code.
Sieh Änderungen in Echtzeit, ohne ständig neu laden zu müssen. Die Zeit für Design-Anpassungen halbiert sich dadurch.
Claude schreibt den Code jedes Mal anders, wenn man ihn darum bittet. Lege von Anfang an Regeln fest und kommuniziere diese. Erstelle eine Datei namens CLAUDE.md im Stammverzeichnis deines Projektordners.
<code>).Das verhindert erheblich, dass die KI den Code willkürlich verkompliziert.
Mach dir keine Gedanken über Serverkonfigurationen oder komplexe Umgebungen. Mit Vercel funktioniert die Website sofort, sobald du den Code hochlädst.
Du musst den Server nicht selbst verwalten. Die Domain wird automatisch generiert, und wenn ein Problem auftritt, kannst du jederzeit auf eine frühere Version zurückgreifen. Lade deinen Code jetzt direkt hoch.