emjogale/testimonial-grid

Frontend Mentor - Testimonials grid section solution

This is a solution to the Testimonials grid section challenge on Frontend Mentor.

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 site depending on their device's screen size

Screenshot

Links

• Solution URL: https://github.com/emjogale/testimonial-grid
• Live Site URL: https://testimonial-grid-chi.vercel.app/

My process

Built with

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

What I learned

I tried grid layout for this project - and found it really usefully for the desktop view, where the different sections spanned different areas of the layout.

Continued development

I have only scratched the surface of what grid layouts can be used for so will be looking more into this.

Useful resources

• Basic Concepts of grid layout

Author

• Frontend Mentor - @emjogale
• Twitter - @emmagale2635

Acknowledgments

I got a lot of inspiration from Grace Snow's solution to this project - particularly the use of blockquote elements for the individual testimonials and a hidden heading for accessibility.

• Mobile-first CSS grid layout, with scss, and flexbox in card headers by Grace Snow