/stats-preview-card-component

A stats preview card component

Primary LanguageSCSS

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

Users should be able to:

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • SCSS

What I learned

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.

Continued development

I have to learn more about extend placeholders and mixins to better optimize my scss file and avoid repeating parts of the code.

Author