Frontend Mentor | Stats preview card component coding challenge solution

Solution retrospective

For this project I tried to use semantic HTML elements where possible. However, I still used <divs> for the elements containing the statistics and the image. I would appreciate any feedback on my use of semantic elements.

I had a lot of difficulty figuring out how to replicate the image with colour. I eventually found some tutorials on ::before and ::after psuedo-elements and tried using an ::after selector to layer the image with a background color, but I wasn't able to get this working correctly. Later I came across some image-related tutorials using blend-modes and found that by blending a background-color and background-image I was able to get very close to the project example. I think this is a relatively easy way to get this to work, though I could not get the color to match exactly. Any suggestions here would be appreciated.

On a previous project it was suggested that I try using Perfect Pixel to get closer to the example sizes and dimensions, rather than visually best-guessing. While I found this very helpful, I felt I ended up using a lot more pixel sizes instead of responsive sizes to get things to line up. Furthermore, some of the pixel dimensions I found matched the example were odd/random sizes. While I think this project is probably the closest I have gotten to replicating the dimensions of the example images, it felt unnatural to be using such obscure number values sometimes. Any feedback on how I can use responsive design more, how to make better use of Perfect Pixel, or any other advice or best practices when it comes to sizing of elements would be very helpful.

As a final note, I was struggling to get this project to work on a mobile screen size with media queries. I was able to get my card-info section working more-or-less, but I could not get the image to display properly above the card along with some other issues. So I am going to come back to the media queries later.

Thank you in advance.

Community feedback

tediko• 6,580

@tediko

Posted 2 months ago

Hello!

Congrats on finishing another project! Thanks for providing your thought process aswell as asking detailed questions! Here is my feedback:

To me, this image isn't decorative. Anywhere an image adds any kind of value for sighted users, then alternative text should be provided so you should use img element with alt text instead. If the image is in context, and is related to your content or adds something to it it's likely not decorative. read more
Answering your question why image-color isn't matching design. There should be some opacity on your image to make your blend color brighter. Normally you would put background-color on .card-img and opacity: 0.75 with mix-blend-mode on img but since you went other approach with background-image as you thought your image is decorative you can't put opacity on your .card-img since it will change opacity for both container with background-color and image within. Instead use ::before pseudo-element on .card-img and put your image there so you have both container and image in different elements. Don't forget to add position: relative to .card-img.

  position: absolute;
  content: '';
  background-image: url(images/image-header-desktop.jpg);
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.75;

I wouldn't sweat about making your solution pixel perfect. Of course you want to match design but don't waste your time to move elements one pixel here and there. Later when you'll have access to figma and design files taking those measurements like spacings, sizing etc will be easier so you will match "pixel perfect" design.
As for why you struggle with responsivnes. Look at mobile-first approach which is designing a desktop site starting with the mobile version, which is then adapted to larger screens. But since you make the other way around here's why it doesn't work for you. You should change order of flex-items when you switch to mobile screen size so your image is first, and content is second. Add order: 1 to .card-info. Next, you need to get rid of those explicitly set width/height values. You never want to do that. You want your content to take as many space as it needs and it will make you container width/height. Add max-width: 1110px; width: 100%; flex-direction: column to your .container and remove width/height. Remove width from .card-info and padding. Then add something like padding: 1rem. Remove width and set some height on your .card-img like height: 400px; width: 100%; so it take space within your container. Add padding: 1rem to your body so your container doesn't stick to device edge of the screen. Remove padding-right from .stats--item. Now you have your mobile version. From there you can make it so it match desktop design.
You should definitely take a read how to make your solutions responsive. read more.

Have fun!

Marked as helpful

Stats preview card component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community