joy-joy2001/social-proof-section-master

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
  • Useful resources

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 (Github)
• Social Proof Section by Joy E

My process

Built with

• Semantic HTML5 markup
• CSS custom properties - Became familiar with customer properties thru freeCodeCamp and its actually not as hard as I though!
• Flexbox - Becoming more comfortable with flexbox and putting in the effort to debug myself and read documentation rather than just copying solutions online without fully understanding

NEXT UP ON MY LEARNING: CSS GRID + MOBILE FIRST WORKFLOW/RESPONSIVE + SASS

What I learned

I learnt more about flexbox and its properties i.e. flex which consists of flex-grow, flex-shrink and flex-basis. I think I have a somewhat good understanding of how they work individually. I challenged myself to read a long-ass article to understand how it works and now I do! Doing so helped me to format the hero section in a way that the flex-item will occupy the same amount of space (50%)

Additionally, using the custom css properties made adding colour properties much easier! I can see why everyone use it now...

Continued development

I think I need to start facing my fears and attempt responsive design i.e. media queries and mobile first flow... I'm gonna redo this project and the 3 card column using a mobile first workflow and make it as repsonsive as possible!

Useful resources

• Equal Column layouts with Flexbox - This helped me with the hero section where I wanted to make the columns of equal size, DESPITE having different content size!