Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

social-proof-section

@TheDeola

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@didyouseekyng

Posted

Hey Deola, Nice work completing this challenge!! let me just chip in some suggestions:

  1. border: .2px solid hsl(303, 10%, 53%); this line of code on the main tag wasn't needed for this design.
  2. I think on your ratings class, you can use display: flex; flex-direction: column;, so that the star icon and the text can be on top of each other for the mobile design.
  3. The paragraph tag in the boxes class should actually be aligned to the left on the mobile design and desktop design. So I think you can use text-align: left; in the boxes class.
  4. Have you thought about using a naming convention for your classes to make it more understandable? Currently I'm using BEM, you can check this on YouTube. Trust me when I say it makes structuring your code way better and organized.
  • Overall you have done a nice job trying to get through this challenge. Kudos! Keep it up! 🙌🏾

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord