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
  • Built with
  • What I learned
• 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: Front End Mentor Solution
• Live Site URL: Hosted on Github

Built with

• Microsoft Edge
• VS Code
• Semantic HTML5 markup
• CSS custom properties
• Media Queries
• Flexbox
• SCSS (Sass)
• Mobile-first workflow

What I learned

This challenge I learned how to use media queries to make the website dynamic and scale with the resoloution of the device in which the user is using. One major feat, was to make the image on the right appear on top when the screen is below a certain size.

Author

• Website - Christopher Carruthers
• Frontend Mentor - @carrumbum

Acknowledgments

I would like to put a word out for all the devs at Front End Mentor and thank them for creating a platform for people who want a challenge whilst learning Web Developement.