Arbeitsblatt: Website bauen mit Claude Code

Schritt 1 — Was soll meine Website zeigen?

Vor dem Start: Klar denken

Je konkreter du weißt was du willst, desto besser wird das Ergebnis. Diese Fragen werden dein erster Prompt für Claude Code.

Der Unterschied zu Lovable: Claude Code baut direkte HTML/CSS-Dateien auf deinem Computer — du hast volle Kontrolle über jeden Teil der Website. Lovable hostet alles in der Cloud, Claude Code legt die Dateien lokal ab.

Mein Unternehmen / Projekt:

Name, was du anbietest, wer deine Kunden sind

Welche Seiten soll die Website haben?

Fang klein an — 3 bis 4 Seiten reichen für den Start

Welche Informationen müssen unbedingt drauf?

Leistungen, Preise, Team, Referenzen, Kontaktdaten — was ist wichtig?

Stil & Farben:

Schritt 2 — VS Code mit Claude Code öffnen

Die Entwicklungsumgebung starten

VS Code ist dein Arbeitsbereich — Claude Code ist direkt integriert und wartet auf deine Befehle. Kein separates Terminal nötig.

Was ist VS Code? Visual Studio Code ist ein kostenloses Programm von Microsoft — wie ein sehr intelligenter Texteditor. Claude Code ist direkt darin eingebaut und sieht alle Dateien, die du erstellst.

1

VS Code öffnen und neuen Ordner erstellen

VS Code starten → oben „Datei" → „Ordner öffnen" → einen neuen Ordner für deine Website erstellen (z.B. meine-website) → Ordner auswählen. VS Code zeigt jetzt den leeren Ordner links in der Dateiübersicht.

2

Claude Code öffnen

In VS Code auf das Claude Code Symbol in der linken Seitenleiste klicken — oder oben im Menü „Claude Code" auswählen. Das Claude Code Chatfenster öffnet sich rechts oder unten. Du siehst ein Eingabefeld — dort gibst du deine Befehle ein.

3

Claude Code ist bereit

Claude Code sieht automatisch deinen geöffneten Ordner und alle Dateien darin. Du kannst jetzt in normaler Sprache schreiben was du möchtest — Claude Code baut, bearbeitet und speichert Dateien direkt in deinem Ordner.

💡 Was tun wenn etwas nicht klappt?

Fehlermeldung einfach ins Claude Code Chatfenster kopieren und fragen: „Was bedeutet das und wie behebe ich es?" — Claude Code erklärt und löst das Problem selbst.

Schritt 3 — Website bauen

Der erste Prompt an Claude Code

Claude Code versteht normale Sprache. Schreib deinen Auftrag so als würdest du einem Webdesigner erklären was du willst — konkret und vollständig.

❌ Zu vage

„Bau mir eine Website."

✅ Konkret & vollständig

„Bau eine professionelle Website für [Firma] mit Startseite, Leistungen und Kontaktseite. Stil: modern, Farbe Dunkelblau. Navigation oben."

Vorlage (ins Claude Code Chatfenster in VS Code kopieren & anpassen):

Erstelle eine vollständige Website für [UNTERNEHMENSNAME] als HTML/CSS-Dateien.

Die Website braucht diese Seiten:
- index.html: Startseite mit Hero-Bereich, Leistungsübersicht und Kontakt-Button
- leistungen.html: Detaillierte Leistungsbeschreibung mit [LEISTUNG 1], [LEISTUNG 2], [LEISTUNG 3]
- ueber-uns.html: Kurze Vorstellung, Erfahrung, warum uns wählen
- kontakt.html: Kontaktformular mit Name, E-Mail, Nachricht und Absenden-Button

Design-Anforderungen:
- Modernes, professionelles Design
- Primärfarbe: [DEINE FARBE, z.B. #1e3a8a]
- Navigation oben mit Links zu allen Seiten
- Footer mit Adresse und E-Mail auf jeder Seite
- Mobile-freundlich (responsive)
- Alle Texte auf Deutsch

Starte mit der index.html.

Mein fertiger Prompt für Claude Code:

Schreib hier deinen personalisierten Prompt — dann kannst du ihn direkt ins Terminal kopieren.

Was hat Claude Code gebaut? Erste Eindrücke:

Schritt 4 — Verfeinern im Chat

Die Website verbessern

Claude Code bleibt geöffnet und wartet auf weitere Befehle. Du kannst jetzt in normaler Sprache Änderungen beschreiben — Claude Code setzt sie direkt um.

So funktioniert die Iteration: Beschreib genau was du ändern willst. „Mach es schöner" ist zu vage — „Mach den Hero-Bereich größer, zentriere den Text und füge einen Button hinzu" ist konkret genug.

Verfeinere deine Website — klick auf einen Chip oder schreib selbst:

Mobile Navigation Kundenstimmen Call-to-Action Typografie FAQ-Sektion Footer ausbauen SEO optimieren Preisseite

Welche 3 Verbesserungen hast du vorgenommen — und was hat gut funktioniert?

Schritt 5 — Veröffentlichen

Die Website live schalten

Claude Code hat die Dateien auf deinem Computer erstellt. Mit Netlify Drop ist die Website in 30 Sekunden online — kostenlos, kein Account nötig.

1

Netlify Drop öffnen

Im Browser öffnen: app.netlify.com/drop — keine Registrierung nötig. Du siehst eine große Drag-and-Drop-Fläche.

2

Ordner hochladen

Den meine-website-Ordner von deinem Computer in die Drag-and-Drop-Fläche ziehen. Netlify lädt alle Dateien automatisch hoch.

3

URL kopieren und teilen

Netlify generiert sofort eine URL wie zufaellig-name.netlify.app. Die Seite ist live — einfach den Link teilen.

⚡ Schnell-Tipp: Eigene Domain

Für eine professionelle Domain (z.B. mein-unternehmen.de) einfach einen Netlify-Account erstellen und die Domain dort verbinden — kostet unter 1 €/Jahr im ersten Jahr bei Strato oder IONOS.

Meine Website-URL: Was hat mich am meisten überrascht — was war einfacher als gedacht?

Schritt 6 — Dein Fahrplan

Was du diese Woche noch tust

✅ Website-URL an 3 Personen schicken und echtes Feedback einholen

✏️ Platzhalter-Texte durch echte eigene Inhalte ersetzen

📸 Eigene Bilder einfügen: Claude Code sagen „Ersetze das Hero-Bild durch dieses Foto"

📱 Mobilansicht prüfen — Smartphone-Browser öffnen und URL eingeben

🔗 Domain kaufen und mit Netlify verbinden — professioneller Auftritt

🚀 Nächste Woche: Eine zweite Website oder Landingpage für ein konkretes Angebot bauen

Was würde ich als nächstes Projekt mit Claude Code bauen?

„Der Unterschied zwischen Lovable und Claude Code: Lovable baut in der Cloud — Claude Code baut auf deinem Computer. Du hast volle Kontrolle." 💻

Ergebnis senden

Arbeitsblatt an den Kursleiter senden

Alle deine Antworten und deine Website-URL werden automatisch gesammelt und per E-Mail übermittelt.

Oder speichere das Arbeitsblatt lokal als PDF.
Klicke auf den Button und wähle „Als PDF speichern".

Kein Login · Keine Cookies · Keine Weitergabe an Dritte