Wenn du eine Landingpage oder Portfolio als eine HTML-Datei im Browser öffnen willst, ohne Website-Builder.
Du hilfst Menschen ohne Technik-Hintergrund bei einer ganz einfachen, statischen Website oder Landingpage.
Ziel: Eine einzige HTML-Datei mit purem HTML. CSS und JavaScript direkt in derselben Datei. Keine Frameworks, keine Build-Tools, kein npm, kein React, keine Zusatzdateien.
Kontext:
- Wofür die Seite ist: [WEBSEITEN-ZWECK, Z.B. HUNDESITTING, HOCHZEITSEINLADUNG, KLEINER SHOP]
- Hauptüberschrift: [HEADLINE ODER FIRMENNAME]
- Kurzbeschreibung: [EIN ODER ZWEI SÄTZE ÜBER DEIN ANGEBOT]
- Kontakt oder Handlungsaufruf: [E-MAIL, TELEFON, LINK ODER BUTTON-TEXT]
- Farben oder Stil (optional): [FARBEN, STIMMUNG ODER EINE SEITE, DIE DIR GEFÄLLT]
- Zusätzliche Bereiche (optional): [LEISTUNGEN, PREISE, FAQ ODER FOTO-PLATZHALTER]
Erfolgskriterien:
- Eine Datei namens index.html mit HTML, eingebettetem CSS und JS in dieser einen Datei
- Layout funktioniert auf Handy und Desktop
- Klare Sprache. Kein Fachchinesisch
- Das Look-and-feel passt zu Farben oder Stimmung, falls ich das ausgefüllt habe
Anweisungen:
1. Vor dem Code eine kurze Erklärung in einfachem Deutsch:
- Das ist eine sehr einfache statische Seite. Keine Datenbank, kein Login, kein Online-Shop.
- Die Datei als index.html auf dem Computer speichern.
- Zum Anschauen: Rechtsklick auf die HTML-Datei, „Öffnen mit" wählen und den Webbrowser anklicken (zum Beispiel Chrome oder Firefox).
- Texte können später in einem einfachen Texteditor geändert werden.
2. Die vollständige index.html schreiben. Nur vanilla HTML mit eingebettetem CSS und plain JavaScript.
3. Wenn Fotos gebraucht werden: Platzhalter-Blöcke mit Beschriftung statt kaputter Bildlinks.
Ausgabeformat:
- Zuerst die Erklärung aus Schritt 1.
- Danach die komplette index.html in einem Codeblock.
- Am Ende zwei kurze Tipps für kleine Änderungen, die die Person selbst machen kann.
Stilregeln:
- Keine externen Abhängigkeiten außer einem kostenlosen Font von Google Fonts, falls nötig
- Keine erfundenen Testimonials oder Business-Details. Nur meine Infos oder klare Platzhalter wie <DEINE TELEFONNUMMER>
So nutzt du den Prompt
- Ideal, um Ideen sichtbar zu machen, nicht für interaktive Web-Apps.
- Eine zweite Version mit anderem Look anfordern, wenn der erste Entwurf nicht passt.
- Echte E-Mail oder Telefonnummer in die gespeicherte Datei einfügen, nachdem der Code aus dem Chat kopiert wurde.
Tipps
- Für den ersten Entwurf reicht eine Seite. Weitere Bereiche nur anfordern, wenn wirklich nötig.
- Wenn der Chat den Code abschneidet, schreib „Setz die index.html fort, wo du aufgehört hast".
Beispielausgabe
Bevor du die Seite nutzt
Das ist eine sehr einfache statische Website. Nur eine Datei auf dem Computer. Keine Zahlungen, keine Passwörter, keine automatischen Updates.
Den Code unten als index.html speichern. Zum Öffnen: Rechtsklick auf die Datei, „Öffnen mit" und den Webbrowser wählen.
```html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sonnenpfoten Hundeservice</title>
<style>
/* einfache Layout-Styles hier */
...
</style>
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
```
Zwei schnelle Änderungen: Firmenname in der Hauptüberschrift anpassen. [DEINE TELEFONNUMMER] durch die echte Nummer ersetzen.