Frontend Mentor - Stats preview card component solution

This is a solution to the Stats preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

Screenshots

Mobile Preview

Desktop preview

Links

• Solution URL: Solution on FrontendMentor.io
• Live Site URL: Live site preview

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• BEM architecture
• Flexbox
• Mobile-first workflow

What I learned

• I learned about background-blend-mode and mix-blend-mode property and in this particular challenge I used mix-blend-mode property to get the desired result.

• I ran into an issue where there was a padding at the bottom of the image and i could not trace where it was coming from. I then realized that image is an inline element and the properties like line-height and font-size would affect them causing them to have bottom padding. The solution was simple which was to make it an inline-block or a block element.

• I learned that when using picture tag it is much better to apply class to img rather than picture tag itself because it is the img tag which displays the image and does all the hard work and if we apply class to picture tag, the property set might not work well.

• I found various ways to adjust image at the right spot. It was a tedious task to choose which one would give the appropriate result. Those three ways are listed below:

1. Using div html tag and background-images property in css

   <div class="img"></div>

   .img {
     height: 100%;
     width: 100%;
     background-image: url("../image/mobile-image.jpg");
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
   }

2. Using picture tag in html

   <picture>
     <source media="(max-width: 1079px)" srcset="../image/mobile-image.jpg">
     <img class="img" src="../image/desktop-image.jpg" alt="meeting">
   </picture>

3. Using multiple img tag in html and display property in css

   <img class="mobile-img" src="../image/mobile-image.jpg" alt="meeting">
   <img class="desktop-img" src="../image/desktop-image.jpg" alt="meeting">

   /*when the screen size is of mobile set the display property of desktop-img to none and vice versa*/
   .desktop-img {
     display: none;
   }

   In my case using picture element was a better option as it works well when you have multiple images saving us from writing separate media queries.

Continued development

This challenge helped me exercise on beginner level of flexbox and now I would like to brush my skills on intermediate level. Also height property can be tricky sometimes and I look forward to work on it till I am comfortable with it.

Author

• Frontend Mentor - @Smita-14

Acknowledgments

A big thanks to MRZ.Code.Manufacture for this youtube tutorial that helped me understand how to match color overlay on the image, this video by Kevin Powell where he explained picture element and this question answered on StackOverflow.