salehabuhussein / fem-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.

The challenge

Users should be able to:

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

Links

• Solution URL: (https://github.com/Honko-o/FEM-Social-Proof-Section-Master)
• Live Site URL: (https://honko-o.github.io/FEM-Social-Proof-Section-Master/)

My process

I started Building The Design on Phone it was normal and easy But Once I started Coding it for Large Screen sizes I face A lot of Challenges Like for example: 1 - Making Sure The Rating Boxes doesn't cause scroll and the Writing inside doesn't screw up due to size screen changing. 2 - Using Flexbox sometimes seems difficult than it's and it got nice features that I didn't notice until I've gone through the problem of doing the rating Boxes.

Built with

• Semantic HTML5 markup
• CSS Flexbox
• Mobile-first Approach

What I learned

Setting Max width and min width on some elements sometime can be very beneficial When I did the Design On the large screen I noticed the importance of Container Wrapping the Elements.

Continued development

I just want to know the proper approach to position the Rating Boxes That's what I am curious about.