Skip to content
Chapter 05 of 07 · 2 lessons · ~21 min

Real Features Clients Ask For

Build two features clients ask for all the time: a dark mode toggle that remembers the choice, and form validation with friendly, accessible error messages.

YOUR PROGRESS0%
/ Lessons in this chapter
12
How to Make a Dark Mode Toggle in JavaScript How to build a dark mode toggle that respects system settings, remembers the visitor's choice and doesn't flash on page load. Coming soon
13
JavaScript Form Validation How to check form fields before sending, show friendly error messages, and keep forms accessible. Coming soon

Chapter practice task

Task: Add dark mode and a validated contact form to your portfolio

  1. Move your colors into CSS variables and add a dark theme.
  2. Add a toggle button that switches themes and remembers the choice.
  3. Respect the visitor’s system setting on their first visit.
  4. Validate your contact form fields when the visitor submits.
  5. Show clear error messages next to each field and announce them to screen readers.

By the end of this chapter

  • You can build a dark mode toggle that respects system settings and remembers choices
  • You can validate forms with built-in HTML rules and custom JavaScript checks
  • You can show accessible error messages

Quick answers for this chapter

Is dark mode worth adding?

For portfolios, blogs and tutorial sites, yes. Many people browse in dark mode, especially at night.

Is JavaScript validation enough?

No. It improves the experience, but the server must always check the data again.

Can I validate without JavaScript?

Partly. HTML attributes like required and type="email" give basic validation for free.