Skip to content
Submitted almost 3 years ago

Stats preview card component - HTML / Sass / Grid

#sass/scss
Darrick Fauvel•490
@DarrickFauvel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    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
    1
    Darrick Fauvel•490
    @DarrickFauvelPosted almost 3 years ago

    @vanzasetia Hi Vanza!

    Thanks for checking out my work. I really appreciate your thoughtful feedback.

    I have implemented all of your suggestions. However, I was not able to make the <picture> element work. Every time I test it, and with other browsers, I always get the fallback image. 🤔 I also looked at your solution and I got your fallback image too. Am I missing something? I've looked at multiple sources and seen working demos, but for some reason it is not working for me, at this moment. 🤷‍♂️ I'll keep trying though.

    Oh, if I could share something for your solution. I noticed that your image is darker than what is shown in the design. As you mentioned, we both use the mix-blend-mode: multiply style declaration. However, I also added an opacity: 0.75 declaration which lightens the image and it seems to perfectly match the design.

    Thanks again! 😊

    :D

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @DarrickFauvel As long as you are using the latest update of your browsers then there should not be any problem. If you try to inspect the element, you can only inspect the img element.

    I would recommend trying the picture element on your local server (live-server) and creating an index.html and writing the following code.

    <picture>
      <source
        srcset="https://source.unsplash.com/440x400/"
        media="(min-width: 1280px)"
      />
      <source
        srcset="https://source.unsplash.com/430x430/"
        media="(min-width: 950px)"
      />
      <source
        srcset="https://source.unsplash.com/420x420/"
        media="(min-width: 800px)"
      />
      <source
        srcset="https://source.unsplash.com/400x400/"
        media="(min-width: 768px)"
      />
      <img src="https://source.unsplash.com/300x300/" alt="" /></picture>

    Now, first see the website on 500px width, and then 768px, then 800px, then 950px, then 1280px. If your browser support picture element, the image should keep changing.

    P.S. I've just tried this by myself. I have a slow internet connection so It takes a while for the image to change. Anyway, my browser supports the picture element and the image is changing every time I resize the browser screen.

    Marked as helpful
    1
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @DarrickFauvel About the mix-blend-mode, thank you for telling me about the opacity. I never thought about that actually. 😅

    1
    Darrick Fauvel•490
    @DarrickFauvelPosted almost 3 years ago

    @vanzasetia Thank you for the code sample! It appears that it does work in my browser, as would be expected. 🥳

    As you correctly said, when inspecting the element, only the img element is inspected. That was my confusion. 😕 Thank you for clearing that up. I will definitely use this practice in my projects. 😊

    1
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @DarrickFauvel No problem! Glad to help! 😀

    Marked as helpful
    1
    Darrick Fauvel•490
    @DarrickFauvelPosted almost 3 years ago

    @vanzasetia I've been working on this a little more 🤯. I wanted this solution to be more responsive to other screen sizes, so I adjusted my grid to use column percentages, but for some reason in the "landscape" view of my card, the image would not fill the right-side card-image div with the following img styling. 😥

    img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    However, when I removed the html picture element surrounding the img element, it filled the space as expected 😊. Which is great, but I am using only the desktop image for all screen sizes. I tried for a good while to get the image to fill the space with the picture element, but with no success. 😭

    Do you think the picture element can still work in this situation? Maybe I am incorrectly using or going beyond the use of the picture element in this situation. Or, maybe I am splitting hairs and should just take the win 🏆, as the image is responsive and displaying quite nicely, I think. 🤷‍♂️

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    @DarrickFauvel It might be there's a default styling for the picture element though, I am not sure. 😅

    I think if you do another challenge, that would be fine. Your solution is already looking good and I'm sure that you don't want to do this challenge forever, right? 😂

    Marked as helpful
    1
    Darrick Fauvel•490
    @DarrickFauvelPosted almost 3 years ago

    @vanzasetia I got it to work in a simple demo I created on codepen 👍, but I've spent too much time trying to make it work in my solution and it still doesn't work. 😥

    You're right. It's time to move on to another challenge. 😊 Thanks

    1
  • optimusprime202•1,200
    @optimusprime202Posted almost 3 years ago

    Hey @DarrickFauvel, Great job!

    0

Please log in to post a comment

Log in with GitHub

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