Skip to content
Submitted over 3 years ago

Stats preview card component - HTML / Sass / Grid

sass/scss
P
Darrick Fauvel•490
@DarrickFauvel
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everybody,

Since I recently learned CSS grid, I thought I would challenge myself with only using grid in this project. I know flexbox could have been used, but I just wanted to push my new skills.

Also, when figuring out how to implement the black & white source image into the image part of the card, I chose a solution that uses the CSS property mix-blend-mode. Is this a good use here?

Please let me know what you think and whether I missed something or could do something better.

Thanks! :D

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Darrick! 👋

    Congratulations on finishing this challenge! 🎉 Nice work on this challenge! 🙌

    I notice that you are using Parcel, I would recommend having the compiled code so that everyone could give feedback on your stylesheet much easier. Opening one by one the Sass files make it harder to review the styling.

    About the image overlay, I was using mix-blend-mode too and yeah, it's a good case to use it. 😉

    I have some feedback on this solution:

    • Don't use header for the card content since it is not a full webpage. This is one chunk of content that all belong together and in a real website would sit with other content.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>
    • I would recommend using picture element for images that have alternative versions of an image for different display/device scenarios.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • The item-title should not be a heading element. The content below it is too small. You might find it helpful to think of a heading like a title on a document.

    I hope this helps! Keep up the good work! 👍

    Marked as helpful
  • optimusprime202•1,160
    @optimusprime202

    Hey @DarrickFauvel, Great job!

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