Kurs
Vibe Coding: Deine Webseite mit KI, Server und eigenem CMS
Die Lernenden planen, bauen, testen und veröffentlichungsreif dokumentieren eine eigene Webseite mit einem KI-gestützten Workflow aus ChatGPT, ihrem Claude-Design-Workflow, Claude Code, eigener Serverstruktur und einem selbst gehosteten CMS.
Christian
Aufbau
- 1Die Webseite als konkretes Projekt definieren
Die Lernenden formulieren Ziel, Zielgruppe, Hauptaktion und mindestens drei Erfolgsmerkmale für ihre Webseite.
- 2Seitenstruktur und Nutzerwege planen
Die Lernenden erstellen eine Sitemap mit mindestens vier Seiten oder Bereichen und beschreiben zwei Nutzerwege bis zur Hauptaktion.
- 3Inhalte und Designauftrag mit KI vorbereiten
Die Lernenden erstellen einen überprüfbaren Content-Plan und einen Designauftrag, der von einem Frontend-Workflow umgesetzt werden kann.
- 4Arbeitsumgebung und Projektordner einrichten
Die Lernenden richten eine lokale Entwicklungsumgebung ein und starten ein leeres Webprojekt im Browser.
- 5Startseite aus Design und Inhalt umsetzen
Die Lernenden bauen eine Startseite mit Navigation, Nutzenversprechen, Angebotsbereichen und klarer Hauptaktion.
- 6Responsivität, Zugänglichkeit und Formulare testen
Die Lernenden prüfen ihre Startseite auf Mobilansicht, Tastaturbedienung, verständliche Struktur und funktionierende Formulare.
- 7Claude Code präzise beauftragen
Die Lernenden schreiben einen Arbeitsauftrag für Claude Code mit Kontext, Aufgabe, Grenzen und Prüfschritten.
- 8Änderungen mit Git sichern
Die Lernenden legen ein Git-Repository an, erstellen mindestens drei verständlich benannte Commits und können einen vorherigen Stand wiederfinden.
- 9Fehler systematisch finden und verbessern
Die Lernenden dokumentieren einen Fehler, reproduzieren ihn, setzen eine abgegrenzte Korrektur um und prüfen die Korrektur.
- 10Server, Domain und Architektur auswählen
Die Lernenden erstellen eine Architekturübersicht für Frontend, CMS, Datenbank, Domain und Sicherungen.
- 11Serverzugang und Deployment sicher einrichten
Die Lernenden richten einen eingeschränkten Serverzugang ein, übertragen ihre Anwendung und prüfen den laufenden Dienst.
- 12Domain, HTTPS, Backups und Wiederherstellung prüfen
Die Lernenden verbinden eine Domain mit ihrer Webseite, prüfen HTTPS und führen eine dokumentierte Testsicherung sowie einen Wiederherstellungstest durch.
- 13CMS-Inhalte und Rollen modellieren
Die Lernenden definieren mindestens zwei Inhaltstypen, passende Felder und Rollen für ihr eigenes CMS.
- 14CMS und Frontend verbinden
Die Lernenden rufen CMS-Inhalte im Frontend ab und zeigen mindestens eine dynamische Listen- und eine Detailansicht an.
- 15Redaktionsablauf, Endtest und Abschlusspräsentation
Die Lernenden veröffentlichen einen Testinhalt über ihr CMS, prüfen die komplette Webseite mit einem Testprotokoll und präsentieren ihren technischen Ablauf.