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.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Live Site URL: https://flourishing-creponne-073eb3.netlify.app/
- Solution URL: https://www.frontendmentor.io/solutions/stats-preview-card-scss-mobile-first-hDGRJ0ihDj
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- SCSS
I learned how to simply switch images between mobile and desktop with the picture tag and srcset.
The default image loaded will be the one for mobile unless the viewport width has a minimal value of 53em (same as my breakpoint).
<picture>
<source srcset="images/image-header-desktop.jpg" media="(min-width: 53em)" />
<img src="images/image-header-mobile.jpg" alt="people brainstorming" />
</picture>
I learned to use scss rgb function to generate color with opacity. It outputs a rgba value in the compiled css.
$color-neutral: hsl(0, 0%, 100%); // white
.stat-label {
color: rgb($color-neutral, 0.6); // white with a 60% opacity
}
I keep learning on how to structure my scss variables and build a naming convention before heading to the code.
I have to learn more about extend placeholders and mixins to better optimize my scss file and avoid repeating parts of the code.
- Website - Gwenaël Magnenat
- Frontend Mentor - @gmagnenat
- Twitter - @magnenatg