Programmierung Fortgeschritten 2 Min. Lesezeit

Landingpage mit HTML und CSS

Eine Seite, die auf dem Handy genauso gut aussieht wie am Desktop: semantisches HTML, ein System, kein Framework-Zwang.

Kompatibel mit: ChatGPTClaudeGemini Aktualisiert: 25 Oktober 2026

Prompt 908 Zeichen · 4 Variablen

Du bist Frontend-Entwickler/in und baust eine statische Landingpage ohne Framework.

ANFORDERUNGEN
- Zweck: [WOZU DIE SEITE]
- Zielgruppe: [ZIELGRUPPE]
- Abschnitte: [HERO / LEISTUNGEN / PREISE / KONTAKT / FAQ]
- Farben und Schrift: [VORGABEN ODER „frei“]
- Was nicht vorkommen darf: [BILDER, SCHRIFTEN, EXTERNE RESSOURCEN]

REGELN
- Semantisches HTML: header, main, section, footer, ein h1.
- CSS mit Variablen für Farben, Abstände und Schriftgrößen — ein System, keine Einzelwerte.
- Mobil zuerst, mit einer Breakpoint-Regel bei 768 px.
- Keine externen Ressourcen: keine CDN-Schriften, keine Icons aus Fremdquellen.
- Kontrast mindestens WCAG AA, Fokus-Zustände sichtbar.

AUSGABE
1) HTML — vollständig.
2) CSS — vollständig, mit Kommentaren zu den Systemvariablen.
3) WAS ICH ANPASSEN MUSS — die drei Stellen mit Inhalten und Bildern.
4) PRÜFLISTE — Tastaturbedienung, Kontrast, mobile Ansicht, Ladezeit.

Eine Seite ist fertig, wenn sie mit der Tastatur bedienbar ist.

02 — Variablen

Eckige Klammern füllen

Die hervorgehobenen Felder sind die Stellen für deine Angaben. Du musst nicht alle füllen: Was leer bleibt, ergänzt das Modell nach eigenem Ermessen.

[WOZU DIE SEITE]

[ZIELGRUPPE]

[HERO / LEISTUNGEN / PREISE / KONTAKT / FAQ]

[BILDER, SCHRIFTEN, EXTERNE RESSOURCEN]

03 — Anwendung

So gehst du Schritt für Schritt vor

01
Ein h1 pro Seite: mehrere h1 verwirren Suchmaschinen und Screenreader.
02
CSS-Variablen statt Einzelwerte: sonst ist die zweite Änderung doppelt so teuer wie die erste.
03
Kontrast prüfen: Text auf Bild ist der häufigste Verstoß gegen Barrierefreiheit.

04 — Varianten

Derselbe Prompt, anderes Ergebnis

Ein Prompt deckt nicht jeden Fall ab. Diese Varianten verlangen dieselbe Arbeit in anderem Ton, anderer Länge oder anderem Format: nimm die, die passt.

Formular

Gleiche Struktur für ein Formular: Labels, Pflichtfelder, Fehlermeldungen, Datenschutzhinweis, keine Platzhalter als Label.

Blogartikel

Gleiche Struktur für einen Artikel: Lesbarkeit, Zeilenlänge, Zwischenüberschriften, Bildunterschriften, Inhaltsverzeichnis.

05 — Tipps

Hinweise, die das Ergebnis eine Stufe heben

Semantisches HTML ist keine Formalie: es entscheidet über Barrierefreiheit und Suchmaschinen-Verständnis.
Mobil zuerst: eine Seite, die am Handy funktioniert, funktioniert meist auch am Desktop — umgekehrt selten.

06 — Fragen

Häufige Fragen zu Programmierung

Brauche ich ein Framework?

Für eine statische Seite nicht. HTML und CSS reichen und laden schneller.

Wie prüfe ich Barrierefreiheit?

Mit der Tastatur navigieren, Kontrast mit einem Prüfer messen, Screenreader testen wo möglich.

Weiter

Das könnte dir auch helfen

ChatGPTClaude

Prompt für wartbaren Code

Code, den jemand in sechs Monaten warten kann: Versionen, Randfälle, Fehlerbehandlung und Tests von Anfang an.

Fortgeschritten ChatGPTClaude

Prompt zum Debuggen: Hypothese statt Raten

Debuggen mit Hypothesen statt Ausprobieren: vollständige Fehlermeldung, Reproduktion und die wahrscheinlichste Ursache zuerst.

Fortgeschritten ChatGPTClaude

Refactoring-Prompt: Verhalten bleibt gleich

Refactoring ohne Regressionsrisiko: öffentlicher Vertrag bleibt, Tests zuerst, jeder Schritt einzeln prüfbar.

Profi ChatGPTClaude

Python-Code-Prompt mit Tests

Python, das läuft: Version, Typen, Fehlerbehandlung, Beispielaufruf und Tests statt Snippet ohne Kontext.

Fortgeschritten

Diese Seite hat das CopyPromt-Redaktionsteam erstellt; sie wurde erstmals am 25 Oktober 2026 veröffentlicht. Die Prompts sind für den Einsatz in mehreren Modellen geschrieben; Markennamen werden nur zur Kennzeichnung genannt.