Projekt 01 · Codex
Deine Firmenwebseite.
Schritt für Schritt.
Baue deine eigene Seite – mit verständlichen Schritten und den Prompts aus dem Video.
Unser Beispiel: Bergmann Bedachungen, ein fiktiver Dachdeckerbetrieb. Die Anleitung kannst du auf dein eigenes Projekt übertragen.
01Das brauchst du
- Computer und BrowserZum Erstellen, Ansehen und Ausprobieren deiner Seite.
- Zugang zu CodexIm Video arbeiten wir mit dem KI-Assistenten von OpenAI.
- Deine eigenen AngabenName, Leistungen, Zielgruppe und eine Idee für die Gestaltung.
02Beschreibe deine Webseite
Starte in Codex ein neues Projekt mit einem eigenen Ordner und öffne dort einen neuen Chat. Beschreibe in deinen Worten, was dein Betrieb macht, was Besucher auf der Seite tun sollen und wie du sie dir vorstellst.
Eine solche Nachricht heißt Prompt. Du brauchst dafür keine Fachsprache. Unser Beispiel besteht aus drei Teilen: der Betrieb, die gewünschte Seite und die Dateien, die wir am Ende öffnen möchten.
Ich brauche eine Webseite für meinen Dachdeckerbetrieb Bergmann Bedachungen in Münster. Wir arbeiten auch in der Umgebung, ungefähr im Umkreis von 40 Kilometern. Wir sanieren und decken Dächer neu, reparieren undichte Stellen, bauen Dachfenster ein und kümmern uns um Dachrinnen. Wir sind ein kleiner, inhabergeführter Betrieb und arbeiten vor allem für private Hausbesitzer und kleinere Hausverwaltungen.
Vollständigen Prompt anzeigen
Die Seite soll modern, übersichtlich und freundlich aussehen. Besucher sollen schnell unsere Leistungen finden, etwas über unseren Betrieb erfahren und eine Beratung anfragen können. Unser Leitsatz ist „Ihr Dach. Unser Handwerk.“ Mir gefallen helle Flächen mit Anthrazit und etwas Ziegelrot, passende Bilder und gut lesbare Texte. Bitte sprich unsere Kunden mit „Sie“ an. Die Seite soll auch auf dem Handy gut aussehen und einfach zu bedienen sein.
Ich möchte eine einfache HTML-Webseite, die ich direkt auf meinem Computer im Browser öffnen kann, ohne dafür zusätzliche Programme installieren zu müssen. Gib mir bitte die benötigten Dateien und erkläre mir kurz, welche ich öffnen muss. Wenn du noch Angaben zu unserem Betrieb brauchst, frag mich einfach.
Der Button kopiert alle drei Absätze. Ersetze die Beispielangaben durch deine eigenen. Du kannst deinen Auftrag genauso gut selbst formulieren.
Schicke deinen Auftrag ab. Je konkreter du Wichtiges beschreibst, desto besser kann Codex sich daran orientieren. Der erste Entwurf muss dabei noch nicht alles treffen – du kannst ihn anschließend gezielt verändern.
03Falls Codex noch Angaben braucht
Manchmal setzt Codex deinen Auftrag direkt um. Manchmal stellt es eine oder mehrere Rückfragen. Wenn keine Frage kommt, kannst du diesen Schritt überspringen.
Falls etwas fehlt, antworte mit den Angaben zu deinem eigenen Projekt. Das können Kontaktdaten, weitere Leistungen oder Wünsche zum Aussehen sein. Die Fragen müssen nicht dieselben sein wie bei uns.
So war es in unserem Video„An welche geschäftliche E-Mail-Adresse sollen Beratungsanfragen gehen? Falls Sie möchten, können Sie auch eine Telefonnummer für die Seite angeben.“
Wir haben darauf die gewünschte E-Mail-Adresse angegeben. Bei dir können andere Fragen auftauchen – oder gar keine. Übernimm hier deshalb keine fremden Kontaktdaten.
Du hast eine Angabe noch nicht?
Dann sag das einfach. Zum Beispiel: „Die Telefonnummer ergänze ich später. Lass sie vorerst weg.“ Du kannst fehlende Angaben später nachreichen. Lass Codex anschließend den Entwurf erstellen.
04Den Entwurf verbessern
Sieh dir die erste Version in Ruhe an. Sind die Leistungen richtig? Findet man die Kontaktmöglichkeit? Gefällt dir die Gestaltung? Beschreibe im selben Chat konkret, was du ändern möchtest – und was so bleiben soll.
Bei uns haben die Angaben bereits gepasst. Die vier Leistungen sollten zusätzlich passende Bilder bekommen. Das war unser Änderungsauftrag:
Die Webseite gefällt mir schon gut. Bei den vier Leistungen wünsche ich mir noch passende Bilder, damit Besucher die angebotenen Arbeiten schneller erkennen.
Ergänze bitte jeweils ein eigenes, realistisch wirkendes Bild für Dachsanierung und Neueindeckung, Dachreparaturen, Dachfenster und Dachrinnen. Die Bilder sollen zur jeweiligen Leistung passen, zusammen einheitlich wirken und sich gut in die vorhandenen Karten einfügen. Auch auf dem Handy soll alles übersichtlich bleiben.
Behalte die vorhandenen Texte, Farben und den restlichen Aufbau der Webseite bei.
Nach dem Einbau waren unter den Bildern noch die bisherigen Symbole zu sehen. Mit einer kurzen weiteren Nachricht haben wir sie entfernen lassen:
Bitte entferne doch die Icons unter dem Bild noch.
Dein Entwurf kann anders aussehen. Formuliere deshalb die Änderung, die deine Seite tatsächlich braucht. Vorhandene eigene Fotos kannst du ebenfalls bereitstellen und gezielt zuordnen lassen.
05Prüfen und lokal öffnen
Öffne deinen Projektordner. In unserem Beispiel besteht die Seite aus diesen Dateien und dem Bilderordner:
- index.html
- stil.css
- seite.js
- bilder/
Öffne die index.html mit einem Doppelklick im Browser. Lass die übrigen Dateien und den Bilderordner zusammen in diesem Ordner. Sie liefern die Gestaltung, die Bilder und die kleinen Funktionen. Bei deinem Projekt können die CSS- und JavaScript-Dateien anders heißen.
Probiere die Seite wirklich aus
- Klicke auf die Navigation und auf „Beratung anfragen“. Führt jeder Link zum richtigen Bereich?
- Prüfe eine schmale Handyansicht. Sind Texte, Bilder und Formularfelder vollständig zu sehen und gut bedienbar?
- Lies Namen, Leistungen und Kontaktdaten nach. Stimmen sie mit deinem Betrieb überein?
Unser ursprüngliches Formular öffnet einen Entwurf im E-Mail-Programm. Es verschickt selbst keine Nachricht. In der Projekt-Demo kannst du stattdessen eine Vorschau des Entwurfs ansehen.
Fertige Demo ausprobierenEine lokal geöffnete Seite ist noch nicht im Internet veröffentlicht. Wie du sie online bringst und mit einer Domain verbindest, zeigen wir in einer eigenen nächsten Folge.