Skip to content
Submitted almost 3 years ago

Stats Preview Card Component Solution | Mobile First Workflow

Nick OD•270
@NickODxyz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    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
    1
    Nick OD•270
    @NickODxyzPosted almost 3 years ago

    @PhoenixDev22 thank you very much for this feedback. These are the things I can really learn from and they make a lot of sense now you point them out.

    I've not looked into line-height before and couldn't work out why removing the rem made it so large in some cases. But now I can see why, so thank you for pointing that out to me.

    Thanks again for the tips, they're much appreciated.

    0

Please log in to post a comment

Log in with GitHub

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