Frontend Mentor - Social proof section solution

This is a solution to the Social proof 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
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Link
• Live Site URL: Link

My process

Built with

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

What I learned

• The scope of a Grid container is limited to a parent-child relationship (Source). What this means is that you can't set Grid properties to the children of a Grid item and expect it to work.

Continued development

I still don't feel fully comfortable with Grid, got to keep practicing!

Did you guys know I can very easily forget to set the box-sizing of a container to border-box? Because I just spent a while figuring out spacing issues due to this dumb mistake!

Useful resources

• Complete guide to Grid - CSS-Tricks never fails.
• MDN Web Docs - Most trustable source of documentation.

Author

• Twitter - @codingtomato
• Frontend Mentor - @VeryEvilTomato