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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

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

Responsive Screenshots

• Desktop Preview:

• Tablet Preview:

• Mobile Preview:

Links

• Live Site URL: https://giovanibulian.github.io/stats-preview-card-component/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Media queries for different devices

What I learned

I've learned how to use the srcset and media attributes for images to optmize network usage. The code below was used to switch between 2 image files depending on the device's screen size:

<picture id="img-container">
      <source media="(min-width: 769px)" srcset="images/image-header-desktop.jpg">
      <source media="(max-width: 768px)" srcset="images/image-header-mobile.jpg">
      <img id="card-img" src="images/image-header-desktop.jpg" alt="women working in the office">
   </picture>

Continued development

• Start using Mobile First approach.
• Learn more about semantics and accessibility.
• Learn further about how to use srcset.

Author

• Website - Giovani Bulian Simioni