Frontend Mentor - Testimonials grid section solution

This is a solution to the Testimonials grid 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

This is 15th project from "Frontend Mentor" to sharpen HTML & CSS skills along with responsive web design and it's build with "BEM", "Grid & Flexbox layout", "min-width, max-width, width in various units & with help of Google ofcourse".

The challenge

Users should be able to:

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

Screenshot

Links

• Live Website

My process

Built with

• Semantic HTML5 markup
• BEM
• Mobile-first workflow
• CSS Grid
• Flexbox
• min-width, max-width & width in various units
• Chrome and FF Dev Tools
• Googling

What I learned

• Improving Googling techniques
• Better dev tool usage on both FF and Chrome
• Better debugging
• Different problem solving techniques

Continued development

• Learn more about better practices wrt below

  • Grid, Flexbox layouts
  • Mobile layout designs
  • width, max-width, min-width good practices
  • padding, margin good practices
  • SEO and Accessibility practices
  • BEM
  • Responsive Web Design optimum techniques

Useful resources

• Frontend Mentor slack community + website
• YT videos
• Google
• Stackoverflow

Author

• Frontend Mentor - @vikramvi

Acknowledgments

• Frontend Mentor slack community
• YT content creators
• Google + SO community