Challenge: Progress Stepper


Front-End Challenges Club - Challenge #008

Let’s start the Front-End Challenges Club back up with a beauty of a CSS challenge!

Showing progress visually is very handy in UI design, but it’s even more important to make sure that it’s implemented semantically too. In this challenge, that’s the goal!

What you’re building permalink

A stepper which shows the standard progression through a checkout. The first two steps are complete and have a checkmark-based visual treatment. The third step is in progress and the last step is pending

The brief permalink

Take the design assets and build a progress stepper component, using whatever technology you like. You should aim for the following, at a minimum:

  • Your solution uses semantic HTML
  • Your solution could work with a handful of items or a lot of items
  • Long items and short items should work harmoniously

Assets permalink

I’ve used Figma to design this challenge. You can view everything you need in the browser, here.

Here’s some assets to get you going:

Here are some CSS Custom Properties for your tokens and treatments:

Code language
:root {
  --color-light: #fdfdfd;
  --color-dark: #27474e;
  --color-mid: #496970;
  --color-primary: #f3344a;
  --color-primary-glare: #f4d7da;
  --color-secondary: #678c94;
  --color-secondary-glare: #ebf0f1;
  --shadow: 0px 0px 40px rgba(39, 71, 78, 0.1);

Wrapping up permalink

I’ll publish my solution to this challenge soon. Until then, have fun building it!

If you share your version, make sure you tag it with #FrontEndChallengesClub and as always, I’ll pick my favourite and share it with you in my solution post.

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.