GitHub Copilot prompt to build a landing page
Landing pages go wrong when the whole thing is generated in one shot and the CSS turns to sludge. This prompt walks GitHub Copilot through the page one section at a time in inline chat, with a hard line count on the stylesheet, so you ship a hand-checkable static page instead of a div pile.
Last updated
Build a single-page marketing site as index.html plus one stylesheet, no framework. Sections in order: a hero with one headline and one primary call to action, a three-column feature row that collapses to stacked cards under 640px, a code sample block with a copy button, and a footer with a mailto link. Use semantic elements, header, main, section, footer, and give every image an alt attribute or an empty alt if decorative. Load zero external fonts and zero scripts except the copy button handler. Work section by section with inline chat so each diff stays reviewable, and keep the stylesheet under 200 lines by reusing custom properties for color and spacing. Acceptance: the page renders sensibly at 360px and 1440px, tab order reaches the call to action before the footer, and the copy button writes the sample to the clipboard.
Same task in other tools
Questions about this prompt
Why generate the page one section at a time?
A whole-page generation gives you one huge diff and stylesheet rules you cannot trace to a section. Per-section inline chat keeps each change small enough to reject without unwinding everything else.
The repo already uses Tailwind. What changes?
Drop the 200-line stylesheet cap and the custom-properties instruction, keep the section order, breakpoint, and acceptance checks, and tell Copilot to use values from the existing Tailwind config instead of arbitrary ones.
The copy button works locally but fails on the deployed site. Why?
The clipboard API requires a secure context. Serve over https, and add a fallback that selects the code text when the write call rejects so users can still copy manually.