Challenge #001 - Email sign-up form

- Takes about 3 minutes to complete


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.

This first challenge is free to participate, but the solution to the challenge will be for paying members only, so subscribe to see the upcoming solution.

What you’re building

Demo shows the sign-up form progressing through each state, including an invalid state. It ends with a success state that completely replaces the form elements.

The brief

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

Here’s some assets to get you going:

Here are some CSS Custom Properties for your colours:

: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;
}

Submissions

This challenge is for you to learn and if you want to just want keep it to yourself, that’s all good. If you want to share it with the Front-End Challenge Club Community, tweet a publicly accessible link, using the hashtag: #FrontEndChallengesClub or directly to @FEChallengeClub and I’ll pick up and link to my favourites in my solution post.

Wrapping up

Enjoy this first challenge and remember: we’re all in this together, so if folks have questions, tweet using the hashtag #FrontEndChallengesClub or tweet directly to @FEChallengeClub.

Remember, only paying members get to see my solution to this challenge, so make sure you subscribe to a paid plan.

See you at the next one 👋


Other challenges

  1. #006 - Auto-scrolling, responsive grid

  2. #005 - Tabs

  3. #004 - Progress Button

  4. #003 - Duotone Card

  5. #002 - Toggle switch

Sign up for a membership

Front-End Challenges club members get all sorts of benefits, including:

  • Full access to all content
  • Access to a private community of other members
  • Access to exclusive AMA sessions

Membership starts at $10 per month or $95 per year.

Sign Up For A Membership