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

Overview

The challenge

Users should be able to:

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

Screenshot

mobile

tablet

desktop

Links

• Solution URL: https://www.frontendmentor.io/solutions/testimonials-grid-section---tailwind-css-nextjs-BpGt_2Td9I
• Live Site URL: https://fem2407-testimonials-grid-section-next.vercel.app/

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• CSS custom properties
• CSS grid
• React - JS library
• Next.js - React framework
• Tailwind CSS - For styles

What I learned

This time I added the project fonts and colors directly into the Tailwind configuration file.

// tailwind.config.ts
const config: Config = {
  ...
  theme: {
    extend: {
      fontSize: {
        ["fem-11px"]: "0.688rem",
        ["fem-13px"]: "0.813rem",
        ["fem-20px"]: "1.25rem",
        ["fem-28px"]: "1.75rem",
      },
      colors: {
        ["fem-blue-violet"]: "#733FC8",
        ["fem-tropical-indigo"]: "#A775F1",
        ["fem-paynes-gray"]: "#48556A",
        ["fem-white-smoke"]: "#F2F2F2",
      },
    },
  },
  ...
}

Continued development

Maybe I could add some slight animation or transition effects.

Useful resources

• MDN - CSS :nth-child()
• MDN - CSS grid-template-areas
• MDN - CSS grid-area

Author

• Frontend Mentor - @DarrickFauvel
• LinkedIn - Darrick Fauvel