Frontend Mentor - Social proof section solution

This is our solution to the Social proof section challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

    This is a simple social proof section. We've used flexbox to make it responsive. We've also used a few media queries to make it responsive for mobile devices.

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://github.com/UbaidRussell/social-proof-section
• Live Site URL: https://ubaidrussell.com/social-proof-section/

My process

We first started by developing a section of the website one part at a time. Every part was developed separately with its needed media query being featured right under it's section in out main.css and then we combined them together. We used flexbox to make the website responsive. We also used a few media queries to make it responsive for mobile devices.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

We've been working on accessibility so this code is a bit different from the original. We've added a few aria attributes and a few roles to make the site more accessible.

    <div role="presentation" class="rating-section-part-one">

Continued development

We'll keep building cool websites

Useful resources

• Example resource 1 - This helped me for media queries. I really liked this pattern and will use it going forward.

Author

• Website - UbaidRussell
• Frontend Mentor - @UbaidRussell
• Twitter - @UbaidRussell

Acknowledgments

    Thanks to Frontend Mentor for providing us with such a great platform to practice our skills.