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 briefpermalink
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
Assetspermalink
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 uppermalink
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 👋