Skip to content
Submitted about 4 years ago

Stats card component

livana•40
@livlivana
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My first attempt at Frontend mentor's beginner challenge.

Not the most concise code and there seems to be a gap between the image and the image-container that I'm not too sure how to get rid of. Please do let me know how I can better improve my code/any shortcuts or best practice that I take note of! Thank you :-)

Code

Please log in to post a comment

Log in

Community feedback

  • Oludayo DS•100
    @multidamsy

    Good job, however, you have to do some work on the view on mobile and tab. The layout gets disorganised as I shrink to smaller deevices

    Marked as helpful
  • Matt Studdert•13,611
    @mattstuddert

    Hey Livana, congrats on completing your first challenge! Did you learn anything new while working through it?

    For the image, you need to add display: block; to remove the gap at the bottom. It's a quirk with images whereby you often need to add display: block; because of that issue.

    Be sure to check out the accessibility report. At the moment, you're missing the alt attribute on the img element. This will make screen readers read out the file path, which isn't helpful. You can either add descriptive text in the alt attribute or if you feel the image doesn't add context to the content, you can leave it blank like this: alt="". That will ensure screen readers skip the image.

    Also, I'd say the numbers in the stats aren't headings. Instead, you could change them to span elements to style them differently. The fact you've used a list is great, as it is technically a list of stats.

    I hope that helps! Let me know if you have any questions 🙂

    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