Social proof section solution using mobile first

👋Hi There!

I have some feedback on this solution:

• Accessibility
  • 👍 Good job for handling all the images. All the stars are decorative images.
  • Since the star images are decorative images, I would recommend using div to wrap all the five stars instead of using ul and li.
  • I would recommend writing the full name for the alternative text for each photo.
  • Use rem unit for the body font size instead of px. Using px will not allow the users to control the font size of the page based on their needs.
  • There are these invalid HTML:

Check all the headings inside all divs that has "stars" class
<h2>Rated 5 Stars in Reviews</h3>

• Also, the Rated 5 stars... text should not be a heading. They should be paragraphs.
• To help you decide a better HTML element, every time you want to write the HTML markup for any project, I would recommend thinking of it as writing a document. It will help you decide which text should be a title (heading), or a paragraph, etc.
• I would recommend swapping the p element on the quoted text with blockquote for better semantic HTML.
• Non Accessibility
  • I would recommend creating a div.container to limit the width of all elements or add max-width to each individual element. If you see this web page on 650px - 1279px, all the boxes are becoming too wide.

.container {
  max-width: 31.25rem;
}

That's it! Hopefully, this is helpful!

Use different paddings for different screen sizes; you could use some media queries for tracking sizes. On your solution, 4k-screen or mobile paddings are the same. You could imagine it as a block of a big landing page, so when the screen is large, you'd obviously want it to be in the middle and not stretched out. Anyway, Good luck!