Challenge: Email sign-up form

Categories

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 👋

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.