Diese Methode eignet sich auch besonders gut für Neueinsteiger, welche die Webentwicklung (HTML / CSS) erlernen und verstehen möchten. Man sieht zwar den Code, aber sie müssen keine einzige Zeile daran selber anpassen. Dies übernimmt die KI für uns. Folgen Sie einfach Schritt für Schritt meinem Tutorial und beachten Sie die Anweisungen der KI.
1. Ausgangslage
Wir möchten mit wenig Aufwand eine kleine Website mit vier Seiten für die Pizzeria Bella Italia erstellen. Dazu verwenden wir das KI-Sprachmodell Claude, welches direkt in unsere kostenlose Entwicklungsumgebung Cursor (IDE) integriert ist.
Damit wir keinen lokalen Server benötigen arbeiten wir nur mit HTML, CSS und JS. Diese Methode ist ideal, um die grundlegenden HTML Strukturen zu verstehen und zu erlernen.
Es gibt bereits sehr viele Tutorials, welche Cursor bei der Entwicklung komplexer Applikationen zeigen. Es lassen sich damit aber auch ganz simple kleine Websites erstellen wie dieses Beispiel zeigt. Dieses Tutorial soll Einsteigern dabei helfen.
2. Vorbereitung
2.1. Ordner und Bilder vorbereiten
Zunächst legen wir einen Projekt-Ordner für die neue Website auf dem eigenen Rechner an. Es ist egal, wo dieser liegt. Da wir nur mit HTML-Dateien arbeiten, ist auch kein lokaler Server notwendig. Ich nenne meinen Projekt-Ordner "pizzeria-bella".
Innerhalb des Projekt-Ordners legen wir den Ordner "img" für die Bilder an.
Ebenfalls benötigen wir ein breitformatiges Bild für den Header auf der Startseite und ein quadratisches Dummy-Bild für den Inhalt. Mit der KI Midjourney habe ich mir dazu zwei Bilder erstellt, welche ich als Platzhalter nutzen kann. Das Header-Bild (header.jpg) ist ein JPG mit 1792 x 656 Pixeln und das Dummy-Bild (dummy.jpg) ein JPG mit 656 x 656 Pixeln.
Diese zwei Bilder legen wir nun in den Ordner "img", welcher sich innerhalb des Ordners "pizzeria-bella" befindet. Auf dem Mac im Finder müsste das jetzt so aussehen:
2.2. Installation Cursor
Um die Website erstellen zu können, verwenden wir eine professionelle Entwicklungsumgebung namens Cursor, welche auf dem verbreiteten Visual Studio Code basiert. Diese ist kostenlos und lässt sich auf cursor.com herunterladen. Wichtig: Es ist eine Registrierung notwendig, um die KI-Sprachmodelle nutzen zu können. Sie erhalten gratis für 2 Wochen die volle Pro-Version, welche mehr und schnelleren Zugriff auf die KI erlaubt. Danach kann weiterhin kostenlos mit geringerer Performance und Mengen-Limiten auf die KI zugegriffen werden.
2.3. Cursor öffnen und Dateien anlegen
Wenn wir Cursor starten, sehen wir das folgende Fenster. Jetzt klicken wir auf den blauen Button "Open a folder" und wählen den Ordner "pizzeria-bella" aus.
Da die KI noch keine Berechtigung hat, um neue Dateien anzulegen, müssen wir diese 6 Dateien zuerst anlegen:
- index.html (Home)
- essen.html (Essen)
- uber-uns.html (Über uns)
- kontakt.html (Kontakt)
- style.css (Styles)
- script.js (JavaScript)
Dies kann über folgendes Icon in der linken Leiste gemacht werden:
Wenn alles richtig gemacht wurde, sieht die linke Leiste jetzt so aus:
Damit wären die Vorbereitungen abgeschlossen. Jetzt können wir mit dem spannenden Teil beginnen.
3. Initialer Promt formulieren
Dies ist der wichtigste Teil dieses Tutorials. Wir formulieren einen Prompt, welcher die KI anweist, genau das zu tun, was wir wollen. Je genauer, desto besser. Im Prinzip programmieren wir damit die Website auf Deutsch.
Für die Pizzeria Bella Italia habe ich folgenden Prompt erstellt:
Kannst du für mich eine Website erstellen? Bitte antworte immer auf Deutsch. Die Website ist für die Pizzeria Bella Italia. Im Ordner "img" befindet sich das Bild "header.jpg", welches auf der Home Seite als Header ohne Ränder verwendet werden soll. Im "img" Ordner ist ebenfalls das Bild "dummy.jpg", welches im Inhalt mehrfach als Dummy verwendet werden kann. Der Inhaltsbereich darf nie breiter als 1400 px werden. Alle Files sind schon angelegt. Es gibt eine Seite Home ("index.html"), Essen ("essen.html"), Über uns ("uber-uns.html") und Kontakt ("kontakt.html"). Das CSS gehört in das File "style.css" und JavaScript in das File "script.js". Die Seite sollte ein schönes modernes responsives Design haben. Kannst du bitte Dummy Texte einfügen und mehrere Dummy-Bilder. Und eine Navigation, welche auf Mobile zu einem Hamburger wird. Der aktive Navigationspunkt sollte immer Fett sein. Auf der Kontaktseite hat es eine Adresse und Öffnungszeiten, kein Formular. Bei Essen steht die Menü-Karte. Auf der Home Seite hat es drei Dummy-Bilder nebeneinander. Bitte generiere immer alle Files komplett.
Als nächstes gehen wieder in den Cursor und öffnen das Chat-Fenster:
Wir kopieren den zuvor geschriebenen Prompt und fügen ihn in das Chat-Fenster ein. Dann drücken wir Command (⌘) + Enter (↵) um den Prompt auf die gesamte Codebase anzuwenden. And the magic can begin...
Nun erklärt die KI genau was sie machen will, um die neue Website zu erstellen. Es lohnt sich, alles einmal genau durchzulesen und die Anweisungen zu befolgen.
Schritt 1: Bei den vorgeschlagenen Anpassungen geben wir mit Apply den Befehl für die Umsetzung.
Schritt 2: Die KI schreibt nun den Code für die Home Seite (index.html) live vor unseren Augen. Hat alles geklappt, müssen wir nochmals mit Accept bestätigen.
Nun scrollen wir im Chat-Fenster nach unten und wiederholen Schritt 1 und 2 für alle anderen Seiten, und das style.css und script.js.
Wichtig: Danach unter "Datei" und "Alles speichern" wählen oder mit der Tastatur Option (⌥) + Command (⌘) + S. Die KI kann die Dateien noch nicht selber speichern.
3.1. Resultat anschauen
Jetzt kommt der spannendste Moment. Wir öffnen die Datei "index.html" in einem Browser und sehen das Resultat.
Auch die mobile Version sieht nicht schlecht aus. Das Hamburger Menü funktioniert einwandfrei.
Die klickbare Version kann hier angeschaut werden:
4. Nachbessern
Ich bin noch nicht ganz zufrieden und möchte noch einige Anpassungen vornehmen. Das Logo soll immer auf die Home Seite verlinkt werden. Der Hintergrund vom Header-Element soll dunkel weinrot sein und die Schriften der Navigation und des Logos weiss. Dazu schreibe ich folgenden Prompt:
Kannst du einige Anpassungen im Header Element vornehmen? Das Logo soll immer auf die Home Seite verlinkt werden. Der Hintergrund vom Header-Element soll dunkel weinrot sein und die Schriften der Navigation und des Logos weiss. Bitte mache die Anpassungen in allen Files.
Wie im Beispiel oben nehme ich die Anpassungen vor und speichere alle Dateien. Jetzt ist das Hamburger-Icon schwarz auf dunklem weinrotem Hintergrund. Um dies zu ändern schreibe ich einen weiteren Prompt.
Dabei bedanke ich mich immer höflich, denn sollte die KI einmal die Weltherrschaft übernehmen, wird sie sich sicher daran erinnern.
Sehr gut, vielen Dank. Jetzt müsste das Hamburger Icon auch noch weiss sein. Und wenn man darauf klickt die Hintergrundfarbe hinter den Navigationspunkten auch weinrot.
Das hat geklappt. Jetzt möchte ich die Abstände noch etwas optimieren.
Du bist super! Kannst du jetzt bei den Inhalten oben und unten etwa 20px Abstand einfügen? Auch beim Footer.
Und nun sollen die Bilder noch abgerundete Ecken haben.
Und jetzt noch ein letzter Wunsch. Kannst du bei allen Bildern auser dem Header-Bild abgerundete Ecken machen?
Jetzt könnte man hier natürlich noch stundenlang weiter optimieren. Allerdings würden wir dann die im Titel erwähnten 20 Minuten für dieses Tutorial überschreiten. Daher schliesse ich das Projekt damit ab.
4.1. Finales Resultat anschauen
Wir offenen wieder das "index.html" in einem Browser und sehen das Resultat (immer vorher alle Dateien speichern, ev. Refresh drücken oder Cache löschen).
Die mobile Version ist ziemlich gut gelungen.
Die klickbare Version kann hier angeschaut werden:
5. Website veröffentlichen
Wer die Website öffentlich zugänglich machen möchte, benötigt Hosting. Da wir weder serverseitige Programmiersprachen noch Datenbanken verwendet haben, reichen die günstigsten Angebote völlig aus.
Ich kann Cyon oder Novatrend empfehlen. Alle Dateien der Website müssen dann über ein FTP-Programm in einen bestimmten Ordner auf dem Server geladen werden. Die nötigen Angaben dazu erhalten Sie vom Hosting-Anbieter. Ein kostenloses FTP-Programm für Mac und Windows ist z.B. FileZilla.
6. Fazit
Programmiersprache: Deutsch - ist längst Realität geworden.
Mit dieser neuen Methode lässt sich schnell und ohne Programmierkenntnisse eine kleine Website erstellen. Sie eignet sich besonders für Einsteiger, welche die Grundlagen einer Website verstehen oder lernen möchten.
Der Aufwand ist wahrscheinlich sogar geringer als die Einarbeitung in proprietäre Baukastensysteme. Bei Wix.com oder Jimdo lernt man nur das Bedienen des jeweiligen Systems, ohne den grundsätzlichen Aufbau einer Website zu verstehen. Dieses Wissen kann man später kaum wieder gebrauchen.
Die KI-Sprachmodelle werden sich sicher noch verbessern, und wenn künftig auch noch Dateien angelegt und gespeichert werden dürfen, wird es noch einfacher. Auch dieses Tutorial wird wohl schon bald nicht mehr gebraucht, denn man kann sich die Instruktionen auch direkt von der KI geben lassen.
Kommentiere diesen Artikel
Weitere Artikel zu «Website erstellen»
- Warum Sie Ihre Website 2025 erneuern sollten
- Website erstellen lassen
- Wie finde ich die richtige Webagentur
- Webagentur Offerten vergleichen