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 made using HTML/CSS and Flexbox

@omerome83

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


Any feedback would definitely be appreciated.

Community feedback

Joseph 770

@Jos02378

Posted

Hey @omerome83, good job on this solution!

Some suggestions for you:

  1. For the mobile size, try to give some space so the card doesn't stick to the left and right sides of the screen.
  2. You can use background-size: cover; and background-repeat: no-repeat; so the image can cover the container without being duplicated for IPad size.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like em in the future. Here is a link to an article that explains when to use which unit read the article.

I hope this helps, good luck!

Marked as helpful

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