Challenge: Progress Stepper

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 buildingpermalink

The briefpermalink

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

Assetspermalink

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:

• Figma Prototype
• PDF Version
• Saira Condensed font
• Asap font

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

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

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.

Advert