Challenge: Tabs


Front-End Challenges Club - Challenge #005

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.

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 usable without JavaScript enabled
  • Your solution is lightweight and performant
  • Your solution is fully accessible and uses appropriate aria attributes
  • You create appropriate transitions and/or animations between states

Assets permalink

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
:root {
  --color-light: #f3f3f3;
  --color-mid: #dedede;
  --color-dark: #313e4f;
  --color-slate: #444444;
  --color-inactive: #4f637d;
  --color-primary: #2a7bd6;

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.