Challenge: Progress Stepper

Published on by Andy Bell

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

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

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

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:

css
: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

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.