Homework — validation and responsiveness
Homework — put the validation, the honest limit, and the responsive layout through their paces.
- Make the browser refuse. Press Send message with the form empty. The browser should stop, jump to the first empty field, and show its own message — note that it's in your browser's language, written by nobody. Now type
notanemailin the email field and submit: a different message. Type a nine-character message and submit:minlengthcomplains. You wrote none of these. - Meet the honest edge. Fill every field correctly and press Send. Watch what happens: the page reloads with your answers in the address bar as a query string (
?name=…&email=…) and no confirmation. That's the form validating and then having nowhere to deliver — expected, because there's no server and no JavaScript. Be able to say, in one sentence, what would make Send actually work. - Labels and keyboard. Click each field's label text — focus should jump into the field. Then Tab through the whole form: name, email, subject, message, Send. Every field reachable, every one showing the focus ring.
- Resize to a phone. Drag the window narrow, past 640px. The gallery drops to one column, the nav wraps into a scrollable row, and the Send button goes full-width. Above 640px it's the desktop layout; below, the phone one — one breakpoint doing it.
Try it alone: in the dev tools, delete required from the email field and submit the form empty — it no longer blocks on that field. Then change the email field's type="email" to type="text", type abc, and submit — the shape check is gone too. Put both back. That experiment shows exactly how much validation those two small attributes were doing for free.
Required result: the form blocks bad input with native messages before submit; you can state what happens on a valid Send and why; the labels focus their fields; and the layout switches cleanly at 640px.
To submit: a screenshot of a native validation message on the email field, and one sentence naming what a real project would add so that Send delivers the message.
Next. You've now built an entire page — semantic, styled, responsive, accessible, validating — by hand, from HTML and CSS alone. The last lesson asks the obvious question: a framework like Bootstrap could have produced a lot of this in minutes. Would it have been the right call? What does reaching for one actually buy, and what does it cost? No code — just the judgement to decide, now that you know what the framework would be doing for you.