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: Github
• Live Site URL: Github Page

My process

Built with

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

What I learned

Preventing flex from shrinking content at will

.non-shrinking-flex-item{
  flex-shrink: 0;
}

Background image with color overlay

.background-image-with-color-overlay {
  background: linear-gradient(hsla(277, 64%, 61%, 0.589), hsla(277, 64%, 61%, 0.589)), url(image-url);
}

Continued development

Overlaying background image with some color, using grid, print media query are some of the new things I got to learn while working on this project. I would definitely like to explore it more. And loved the color palette, would definitely like to come up with such unique color palettes in future by myself.

Useful resources

• Web.dev Css Course - Awesome resource to recap css fundamentals
• Kevin Powell's YouTube Channel - Great, concise explanations.

Author

• Frontend Mentor - @sapgit97
• Twitter - @poisoncoreSM