Social proof section master with html and css.

👋 Hi Thais!

I have some feedbacks on this solution:

• Accessibility
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technology such as screen readers or screen magnifiers ignore those images. In this case all images are decorative only except the photo images.
  • For the photo images, I would recommend to use their name as the alternative text.
  • Headings should be chronological order. You should use h1, h2, h3 until h6 in a logical order. Logical heading order will make all users that use assistive technologies such as screen reader can navigate the website easily.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
• Non Accessibility
  • The design width size should not be your breakpoint for your media query most of the time. In this case on screen that has width less than 375px will see desktop layout, since you're forcing the body element to have 1440px.
  • Setting body element to have minimum 900px height is not good for responsiveness.
  • I would recommend to write your stylesheet with mobile first approach, which means your base styling (CSS code outside the media query scope) should be for styling mobile layout and then after that you can use @media (min-width: <size>) to style bigger screen size.
  • Don't forget to see your website on mobile landscape mode.
  • I notice an id selector on your stylesheet (#stars-box). I would recommend to change it to class to prevent high specificity unnecessarily in your stylesheet.
• Question
  • Why do you wrap every photo img tag with figure tag? Could you explain that to me?

That's it! Hopefully this is helpful!