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-master

@MojtabaMosavi

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would really appreciate it if you take the time to answer some of this questions.

  1. Do you see any redundency in the HTML if so how can it be improved ?
  2. Is there any batter way to do the icon-star if so how ? 3 The background images are not fully responsive how can they be made responsive ?

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Greetings, Mojtaba! 👋

Good job on this challenge! 👏 Overall, your solution looks pretty good and responds quite nicely! 👍

A few things I'd like to suggest are,

  • Centering the content of the page on extra-large screens (at the moment, it sticks to the left of the page when the width of the screen increase in the desktop layout).
  • Not adding alt text to the star icons if you use <img> tags to add them to the site (since screen readers will read out the alt text for every single star icon, then, which can be annoying). If you like, you can use CSS background images to add the star icons (play around with the width of the container and the background-repeat property to make the star icons repeat at the proper number).

Hope those tips help. 🙂

Your HTML looks good! 🙌

Keep coding (and happy coding, too)! 😁

1

@MojtabaMosavi

Posted

@ApplePieGiraffe thank a lot for the great tips.

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@MojtabaMosavi

No problem! 😀

Oh, and BTW, if you found those tips helpful, an upvote would be appreciated! ;)

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