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

Mobile-first and responsive social proof section with html and css

HYDROCODER 555

@HYDROCODER

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


Not super hard as there were no big illustrations involved; I used both CSS grid and CSS flex this time for different scenarios that I found were most suitable for; I could have used ul+li semantics but I kind of realized it later; nevertheless working with divs is comfortable for me; I just need advice regarding centering the whole social proof vertically. Any other feedback regarding the code or the site itself would be appreciated.

Community feedback

P
Grace 27,890

@grace-snow

Posted

Hello

Well done on this,it looks pretty good ☺

Try to get the alignment right on the left and right of the page on desktop. And use min-height 100vh on your section (which should be a main element, not section) to fix vertical centering of the component on the page.

In the html you need to

  • remove all alt values on those stars. Those are purely decorative images as the writing already says "5 stars" so should not be announced by assistive tech
  • as apple voiceover will still announce svg images even if they have an empty alt attribute, its probably best to also add aria-hidden="true" to those stars as well
  • remove all the strong tags. Change font weight with css instead. String means emphasis and should only be used intentionally for that purpose (eg emphasising words in a paragraph)
  • in the testimonials you have text in a div alone. It always needs to be in a meaningful element, like a paragraph or blockquote. In this case I would probably have each testimonial as a figure element, with the person's name as fig caption. It needs something like that, even a heading from the person's name and paragraph for the quote would do - just something to give semantic structure to the content

In css make sure font sizes are never in px. Use rem (or sometimes em) instead. That's really important

Good luck

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