Website mit KI: erzeugen und lokal testen

Eine Website besteht aus Dateien: HTML (Inhalt), CSS (Aussehen) und manchmal JavaScript (Verhalten). Eine KI wie Claude kann sie nach deiner Beschreibung schreiben. Du speicherst sie auf dem Computer, öffnest sie im Browser und passt sie an. Erst danach überlegst du, wo sie gehostet wird.

Das brauchst du

• Einen Zugang zu einer KI (zum Beispiel Claude)
• Einen Texteditor (Mac: «TextEdit» im Nur-Text-Modus, Windows: Editor, besser ein Code-Editor)
• Einen Browser
• Einen kurzen Plan: Wofür ist die Seite, und für wen?

1. Schreibe in fünf Sätzen auf: Wer bist du, was bietest du an, für wen, und was sollen Besuchende tun (zum Beispiel anrufen, schreiben, anmelden)?
2. Sammle, was auf die Seite soll: Name, Foto, Kurztext, drei Angebote, Kontakt.
3. Gib diese Angaben der KI mit einem klaren Auftrag, zum Beispiel: «Schreibe mir eine einfache Website mit einer Seite, Abschnitte Über mich, Angebote und Kontakt, schlicht, gut lesbar auf dem Handy. Liefere eine einzige Datei index.html mit eingebautem CSS.»

1. Kopiere den Code der KI in deinen Texteditor und speichere ihn als index.html in einem neuen Ordner.
2. Doppelklicke auf die Datei. Sie öffnet sich im Browser.
3. Lies die Seite durch und notiere drei Dinge, die du ändern möchtest.

Auftrag: Verbessere deine Seite in drei Runden und prüfe sie auf dem Handy.

1. Sag der KI, was du ändern möchtest, in kurzen Sätzen («Farbe ruhiger», «Kontaktblock mit E-Mail»). Ersetze den Code in deiner Datei.
2. Lade die Seite im Browser neu (Cmd+R oder F5).
3. Öffne die Datei auf dem Handy (zum Beispiel per AirDrop oder Mail) oder verkleinere das Browserfenster, um die schmale Ansicht zu testen.

Fertig, wenn…

• deine Seite öffnet sich lokal im Browser,
• du hast sie dreimal mit der KI verbessert,
• sie sieht auch in der schmalen Ansicht gut aus.

Wenn du weitermachen willst

• Jimdo: Lass die KI eine Jimdo-Seite nach deiner Vorlage erstellen. Das geht ohne Code, du brauchst nur ein Konto.
• Hosten: Lade die Datei bei deinem Hosting hoch oder lege sie im Moodle-Kurs ab (Anleitung zum Moodle-Kurs).

• Eine Datei: Wenn die KI mehrere Dateien liefert, speichere sie im gleichen Ordner und halte die Namen genau ein.
• Bilder: Verwende nur Bilder, die du verwenden darfst, und halte sie klein.
• Impressum und Datenschutz: Eine öffentliche Seite braucht beides. Eine KI schreibt dir eine Vorlage, prüfe sie aber selbst.
• Alte Fassung sichern: Speichere vor grossen Änderungen eine Kopie der Datei.