Eigene Webseite mit KI erstellen

Für wen ist dieser Kurs?

Für alle, die eine eigene Webseite für ein Projekt, einen Verein, ein kleines Geschäft oder ein Hobby möchten und dabei KI als Werkzeug nutzen wollen, ganz ohne Programmierkenntnisse.

In diesem Kurs lernen Sie…

1

Webseite mit KI planen

Sie formulieren mit den fünf Bausteinen einen guten Prompt: Wer, für wen, was, wie und Aussehen.

2

Seite ohne Code bauen

Sie erzeugen mit Canva oder Gamma per Prompt eine fertige Webseite und veröffentlichen sie.

3

HTML verstehen

Sie wissen, wie eine HTML-Seite aufgebaut ist, und finden sich im Code zurecht.

4

HTML-Seite mit KI erstellen

Sie lassen die KI eine eigene index.html schreiben, testen sie im Browser und passen sie Schritt für Schritt an.

5

Gratis online stellen

Sie laden Ihre Seite per Drag & Drop auf Netlify hoch und teilen den Link.

6

WordPress mit KI anpassen

Sie verbessern Texte, erzeugen HTML-Blöcke und CSS-Schnipsel und fügen sie in eine bestehende Seite ein.

Viel Praxis: Sie arbeiten die ganze Zeit an Ihrem eigenen Webseitenprojekt und werden dabei persönlich begleitet. Am Ende ist Ihre Seite online.

Präsentation und Unterlagen zum Kurs

Präsentation zum Kurs

Die Folien aus dem Unterricht als PDF zum Nachlesen.

Kurshandout

Die wichtigsten Schritte kompakt zusammengefasst: Canva, Gamma, HTML, Netlify, WordPress.

Prompt-Vorlagen und Aufgaben

Die Beispiel-Prompts und die Übungsaufgabe «Eine Seite, drei Wege» zum Kopieren.
Der Beispiel-Prompt aus dem Kurs (zum Kopieren):
Erstelle eine Webseite für [Firma / Projekt] in [Ort]. Zielgruppe: [Zielgruppe]. Abschnitte: Start mit Slogan, Angebot mit 3 Leistungen, Über uns, Kontakt mit Adresse und E-Mail. Tonalität: freundlich und klar, auf Deutsch (Schweiz, ohne ß). Farben: [Farbe 1] und [Farbe 2]. Gib mir alles als eine einzige index.html mit eingebettetem CSS.
Webseiten ohne Code
C

Canva Websites

Vorlagen, Drag & Drop und Magic Write für die Texte. Gratis mit canva.site-Adresse.

 G

Gamma

Ganze Webseite aus einem Prompt, inklusive Struktur, Text und Bildern. Gratis mit Guthaben.
KI-Assistenten für Texte und Code
Cl

Claude

Schreibt saubere HTML- und CSS-Dateien und erklärt den Code verständlich.

 Ch

ChatGPT

Vielseitig für Webseitentexte, Ideen, HTML-Blöcke und WordPress-Fragen.

 Ge

Gemini

Für Recherche, Texte und Bilder, gut in Verbindung mit Google-Diensten.

 Mi

Mistral Le Chat

Europäisches Sprachmodell für Texte und Code, kostenlos nutzbar.

 D

Duck.ai

KI-Chats mit zusätzlichem Privatsphärenschutz, ohne Anmeldung.

 Ap

Apertus

Offenes und mehrsprachiges KI-Modell aus der Schweiz.
HTML schreiben und testen
VS

Visual Studio Code

Kostenloser Editor für Windows und Mac. Erkennt HTML und färbt den Code ein.

 N+

Notepad++

Schlanker Texteditor für Windows. Reicht für eine index.html vollkommen aus.

 CP

CodePen

HTML direkt im Browser einfügen und sofort das Ergebnis sehen, ohne Installation.

 W3

W3C Validator

Prüft, ob der HTML-Code fehlerfrei ist. Fehlermeldungen einfach der KI zeigen.
Gratis online stellen
Ne

Netlify Drop

Ordner mit index.html ins Feld ziehen, Sekunden später ist die Seite unter name.netlify.app online.

Im Kurs verwendet
 GH

GitHub Pages

Kostenloses Hosting für statische Seiten, ideal ab mehreren Unterseiten.

 WP

WordPress.com

Kostenlose Testseite, um die WordPress-Anpassungen aus Block 3 auszuprobieren.

 WP

WordPress.org (Deutsch)

Offizielles Plugin-Verzeichnis und deutschsprachige Hilfe zum Block-Editor.
Bilder, Farben und Schriften
Un

Unsplash

Kostenlose Fotos in hoher Qualität, frei verwendbar für Webseiten.

 Px

Pexels

Lizenzfreie Fotos und Videos, auch auf Deutsch durchsuchbar.

 Co

Coolors

Passende Farbpaletten erzeugen und die Farbcodes direkt in den Prompt übernehmen.

 Aa

Google Fonts

Kostenlose Schriften für die eigene Webseite, mit fertigem Einbindungscode.
Nachschlagen und Prüfen
SH

SELFHTML

Deutschsprachiges Nachschlagewerk für HTML und CSS, für Einsteiger gut verständlich.

 MDN

MDN Web Docs

Die offizielle Referenz zu HTML, CSS und allem, was im Browser läuft.

 PS

PageSpeed Insights

Prüft, wie schnell und handytauglich Ihre Seite ist, und nennt konkrete Verbesserungen.

 DS

Datenschutzpartner

Kostenloser Generator für die Datenschutzerklärung nach Schweizer Recht.

Tipp: Alle Tools sind in der Gratis-Version nutzbar. Gratis heisst oft Limits oder Branding, für den Start und zum Üben reicht das aber vollkommen. Adressen, Preise und Bildrechte immer selbst prüfen, die KI erfindet gerne Fakten.

Vielen Dank für Ihr Feedback

Möchten Sie uns zusätzlich öffentlich bewerten?
Dann freuen wir uns sehr über eine kurze Google-Bewertung.

Google Bewertung schreiben
Informationen Bildungsgutschein