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.

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

Note: Delete this note and update the table of contents based on what sections you keep.

Users should be able to:

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

• Solution URL: frontendmentor.io
• Live Site URL: carltonmpofu.github.io

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

In this project, I learned about CSS Grid and Flexbox but decided only to use Flexbox since it works better for one-dimensional layouts. I had some challenges getting the image to fill the div container. But, I managed to get it to work using the code sample below.

<div class="card-image">
  <div class="image-desktop">
  <img  src="image=path" alt="">
  </div>
  <div class="image-mobile">
  <img  src="image=path" alt="">
  </div>
</div>

.image-desktop {
  height: 100%;
}

.image-mobile {
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

In future projects, I want to make use of CSS grid and flexbox more to improve my knowledge and skills when it comes to the two modules.

• A guide to flexbox - This is a fantastic guide that helped me understand how flexbox works. I'd recommend it to anyone looking for a comprehensive guide that explains everything about flexbox.

• W3Schools CSS Flexbox - This helped me practice using flexbox properties and familiarize myself with the layout module.

• Frontend Mentor - @CarltonMpofu