Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column 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

This is 5th project from "Frontend Mentor" to sharpen HTML & CSS skills along with responsive web design and it's build with BEM and Grid layout 1st time.

The challenge

Learnt BEM and Grid Layout first and later implemented first time in a project.

Screenshot

Links

• Solution URL

My process

• Use Google drawing to draw boxes as per design
• Add BEM class names against each of the boxes
• Create HTML -> add BEM class names
• Mobile screen styling first
• Use media query to design for desktop

Built with

• Semantic HTML5 markup
• BEM
• CSS
• Grid
• Mobile First workflow

Useful resources

• Check Acknowledgments section

Author

• Frontend Mentor - @vikramvi

Acknowledgments

Kevin Powell

• Learn CSS Grid the easy way
• Make CSS Grid soooo much easier to understand and use
• GH Repo

BEM References

• https://github.com/annaindistress/frontend-mentor-stats-preview-card-component
  • https://www.frontendmentor.io/solutions/stats-preview-card-component-postcss-ry7pkJvLq
• https://github.com/jaycgreenwald/stats-preview-card-component
  • https://www.frontendmentor.io/solutions/statspreviewcardcomponent-H1YSRb_Uc

Mobile First Approach

• https://www.frontendmentor.io/solutions/mobile-first-css-grid-stat-preview-card-component-rkwwkZOL5
  • https://github.com/serhii-maliutin/stats-preview-card-component

BEM Documentation

• http://getbem.com/introduction/
• http://getbem.com/naming/