Frontend Mentor - Social proof section solution

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

Table of contents

• Overview
  • The challenge
  • Screenshots
  • 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 section depending on their device's screen size

Screenshots

• Desktop Preview of my solution
• Mobile Preview of my solution

Links

• Solution URL: FrontEnd Mentor: My Solution
• Live Site URL: GitHub Page: Profile Card Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Rem & Em units
• Desktop-first workflow

What I learned

• This was my first project where I only used rem/em units. So I tried to work on "fluidity". I will continue using rem & em.
• This project also gave me a lot of practice with flexbox.
• I made this webpage very responsive.

Continued development

I want to work on learning

• Mobile-first Workflow
• Utilities
• More efficient ways to achieve responsiveness

Useful resources

• W3Schools: CSS flex-basis Property - This helped me remember the flex-basis property.

Author

• Website - Anosha Ahmed - Not up at the moment, but will be soon.
• Frontend Mentor - @anoshaahmed
• Twitter - @anosha1ahmed