Frontend Mentor - Testimonials grid section solution

This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges helps me improve my coding skills by planning and building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

In this challenge, I build a single-page website which is actually the review/testimonials page of a Software development bootcamp website. It displays the reviews of students that have gone through the bootcamp explaining how it has been of benefit to them.

Users of the page should be able to:

• View the optimal layout for the site depending on their device's screen size (i.e mobile or desktop devices)

• Have access to information on the site through the use of screen readers

Screenshot

Desktop view

Mobile view (1)

Mobile view (2)

My process

Built with

• Semantic HTML5 markup e.g <main>, <footer>, <section> and so on
• Mobile-first approach
• Flexbox properties e.g flex-basis, flex-direction and so on
• Responsive web development
• CSS styling, layout and animation properties e.g display, position, padding, box-shadow, translate and so on

What I learned

In building out this solution, I was introduced to the basics of HTLM5/CSS3, core HTML5 attributes and CSS3 properties, CSS flexbox and it's in-workings, moblie-first approach in developing a website, responsive web development and other frontend concepts which I implemented in this project.

I also wrote CSS code that fades out the visibility of the quotation marks when adjusting the window size from desktop to mobile.

<img src="./images/bg-pattern-quotation.svg" alt="quotation mark" id="quote" width="120">

/* Mobile view */
#quote {
  opacity: 0;
  max-height: 0;
}

/* Desktop view*/
@media (min-width: 576px) {
  #quote {
    opacity: 1;
    max-height: 120px;
    overflow: hidden;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    }
}

Author

• Github - ElijahGbogbo
• Frontend Mentor - @ElijahGbogbo
• LinkedIn - @ElijahGbogbo