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 Offizielle Hilfe
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.// Kurz prüfen
Was ist dein erstes überprüfbares Ergebnis?
Wähle eine Antwort.
Richtig. So kannst du Inhalt und Verhalten selbst prüfen.
Nicht ganz. Schau dir die andere Antwort noch einmal an. So kannst du Inhalt und Verhalten selbst prüfen.
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.// Vorher / Nachher
Was verändert die gezielte Korrektur?
Die Seite verspricht Kontakt über ein Formular, das nichts versendet.
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.// Kurz prüfen
Ein Kontaktformular hat keinen Versanddienst. Was folgt?
Wähle eine Antwort.
Nicht ganz. Schau dir die andere Antwort noch einmal an. Sichtbare Eingabefelder allein verschicken keine Nachricht.
Richtig. Sichtbare Eingabefelder allein verschicken keine Nachricht.
Was ist hängen geblieben?
// Kurz prüfen
Was ändert die Veröffentlichung?
Wähle eine Antwort.
Nicht ganz. Schau dir die andere Antwort noch einmal an. Deshalb prüfst du Daten und Freigaben vor dem Hosting.
Richtig. Deshalb prüfst du Daten und Freigaben vor dem Hosting.
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