Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card Component Solution | Mobile First Workflow

Nick OD 270

@NickODxyz

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@PhoenixDev22

Posted

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

@NickODxyz

Posted

@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
Discord logo

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