Homework

Homework — validation and responsiveness

Homework — put the validation, the honest limit, and the responsive layout through their paces.

  1. 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 notanemail in the email field and submit: a different message. Type a nine-character message and submit: minlength complains. You wrote none of these.
  2. 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.
  3. 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.
  4. 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.