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