Frontend Mentor - Social proof section solution

This is a solution to the Social proof 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
• Author

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: My solution
• Live Site URL: Github pages

My process

Built with

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

What I learned

I learned how to reference the nth-child of various html tags. There was a lot of flexbox exercise in this challenge also, which was fun.

To see how you can add code snippets, see below:

.rating {
  &:nth-child(1) {
    transform: translateX(-6rem);
  }

  &:nth-child(2) {
    transform: translateX(-3rem);
  }
}

Continued development

I am going to continue to focus on Sass but I want to start putting all of these projects into react.

Author

• Website - My portfolio
• Frontend Mentor - @TimMartin13