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

Responsive stats preview card

@rohitd99

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


Hello,

Here are a few things I learned from this challenge :

  • filter and it's uses.
  • Grid and how it works.

I've completed the challenge satisfactorily, but I also have some doubts. Doubts:

  • I've tried BEM methodology to name classes but as you might observe it has been not so good 😅. Can you please give me a few examples using my own code.

  • This was my first try at mobile first, so any tips and improvements will be welcome.

  • I always try to complete these challenges in a certain time frame but mostly fall short due to some small thing , how should I manage things so I do complete them in time?

  • Also I've tried various filters for the image but still it seems slightly off, any tips for this?

Any other suggestions apart from these inside the code are again most welcome

Community feedback

@EdouardHrgt

Posted

Well done ! Overall it looks great but i can notice some weird stretching on your image. Personnally as this image has no semantic value it belongs more of the styling part so should be a background-image. This said, if you want to keep it as an html img tag I invite you to check the 'object-fit: cover' css props for the responsive image ratio.

Marked as helpful

0

@rohitd99

Posted

@EdouardHrgt

Thank you for the suggestion,I agree the image as such has no semantic value , i will also check out the object-fit: cover thing.

1

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