Skip to content
Submitted almost 2 years ago

Stats Preview Card Component

Vanessa Ayer•100
@vanessa-ayer
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I've just completed my third front-end coding challenge via Frontend Mentor 🎉

SO much fun!

This is the first time I used CSS grid and it worked perfectly. I wasn't sure if I should have used CSS flexbox in this scenario. What did you use?

Any and all feedback is welcome :)

Code

Please log in to post a comment

Log in

Community feedback

  • P. Ricardo•2,370
    @pRicard0

    Some HTML tips

    • Instead of using the tag <span> for the "insights" text, I think you can use the <em> tag. The <em> tag is used to define emphasized text. The content inside is typically displayed in italic. A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
    • All images must have an ALT attribute. However, for decorative images, the ALT attribute should be empty. Screen readers and other technologies will recognize an empty ALT tag, identify the image as decorative and skip over it. I think the image on the right is just decorative.

    CSS tips

    • You need to learn how to create responsive projects. You need to use breakpoints and etc...
    Marked as helpful
  • Pankaj Joshi•20
    @Pnkj12joshi

    how can i add the this color on my image pls help

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