Mit Claude deine erste Webseite erstellen.
Du beschreibst Inhalt und Aufbau. Claude erzeugt eine HTML-Datei, die du auf deinem Rechner öffnest, überarbeitest und später bewusst veröffentlichen kannst.
Drei Lernstufen · in deinem Tempo · Stand: 10. Oktober 2026
Das kannst du danach
Du baust eine eigene kleine Webseite, passt Text und Gestaltung an und bereitest die geprüften Dateien für das Hosting vor.
Das übernimmt die KI
Claude schreibt den Seitencode. Deine Fakten, Bilder und Entscheidungen bestimmen den Inhalt; die fertige statische Seite braucht kein Sprachmodell.
Dein Werkzeug: Claude
Ein Claude-Zugang und ein Texteditor. Für die optionale Veröffentlichung brauchst du einen geeigneten Hosting-Zugang, etwa GitHub Pages.
Werkzeug öffnen (neuer Tab) Offizielle Hilfe (neuer Tab)
Funktionen, Kontingente und Preise können sich ändern. Prüfe den Zugang direkt beim Anbieter.
Die Aufträge führst du im genannten Werkzeug aus. Die Klickübungen hier zeigen vorbereitete Beispiele und senden keine Daten an einen KI-Dienst.
KI-Funken
Dein erstes Ergebnis mit dem Werkzeug
Erzeuge eine lokal sichtbare Seite
Eine Seite mit drei Abschnitten ist ein guter Anfang. Wir bauen eine fiktive Vereinswerkstatt, ohne Leistungen oder Kontaktangaben zu erfinden.
- Sende den Auftrag und lass dir eine vollständige Datei geben.
- Speichere sie als index.html in einem eigenen Ordner.
- Öffne sie im Browser und prüfe Überschriften, Links und Platzhalter.
Erstelle eine einzelne index.html mit eingebettetem CSS für eine fiktive offene Werkstatt. Abschnitte: Was wir gemeinsam machen, so läuft ein Nachmittag ab, Kontakt. Verwende klare deutsche Texte, semantisches HTML und ein responsives Layout. Fehlende Zeiten und Kontaktdaten als sichtbare Platzhalter. Keine erfundenen Kundenstimmen, externen Bilder oder Formulare ohne Funktion.
Darauf arbeitest du hin: Eine lokal aufrufbare Webseite mit drei übersichtlichen Abschnitten.
Was ist dein erstes überprüfbares Ergebnis?
KI-Werkstatt
Gezielt verbessern und weiterarbeiten
Überarbeite Inhalt und Darstellung
Gib echte Texte abschnittsweise vor. Ein eigenes Foto bindest du als lokale Datei ein, statt einen zufälligen Bildlink zu übernehmen.
- Ersetze die fiktiven Angaben durch deine geprüften Inhalte.
- Lege bei Bedarf ein eigenes Bild neben die HTML-Datei und lass es mit beschreibendem Alt-Text einbinden.
- Prüfe die Seite bei schmalem Fenster und mit der Tastatur. Lass konkrete Probleme korrigieren.
Überarbeite nur den Abschnitt „So läuft ein Nachmittag ab“. Meine Angaben: Ankommen, Vorhaben besprechen, gemeinsam arbeiten, aufräumen. Pro Schritt ein kurzer Satz. Bewahre die übrige Seite. Prüfe anschließend, dass bei 390 Pixel Breite nichts seitlich herausragt.
Darauf arbeitest du hin: Eine Seite mit eigenen Inhalten und überprüfter Darstellung auf kleinem Bildschirm.
Was verändert die gezielte Korrektur?
Die Seite verspricht Kontakt über ein Formular, das nichts versendet.
Die Seite nennt eine bewusst eingerichtete Kontaktmöglichkeit und erklärt deren Verhalten.
Vorbereiteter Vergleich, keine Live-Ausgabe des Werkzeugs.
KI-Regie
Den Ablauf erweitern und selbst nutzen
Bereite die Veröffentlichung vor
Hosting macht Dateien öffentlich. Vorher müssen Platzhalter, Rechte und die für deinen Einsatz erforderlichen Pflichtangaben geklärt sein.
- Prüfe alle Dateien auf private Angaben und ersetze offene Platzhalter.
- Bei GitHub Pages: Lege ein geeignetes Repository an, lade die Dateien hoch und wähle unter Settings → Pages den Veröffentlichungszweig. Prüfe vorher Sichtbarkeit und Bedingungen.
- Öffne die bereitgestellte Adresse in einem privaten Browserfenster und teste Links sowie Darstellung erneut.
Prüfe meine statische Seite vor einer möglichen Veröffentlichung. Liste Platzhalter, defekte lokale Verweise und nicht funktionierende Bedienelemente. Nenne fehlende Informationen, die ich selbst klären muss. Veröffentliche nichts automatisch und erfinde keine rechtlichen Angaben.
Darauf arbeitest du hin: Eine geprüfte Dateifassung und bei bewusst ausgeführtem Hosting eine öffentlich erreichbare Seite.
Ein Kontaktformular hat keinen Versanddienst. Was folgt?
Was ist hängen geblieben?
Was ändert die Veröffentlichung?
Dein eigener Versuch
Wende den Ablauf jetzt auf eine kleine eigene Aufgabe an. Prüfe das tatsächliche Ergebnis im Werkzeug anhand der Kriterien dieser Anleitung. Die vier Klickübungen bestätigen deinen Lernstand auf dieser Seite, nicht die erfolgreiche Ausführung im externen Dienst.
Weitere Übungen zum Thema programmieren