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
• Acknowledgments

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: Stats Card

My process

Built with

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

What I learned

I learned about how to use the picture tag in order to change the picture based on screen size. I also learned how to make the image work responsively and not stretch by using the object fit property.

Continued development

I want to continue working with images that need to change based on screen size because it is currently challenging for me. I also want to improve on writing accessible and semantic code.

Useful resources

• Example resource 1 - This helped me for learn how to use the object fit property.

Author

• Frontend Mentor - @AdamElitzur
• Twitter - @adamcandoit

Acknowledgments

Tyrell Curry was very helpful in the Slack channel, he helped me with the image and how to change the color. He showed me how to use filters, which did the trick!