Challenge: Email sign-up form

Front-End Challenges Club - Challenge #001


The first ever challenge is an incredibly common design pattern: an email sign-up form. We’re keeping it simple with ours, but there’s some hidden details that if you get right, you’ll create a solid user experience for everyone.

The brief permalink

Take the design assets and re-create the sign-up form with whatever front-end technology you want. This is a front-end challenge, so don’t worry about handling form data or any back-end stuff.

Make sure that your challenge solution does the following as a minimum:

  • Validates the user’s email address
  • Manages focus and uses appropriate focus styles
  • Uses appropriate, semantic elements
  • Provides a baseline accessible user experience

Bonus points awarded if:

  • You use progressive enhancement
  • You use modern CSS
  • Your solution is lightweight and performant
  • Your solution is fully accessible and uses appropriate aria roles and regions
  • You create subtle transitions and animations between states

Assets permalink

Here’s some assets to get you going:

Here are some CSS Custom Properties for your colours:

Code language
CSS
:root {
  --color-primary: #4c2982;
  --color-secondary: #f9d170;
  --color-bg: #f9f7f3;
  --color-text: #252525;
  --color-light: #f3f3f3;
  --color-success: #067973;
  --color-success-bg: #f5fffe;
  --color-error: #b71540;
  --color-error-bg: #fdeff3;
}

Wrapping up permalink

When you’ve tried building this one for yourself, head over to the solution to see how I built it!

See you at the next one 👋


Comments

If you liked this post, you might like these ones, too

  1. Solution: Progress Stepper

    Front-End Challenges Club - Challenge #008

    Continue
  2. Challenge: Progress Stepper

    Front-End Challenges Club - Challenge #008

    Continue
  3. Solution: Tabs

    Front-End Challenges Club - Solution #005

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.