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
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 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.


Comments

If you liked this post, you might like these ones, too

  1. Solution: Duotone card

    Front-End Challenges Club - Solution #003

    Continue
  2. Solution: Toggle switch

    Front-End Challenges Club - Solution #002

    Continue
  3. Solution: Email sign-up form

    Front-End Challenges Club - Solution #001

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.