Skip to content
Submitted 12 months ago

Responsive Social Proof Section using Flexbox and Grid

Adrian Trandafir 🎮•330
@XenoMee
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

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,530
    @Zy8712Posted 12 months ago

    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
    Adrian Trandafir 🎮•330
    @XenoMeePosted 12 months ago

    @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

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