Build a landing page in plain HTML and CSS

This prompt builds a complete landing page in a single HTML file with no framework. Give it your product, sections, style and brand colour, then open the file in a browser and ask for one change at a time.

text-code-landing-page-html — claude — 87 words

Act as a frontend developer and designer.

Product: [WHAT IT IS, e.g. a tiffin delivery service in Pune]
Sections: [e.g. hero, how it works, menu, pricing, FAQ, contact]
Style: [e.g. warm colours, rounded, friendly, lots of white space]
Brand colour: [e.g. #F97316]

Write one HTML file with embedded CSS and no frameworks. Make it responsive, fast and accessible, with real-looking placeholder copy I can edit. Use semantic tags, good contrast, a sticky header and a clear call-to-action button. Add comments marking where to change text and images.

Edit in the builder Copy & open Claude ↗Copy & open ChatGPT ↗Copy & open Gemini ↗

Open the file in your browser, then ask for one change at a time: "make the hero shorter", "add a testimonials section".

Get a better result

What you will get

One HTML file with embedded CSS and no frameworks: a responsive, accessible landing page with your sections, a sticky header, a clear call to action button, placeholder copy you can edit and comments showing where to change things.

Why it works

A single file with no frameworks is something you can open by double clicking, edit in any text editor and host anywhere. Giving the product, sections, style and an exact brand colour code replaces guesswork with your details. Asking for comments on where to change text and images means you can keep editing without coming back to the AI for every word.

Common mistake

The page uses stock images from links that do not load.

Fix: Ask for simple placeholder boxes with the size written inside, and swap in your own photos later.

Also watch for

The brand colour fails contrast on white text. Ask it to check text on the brand colour and use a darker shade for buttons if needed.
The menu breaks on a phone. Open it with your browser’s phone view and ask for a menu that works at 360 pixels wide.

Try a variation: add a contact form

Ask for a simple enquiry form section, with labels, a success message and a note on which form service could receive it.

Still not right? Reply with this

Change only one thing: [YOUR CHANGE]. Keep everything else in the file exactly as it is.