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
  • Continued development
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• GitHub repo
• Solution URL

My process

Built with

• Semantic HTML5 markup
• SASS
• Flexbox
• BEM methodology

Continued development

• embed real-world best practices like responsive design, readable code, comments and use don't repeat yourself principles
• mobile first approach
• building re-useable components
• honing html, sass and GIT version control skills

I attempted to try art direction responsive images in the HTML markup with the mobile and desktop image. Using with the 'srceset' and 'media' atrributes. Either i couldn't get it to work or my browser was cached. So this is something to consider in the future. I don't think my image is the right colour of purple using a background image and gradient, i wanted to create a with an overlay.

More info: CSS TRICKS article

Author

• Website
• Frontend Mentor - @darryncodes