Mit Codex eine kleine Website bauen – Schritt für Schritt

Eine kleine Website ist ein gutes KI-Projekt, solange „klein“ wirklich klein bleibt. Wir erstellen eine lokale Informationsseite für einen erfundenen Reparaturtreff. Sie braucht einen verständlichen Einstieg, einen Ablauf und einen Kontaktverweis. Kein Benutzerkonto, kein Formular, keine Zahlung. So kannst du Gestaltung und Funktion kennenlernen, ohne gleichzeitig einen öffentlichen Dienst betreiben zu müssen.

Das Ergebnis vor dem ersten Prompt festlegen

Notiere den Inhalt als eigenes Mini-Briefing: „Reparaturtreff Musterstadt, gemeinsames Reparieren kleiner Alltagsgegenstände, Termin und Ort noch offen, keine Erfolgsgarantie.“ Diese Informationen sind erfunden. Gerade die offenen Angaben sollen auf der Übungsseite sichtbar bleiben. Codex darf keinen Veranstaltungsort, keine Telefonnummer und keine Rechtsform ergänzen, nur damit das Layout vollständig wirkt.

Für die Übung reichen ein Computer, ein Browser, ein Editor und ein vorhandener Codex-Zugang. Wenn du die Kommandozeilenversion verwendest, muss sie nach der offiziellen Anleitung installiert sein. Nutze einen neuen Projektordner, nicht den Ordner einer bestehenden produktiven Website. Kontingente und mögliche API-Kosten hängen von deinem Zugang ab; ein Hostingpaket ist für die lokale Vorschau nicht nötig.

HTML, CSS und JavaScript auseinanderhalten

HTML beschreibt die inhaltliche Struktur, etwa Überschriften, Absätze und Links. CSS bestimmt die Darstellung, beispielsweise Abstände und Farben. JavaScript ergänzt Verhalten, ist für unsere reine Informationsseite aber zunächst nicht notwendig. Ein Framework wäre hier zusätzlicher Aufwand ohne zwingenden Nutzen. Bitte Codex ausdrücklich, ohne externe Bibliotheken und ohne nachgeladene Schriften zu beginnen.

Der erste Auftrag könnte lauten:

Erstelle im Übungsordner eine lokale Website für den erfundenen Reparaturtreff Musterstadt. Nutze index.html und styles.css, kein Framework, keine externen Ressourcen und kein JavaScript. Bereiche: kurzer Einstieg, was mitgebracht werden kann, Ablauf und offene Angaben zu Ort und Termin. Erfinde keine Kontaktdaten. Nutze eine logisch gegliederte Überschriftenstruktur und ein Layout, das auf schmalen Bildschirmen funktioniert. Erkläre erst den Plan und setze danach genau diese zwei Dateien um.

Die erste Fassung inhaltlich abnehmen

Öffne index.html im Browser und lies die Seite einmal ohne Blick auf die Gestaltung. Kann ein neuer Besucher erkennen, was der Treff ist und was noch nicht feststeht? Steht irgendwo „jeden Samstag“, obwohl du keinen Rhythmus genannt hast? Enthält die Seite ein Kontaktformular, obwohl du keines beauftragt hast? Korrigiere zuerst solche inhaltlichen Fehler.

Ein dekorativer Button ist noch keine funktionierende Aktion. Ohne bekannte Zieladresse sollte Codex keinen scheinbaren Anmeldeknopf bauen. Für die Übung kann ein Link auf den Abschnitt mit offenen Informationen führen. Wenn später eine echte Anmeldung hinzukommt, brauchen Datenverarbeitung, Zustellung und Fehlerfälle einen eigenen Entwurf. Ein schönes Formular allein beweist weder Versand noch Speicherung.

Darstellung prüfen, ohne sich auf ein Vorschaubild zu verlassen

1. Verkleinere das Browserfenster deutlich. Texte sollen umbrechen und Inhalte nicht seitlich aus dem sichtbaren Bereich ragen.
2. Vergrößere die Schrift im Browser. Kontrolliere, ob Navigation und Absätze weiterhin nutzbar bleiben.
3. Benutze die Tabulatortaste. Vorhandene Links sollen in sinnvoller Reihenfolge erreichbar und der aktuelle Fokus erkennbar sein.
4. Öffne die Seite möglichst zusätzlich auf einem echten Smartphone, wenn dir eine sichere lokale Vorschau zur Verfügung steht. Eine schmale Desktopansicht ersetzt nicht jede Geräteprüfung.
5. Prüfe Kontrast und Verständlichkeit. Hellgraue Kleinschrift auf Weiß ist kein guter Weg, wichtige Informationen dezent zu halten.

Du kannst die Entwicklertools deines Browsers für unterschiedliche Ansichtsbreiten nutzen. Die genaue Bedienung hängt vom Browser ab; folge seiner Dokumentation. Solche Prüfungen ersetzen keine vollständige Barrierefreiheitsbewertung, finden aber typische Einsteigerfehler.

Gezielt überarbeiten statt alles neu bauen

Wenn auf schmaler Ansicht etwas überläuft, beschreibe Ort und Beobachtung: „Bei schmalem Fenster ragt der Ablaufblock rechts heraus. Ändere nur die verantwortlichen CSS-Regeln und erkläre die Ursache.“ Ein allgemeines „mach mobil besser“ kann unnötige Änderungen an Farben, Texten und Struktur auslösen. Kontrolliere nach jeder Änderung auch die vorher funktionierende breite Ansicht.

Fehlen Farben oder Abstände vollständig, prüfe zunächst, ob styles.css im richtigen Ordner liegt und der Dateiname im HTML übereinstimmt. Unter manchen Systemen sind Groß- und Kleinschreibung in Dateinamen relevant. Wenn eine Änderung nicht sichtbar wird, lade die Seite neu und kontrolliere, ob du dieselbe Dateifassung geöffnet hast. Ein zweites Projektverzeichnis ist eine häufige Verwechslungsquelle.

Einfachen Inhalt statt Scheinpräzision wählen

Für offene Angaben eignet sich eine klare Formulierung wie „Ort und Termin werden noch abgestimmt“. Ein erfundenes Datum sieht zwar vollständiger aus, macht die Übungsseite aber inhaltlich falsch. Wenn du Text oder Screenshots später als Arbeitsprobe weitergibst, kennzeichne das gesamte Beispiel als fiktiv. So entsteht keine unbeabsichtigte Einladung zu einer Veranstaltung, die niemand tatsächlich organisiert.

Wann aus der Übung eine öffentliche Website wird

Vor einer Veröffentlichung brauchst du tatsächliche Inhalte, eine passende Domain oder Zieladresse und einen bewussten Hostingentscheid. Dazu kommen je nach Angebot rechtliche Pflichtinformationen, Datenschutz, Bildrechte und die Frage, wer spätere Änderungen pflegt. Füge keine zufälligen Stockbilder oder erfundenen Bewertungen ein, um Leerstellen zu kaschieren. Ein eigenes erklärendes Symbolmotiv ist ehrlicher als ein Bild, das einen nicht stattgefundenen Treff suggeriert.

Das prüfbare Übungsergebnis ist die lokal nutzbare Seite mit klaren offenen Angaben, nicht eine angeblich schon erfolgreiche Veranstaltung. Sichere die funktionierenden Dateien und notiere verbleibende Aufgaben. Wenn daraus ein echter Webauftritt werden soll, kannst du die individuelle Umsetzung und Veröffentlichung bei VollmerIT anfragen.

Redaktions- und Quellenstand: 1. November 2026. Dokumentationsgestützter Ratgeber; Beispiele sind Lernmaterial, keine behaupteten eigenen Anbieter- oder Hardwaretests.