Frontend Mentor - Four card feature section solution

This is a solution to the Four card feature section 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
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshot

Mobile Design	My Solution

Desktop Design
My Solution

Links

• Solution URL: Solution on FrontendMentor.io
• Live Site URL: Live site preview

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• BEM architecture
• Mobile-first workflow

What I learned

• I learned that in order to change the default font size you'd have to target the html tag instead of simply declaring it at the body tag.

Useful resources

• A complete guide to CSS Grid | CSS-TRICKS : This article has divided properties into two sections based on what goes on grid-container (parent) and grid-items (child) with descriptive diagrams and code snippets which helped me understand well. I'd recommend to anyone interested in learning grid layout.

• Layering box shadows | Tobias Ahlin : A very interesting article that talks about different ways to layer box shadows.

Author

• Frontend Mentor - @Smita-14

Acknowledgments

Many thanks to the Frontend Mentor team and the community for giving me the opportunity to learn and grow. 💖💖