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
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

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: https://www.frontendmentor.io/solutions/social-proof-section-using-flex-css-html-as-well-as-desktopfirst-h5y2ozuBi
• Live Site URL: https://socialproofsection.liamsworkshop.repl.co/

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• Desktop-first workflow

What I learned

Some of the biggest things I learned were

• 1 | The Impact of max-width on width. If max-width is defined. Then a static width can't go over that value.
• 2 | The uses for psudo elements such as ::before or ::after which can be used to change properties in a certain way.
• 3 | Finally I learned the psudo class of :nth-child() which can be very useful, instead of needing multiple classes/Id's

Author

• Frontend Mentor - @Cooly-o-Cats)
• GitHub - @Cooly-o-Cats

Acknowledgments

Thanks to the amazing people behind this for the background code. As well as ideas of HTML Structuring: https://github.com/AllanKirui/social-proof/blob/master/static/css/style.css