HTML CSS Page Prompt: Responsive in One File
A landing page, portfolio or simple form in one HTML file: responsive, accessible and with no build step.
You are a front-end developer. Build a single self-contained HTML file. PAGE - Type: [LANDING / PORTFOLIO / FORM / PRICING] - Purpose: [GOAL] - Sections: [LIST] - Style: [MINIMAL / BOLD / DARK / PLAYFUL] - Colours: [PALETTE OR "you choose"] - Content: [PASTE COPY OR SAY "placeholder"] REQUIREMENTS - One file: HTML with internal CSS and minimal vanilla JS. No frameworks, no CDN. - Responsive with CSS grid/flex and clamp() for type. Test at 360px, 768px, 1440px. - Semantic HTML: header, main, section, footer. One h1, logical heading order. - Accessibility: contrast ratio 4.5:1, focus states visible, labels on inputs, alt text on images. - Performance: no layout shift, system font stack unless I ask otherwise. OUTPUT 1) THE FILE — complete, ready to save as index.html. 2) SECTION MAP — what each section does and why it is in that order. 3) RESPONSIVE NOTES — what changes at each breakpoint. 4) ACCESSIBILITY NOTES — what was done and what still needs checking manually. 5) WHAT TO CHANGE FIRST — the three edits most likely needed for my brand. RULES - No placeholder lorem ipsum if I gave copy. If I gave none, use realistic text, not lorem. - No inline event handlers; addEventListener only. - No CSS frameworks, no resets from CDN.
If it does not work at 360px, it does not work.
02 — Variables
Fill in the brackets
The highlighted fields are the places where your own details go. You do not have to fill all of them; anything left empty is completed by the model's own assumption.
[LANDING / PORTFOLIO / FORM / PRICING]
[GOAL]
[LIST]
[MINIMAL / BOLD / DARK / PLAYFUL]
03 — How to use
How to use it, step by step
- 01
Give the copy even roughly — generated layouts with lorem ipsum hide whether the design works.
- 02
Check 360px width first; most layouts break there, not on desktop.
- 03
Ask for the section map; it tells you if the page has an argument or just sections.
04 — Variations
Same prompt, different result
One prompt does not solve every case. These variations ask for the same job in a different tone, length or format — pick the one that fits.
Form
Same structure for a form: validation, error messages, success state, and a note on what backend is needed.
Email template
Same structure for an HTML email: table-based layout, inline CSS, tested widths, dark-mode note.
05 — Tips
Notes that take the result up a level
- System fonts are faster and look intentional. Google Fonts add a render-blocking request.
- Focus states are not optional; keyboard users lose the page without them.
06 — FAQ
Frequently asked about Software and Code
Can I use this in production?
Yes for static pages, after checking contrast, keyboard navigation and mobile rendering on a real device.
Why one file?
No build step, no dependencies, easy to deploy anywhere. Split it when the page grows past a few hundred lines.
Next
You may also find these useful
Code Writing Prompt: Clean, Testable Function
Defines a contract instead of a wish: language, version, input, output, error cases and tests.
Intermediate ChatGPTClaudeDebug Prompt: From "Why Doesn't It Work" to a Diagnosis
Converts "why doesn't it work" into a systematic diagnosis: reproduce, hypothesise, isolate, verify.
Intermediate ChatGPTClaudeRefactor Prompt: Improve Without Breaking Behaviour
Simplifies working code without changing behaviour, planned as reversible steps you can review one at a time.
Advanced ChatGPTClaudeSQL Query Prompt (Schema Included)
SQL written without the schema rarely runs; this prompt requires schema, relationships and expected output.
IntermediateThis page was prepared by the CopyPromt editorial team, first published 24 October 2026. Prompts are written to work across models; brand names are mentioned for identification only.