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

Links

• See the solution on Frontend Mentor
• See live demo

My process

Built with

• Semantic HTML5 markup
• CSS Grid
• Tailwind CSS - CSS framework
• Mobile-first workflow

What I learned

This was my first time using Tailwind CSS and I really enjoyed it. The only other framework I have experience with so far is Bootstrap, and I found Tailwind CSS a lot easier to use and customise.

I added custom colors as they are in the design, custom font and background image.

theme: {
    extend: {
      colors: {
        violet: {
          DEFAULT: '#733FC8',
          light: '#A775F1'
        },
        grey: {
          dark: '#19202D',
          medium: '#48556A',
          light: '#ECF2F8'
        }
      },
      fontFamily: {
        'barlow': '"Barlow Semi Condensed", sans-serif',
      },
      backgroundImage: theme => ({
        'background-quote': "url('/images/bg-pattern-quotation.svg')",
      }),
      backgroundPosition: {
        'background-quote': 'top 0% left 80%',
      }
    },
  },

Continued development

I definitely want to use Tailwind CSS with a more complex design to learn more about it.

Useful resources

I found Tailwind CSS documentation very helpful, especially when it came to customisation. If you're struggling with setup of configuration, I also watched parts of a tutorial by The Net Ninja on youtube and found it very helpful.

Author

• Frontend Mentor - @AgataLiberska
• Twitter - @AgataLiberska
• Instagram - @naturalniepoangielsku