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.

Overview
My process
Author

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

Overview

The challenge

The challenge is to build out this card component and get it looking as close to the design as possible. Users should be able to:

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

Screenshot

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
Mobile-first workflow

What I learned

Even though I didn't use it in the end, I learn more about the picture HTML element. It contains zero or more source elements and one img element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child source element and choose the best match among them. If no matches are found—or the browser doesn't support the picture element—the URL of the img element's src attribute is selected. The selected image is then presented in the space occupied by the img element.

I could have used it this way:

    <picture>
      <source
        srcset="images/image-header-desktop.jpg"
        media="(min-width: 800px)"
      />
      <img src="images/image-header-mobile.jpg" alt="" />
    </picture>

I finally preferred to integrate the image as a background in the css.

Continued development

For small projects that don't require SASS, I will continue using CSS custom variables.

Useful resources

MDN - Picture element - It helped me to switch between different image formats depending on the screen size.

Author

Website - Caroline ALEXANDRE ... in construction ...
Frontend Mentor - @CarolineSenes
Twitter - @senes_caroline

CarolineSenes/-Integration_maquette-_Stats-preview-card-component-main