anoshaahmed / fem10-testimonials-grid

Solution to a Frontend Mentor challenge: creating a similar webpage as the design preview provided

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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

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

Screenshots

The desktop design VS My desktop solution

The mobile design VS My mobile solution

Links

• Solution URL: FrontEnd Mentor: My Solution
• Live Site URL: GitHub Page: Testimonials Grid Section

My process

Built with

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

What I learned

In this challenge, I gave everything in my HTML class, and I used only them as my CSS selectors, rather than heavily nesting my selectors.

Continued development

In the future, I want to get better and quicker at designing my layout.

Useful resources

• w3schools: CSS Background Shorthand - This reminded me of the background shorthand property.
• w3schools: CSS grid-area Property - This helped remember the grid-area property.
• CSS-TRICKS: CSS Box Shadow - This helped me understand the box-shadow property.
• CSS Scan: Beautiful CSS box-shadow examples - This is an amazing article with 93 box-shadow examples.

Author

• Website - Anosha Ahmed - Not up at the moment, but will be soon.
• Frontend Mentor - @anoshaahmed
• Twitter - @anosha1ahmed