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.
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