Skip to content
Submitted over 3 years ago

Stats Preview Card Component Solution | Mobile First Workflow

Nick OD•270
@NickODxyz
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi all,

I tried the mobile first workflow for a change, I think I prefer desktop first tbh lol. But will try and stick with mobile first from now on, as it seems to be the way to go.

I had fun with the image overlay, thankfully the mix-blend-mode property is referred to in the figma designs. Once I hacked about for a bit, I think I got it done OK with the least amount of code in my .overlay and .overlay .img classes.

Any feedback on my coding again would be most appreciated.

Thanks, Nick

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • PhoenixDev22•16,830
    @PhoenixDev22

    Hello @NickODxyz,

    I have some suggestions regarding your solution:

    • use an unordered list with 3 items for the stats class="stats".

    • numbers don't make sense as h2s. The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

    • line heights should be unit less like 1.6 not have a unit like rem or em.

    • work on the card responsiveness.

    Overall your solution is good. Hopefully this feedback helps.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord