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

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: https://jaydesai-stats-preview-card.netlify.app/

My process

Built with

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

What I learned

1. How to use picture tag to make image tag responsive, below snippet shows how to manage images based on screen size

      <picture class="preview__card__header">
        <source srcset="./images/image-header-desktop.jpg 768w">
        <source srcset="./images/image-header-mobile.jpg 320w">
        <img src="./images/image-header-mobile.jpg" alt="team meeting">
          </picture>    

2. Continuation of above,Adding overlay for picture tag, picture tag is inline so it doesnt have its own height and width, changing display to block and using relative positioning with ::after selector to assign overlay background does the tricks.

  .preview__card {
    &__header {
      display: block;
      position: relative;
      img {
        position: relative;
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block;
      }     
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(var(--color-primary-light), var(--color-primary-light));
      }
    }
  }

3. If inner content is overflowing and not displaying the radius of border, user overflow:hidden

https://markheath.net/post/keep-inside-rounded-corners-css

If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.

Continued development

Understand responsive images in a better way

Useful resources

• Overlay Color / Tinted Effec - This helped with understanding how achieve the tinted effect using css
• Using picture html5 tag for responsive images - Amazing tutorial on how to manage images using html5 tag picture
• Using object-fit and object-position -overlay gradient on image tag
• When to use margin vs padding

Leant about text properties

• text-align
• text-justify
• letter-spacing
• text-transform

Author

• Website - Jaymit Desai
• Frontend Mentor - @jaymitd
• Github - @jaymit123