Capstone: Multi-Section Registration Form

Put everything together! Build a complete, multi-section, validated, accessible, and styled registration form using all the skills you've learned.

Step 1 of 7

What we're building

In this capstone lesson, you'll combine everything you've learned about HTML forms into one comprehensive project: a multi-section registration form for a fictional online learning platform called "WebSprout Academy."

The final form will have:

  • Personal Information — name, email, phone, birthday (text inputs, email, tel, date)
  • Account Details — username, password with validation (pattern, minlength, required)
  • Preferences — favorite language (select/option), interests (checkboxes), experience level (radio buttons)
  • CSS styling — polished inputs, buttons, focus states, validation colors
  • Accessibility — fieldset/legend grouping, aria-describedby, labels for every control

This form represents the kind of real registration form you'd find on GitHub, Coursera, or any modern web application. Each step builds one section, and by the end you'll have a complete, production-quality form.

Let's get started!

HTMLREAD ONLY
PREVIEW