[Frontend Mentor Challenge] Testimonials grid section solution

Table of contents

• [Frontend Mentor Challenge] Testimonials grid section solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • 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

Screenshot

• Desktop Design
• Mobile Design

Links

• Live Site URL: Testmonials Grid Section

---

My process

Built with

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

What I learned

1. CSS shorthand example(2 values)

  div{
    /* : top & bottom、right & left */
    padding: 5px 3px; 
    margin: 0 auto; /*easy way to center item in container*/
  }

2. Response Web Design using mediaquery

  @media(min-width: 576px){
    /* some content here */
  }

3. flexbox

  .itemContainer{
    display: flex;
    flex-direction: column;
  }
  .items{
    flex-basis: 25%;
  }

4. Font settings

• open google fonts
• choose the fonts family and its weight
• copy the and place it in the head of html document.
• set the fonts by {font-family}

Useful resources

• Frontend Web Development Bootcamp Course - This is my first frontend learning videos that I watch on Youtube. I follow the videos to accomplish this challenge.
• MDN web doc - The MDN Web Docs site provides information about Open Web technologies

Author

• Frontend Mentor - VictorChao