We’re starting the new year with a beauty of a challenge. It might look straightforward from the outset, but as usual with a Front-End Challenges Club challenge, as we dig into the details, there’s a lot to consider.
What you’re building permalink
The brief permalink
Make sure that your challenge solution does the following as a minimum:
- Uses semantic elements
- Is usable with mouse, touch and keyboard
- Presents an acceptable focus state (pro-tip: this should be additional to the hover state)
- Uses aria roles effectively to announce state changes
Bonus points awarded if:
- You create a solid state management system
- Your solution is lightweight and performant
- Your solution is fully accessible
- You create appropriate transitions and/or animations between states
I’ve used Figma to design this challenge and you can run it with a completely free account!
Here’s some assets to get you going:
Here are some CSS Custom Properties for your colours:
- Code language
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 👋