💻 Coding
Web Development Prompt: Page Build Plan, Code and Checks
Turn a page request into a web build plan: semantic HTML, CSS and JavaScript for your stack, form validation, accessibility, performance and a test list.
0Reviews
Prompt
Act as a senior front-end web developer who builds pages with semantic HTML, modern CSS and plain JavaScript, and adapts to the team's framework when one is named. You write the smallest code that meets the request, explain every choice briefly, and never call an API, library or endpoint that the request does not mention. Inputs: - What the page or feature must do: [PageRequest] - Stack and constraints: [Stack] - Content and fields I already have: [ContentAndFields] - Where data goes when submitted, if anywhere: [DataDestination] - Browsers, devices and accessibility needs: [SupportTargets] - Things that are out of scope: [OutOfScope] Generate: 1. Build plan: the files to create or change and what each one does. 2. Markup: semantic HTML for the page with labels, landmarks and headings in order. 3. Styles: CSS for a mobile-first layout, focus states and reduced motion. 4. Behavior: JavaScript for validation and submit, using only the DataDestination given. 5. Accessibility pass: what you did for keyboard, screen readers, color contrast and error messages. 6. Performance notes: what keeps the page fast (no extra libraries, image sizes, deferred scripts). 7. Test list: manual and automated checks to run before merge. 8. Open questions: anything in the Inputs that was unclear. Rules: - If Stack names a framework, write the code for that framework instead of plain HTML. - Never invent API keys, URLs or backend routes; use a clear placeholder and list it in Open questions. - Keep code samples short and complete; no "rest of code here" gaps. - Respect OutOfScope.
Instructions
Name your real stack and the exact endpoint or data destination, mark what is out of scope, and run the test list in a browser before you merge. Keep secrets out of prompts and code, validate input on the server, and have a person review the code before it ships.
Generated Output
This image was generated using the prompt above.
Examples
Example Input
PageRequest: a catering inquiry form for a family restaurant website; guests pick an event date, guest count and menu style, and get a clear thank-you message after sending. Stack: static site, plain HTML, CSS and JavaScript, no framework, no build step. ContentAndFields: name, email, phone (optional), event date, guest count (10 to 200), menu style (buffet, family style, boxed lunches), notes. DataDestination: POST JSON to the existing endpoint /api/catering that our backend developer already built. SupportTargets: current Chrome, Safari, Firefox and Edge on phones and desktops; must work with a keyboard and a screen reader. OutOfScope: payments, calendar availability, email confirmations.
Example Output
1. BUILD PLAN
- catering.html: the form page.
- css/catering.css: layout and form styles.
- js/catering.js: validation and submit to /api/catering.
2. MARKUP (catering.html, main part)
<main id="main">
<h1>Catering inquiry</h1>
<form id="catering" novalidate>
<label for="name">Name</label>
<input id="name" name="name" required autocomplete="name">
<label for="email">Email</label>
<input id="email" name="email" type="email" required autocomplete="email">
<label for="phone">Phone (optional)</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">
<label for="date">Event date</label>
<input id="date" name="date" type="date" required>
<label for="guests">Guest count (10 to 200)</label>
<input id="guests" name="guests" type="number" min="10" max="200" required>
<fieldset>
<legend>Menu style</legend>
<label><input type="radio" name="menu" value="buffet" required> Buffet</label>
<label><input type="radio" name="menu" value="family"> Family style</label>
<label><input type="radio" name="menu" value="boxed"> Boxed lunches</label>
</fieldset>
<label for="notes">Notes</label>
<textarea id="notes" name="notes" rows="4"></textarea>
<p id="form-status" role="status" aria-live="polite"></p>
<button type="submit">Send inquiry</button>
</form>
</main>
3. STYLES (key rules)
form { display: grid; gap: .5rem; max-width: 36rem; }
input, textarea, button { font: inherit; padding: .6rem; }
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none; } }
4. BEHAVIOR (js/catering.js, loaded with defer)
const form = document.getElementById('catering');
const status = document.getElementById('form-status');
form.addEventListener('submit', async (e) => {
e.preventDefault();
if (!form.checkValidity()) {
status.textContent = 'Please fix the highlighted fields.';
form.querySelector(':invalid').focus();
return;
}
const data = Object.fromEntries(new FormData(form));
status.textContent = 'Sending...';
try {
const res = await fetch('/api/catering', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
if (!res.ok) throw new Error(res.status);
form.reset();
status.textContent = 'Thank you. We received your catering inquiry.';
} catch {
status.textContent = 'Sorry, something went wrong. Please try again.';
}
});
5. ACCESSIBILITY PASS
- Every field has a visible label; menu style uses fieldset and legend.
- Status messages use role="status" so screen readers announce them.
- Focus moves to the first invalid field; focus outline is visible.
- Check that the blue outline passes contrast against your background color.
6. PERFORMANCE NOTES
- No libraries; one small deferred script and one stylesheet.
- No images on the form page.
7. TEST LIST
- Submit empty: focus lands on Name and the message is announced.
- Guest count 5 and 250 are rejected.
- Keyboard only: tab through every field and send.
- Screen reader check in VoiceOver and NVDA.
- Successful POST to /api/catering returns the thank-you message; a failed one shows the error.
8. OPEN QUESTIONS
- What does /api/catering return on success and on error?
- Should past dates be blocked?