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

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: GitHub
• Live Site URL: GitHub Pages

My process

As usual - I derived the proper markup first, that's both semantic and provides the necessary styling hooks. After that - saving the necessary properties from the style guide (mostly theme colors) and then - themobile layout using top-down approach - deriving the major layout and the details afterwards - mostly using column flex (and a little grid for card headers). Afterwards I did the desktop layout using grid for major component layout and stayed mostly with flex for the individual parts.

Built with

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

What I learned

There can be multiple ways to do a layout and sometimes there isn't a specific indicator for one specific solution. Sometimes a preferable solution pops out later during the project - that's why writing modular and well organized CSS matters - it's more readable and makes it easier to refactor later.

Author

• Frontend Mentor - @marisudris
• GitHub - @marisudris