Stats preview card component - HTML / Sass / Grid
Design comparison
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
- @vanzasetiaPosted over 2 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 emptyalt=""
andaria-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 helpful1@DarrickFauvelPosted over 2 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 anopacity: 0.75
declaration which lightens the image and it seems to perfectly match the design.Thanks again! 😊
:D
0@vanzasetiaPosted over 2 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 anindex.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 helpful1@vanzasetiaPosted over 2 years ago@DarrickFauvel About the
mix-blend-mode
, thank you for telling me about theopacity
. I never thought about that actually. 😅1@DarrickFauvelPosted over 2 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@vanzasetiaPosted over 2 years ago@DarrickFauvel No problem! Glad to help! 😀
Marked as helpful1@DarrickFauvelPosted over 2 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 followingimg
styling. 😥img { width: 100%; height: 100%; object-fit: cover; }
However, when I removed the html
picture
element surrounding theimg
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@vanzasetiaPosted over 2 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 helpful1@DarrickFauvelPosted over 2 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 - Don't use
Please log in to post a comment
Log in with GitHubJoin 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