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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

This one is like a walk on the park, quite easy, perfect for sunday coding, no stress, still, i did it in 4 hours

The challenge

Users should be able to:

• View the optimal layout for the section depending on their device's screen size

Links

• Solution URL: Solution here
• Live Site URL: Live site URL

My process

This time, i used mobile first, because i thought that at least with that, all my flex items are aligned, and when i did the desktop version, all my flex items won't scatter everywhere, i learned this the hard way after i did the testimonial grid challenge using desktop first, it was a madness.

the rest just like usual, layout first, set the size, width, height and all that, then i add the color

Built with

• div is still better
• CSS
• Flexbox
• Mobile-first workflow
• no framework, no library

What I learned

backgroud imagecan be stacked o top of each other

Continued development

There are parts of the image where it need to used stars 5 times, i would like to learn about how to simplify it more, if there is a way that is.

Useful resources

• MDN web docs - I think everyone should know how to use this website, it is like wikipedia made only for coding
• getcssscan - i used this website to copypaste the shadow style

Author

• Frontend Mentor - @ALtera21
• github Profile - ALTera21