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 with grid

@sweenejp

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


Wondering how others achieved the staggered effect on the rating cards and testimonial cards. Not too happy with how I did it but it works.

Community feedback

P
Grace 27,950

@grace-snow

Posted

Hi Jimmy,

Well done on this it looks really great!

Some nimor points on your html:

  • I think you're misusing sections atm. Looking at the design this whole challenge would only be one section, not three.
  • you've treated alt text on images kind of the wrong way around... It's all those stars that should have empty alt attributes, but I would probably put the person's name in the alt for the profile images
  • the cards don't need to be in a list IMO. A common complaint amongst assistive tech users is what they call 'listitis' where elements are placed in lists just because they repeat. It's fine, but probably not necessary.

Im viewing on mobile so can't give feedback on how you've done the staggered effect. But I will say it looks fab, so is probably done well! ☺

2
Jane 1,040

@janegca

Posted

Hi Jimmy, nice job. One suggestion, as the original design has the stars and related text centred for mobile devices, perhaps change flex-direction to column and centre the contents.

Happy coding.

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