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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Live URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

I have learned how to put a colored layer above image using background.

<div class="my-image-background">
  <div class="my-image-color"></div>        
</div>

.my-image-background{
  background: url("./images/image-header-desktop.jpg");    
  background-size: 100%;
  background-repeat: no-repeat;  
  position: relative; 
}
.my-image-color {            
    background-color: hsla(277, 100%, 61%, 0.45);
    position: absolute;    
}

I have also learned how to shift a flexbox direction to allow mobile reaady responsive design.

<div class="card">
  <div class="content">       
  </div>
  <div class="my-image-background">        
  </div>
</div>

Desktop:

.card {  
  display:flex;  
}
.content {  
  flex-grow:1;  
}
.my-image-background{  
  flex-grow:1;  
}

Mobile:

@media only screen and (max-width: 375px) {
  .card {  
    display:flex;
    flex-flow: column;      
    flex-direction: column-reverse; 
  }
  .my-image-background{  
    flex:25vh;
  }
}

Continued development

I need to keep learning how to control sizes, espcially image size, gaps between parts, etc.

Useful resources

• W3SCHOOLS - A lot of information and examples of how to execute various CSS tricks.
• MDN Web Docs - very good and detailed website, gives some examples.