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

Responsive Social Proof Section using Flexbox and Grid

P

@XenoMee

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


Hello everyone! 👋

What do you think of my solution for this challenge? Specifically the code for the grid container and cards. I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

Any suggestions or improvements you can think of? Would love your feedback to learn and improve.

Thanks! 😊

Community feedback

Bryan Li• 3,550

@Zy8712

Posted

Your website looks great and your code is easy to read. Great job!!!

The only slight thing I'd change is not having alt descriptions for decorative images like the stars as screen readers will pick up on them and read them out. I would leave the alt description empty unless the image portrays some information important to the page.

Aside from that I'd say your solution is pretty much one to one with the original design.

1

P

@XenoMee

Posted

@Zy8712 Thank you so much for the feedback! 😊

Yeah, I noticed right now that the screen readers will read the alt name for the star images 15 times, 5 times for each star review card.

Got the main point: to use alt for images that are important and can provide meaningful/helpful information of the website content to the user who uses a screen reader.

0

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