Tabs! So many websites have them and so many create an accessibility nightmare, but friends, that will change with this challenge and its subsequent solution.
What you’re building permalink
The brief permalink
Take the design assets and build and these tabs with whatever front-end technology you want.
Make sure that your challenge solution does the following as a minimum:
- Uses semantic elements
- Is usable with mouse, touch and keyboard
Bonus points awarded if:
- Your solution is lightweight and performant
- Your solution is fully accessible and uses appropriate
- 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 👋