Social-Proof-Section

Hi, EJ! 👋

Congratulations on completing this challenge!

I see a lot of things that you can improve especially on the HTML. So, before fixing the CSS, we need to get the HTML right first.

• All the star icons are decorative images. It means that if they don't exist the users won't miss any information. So, I suggest leaving the alt="" empty. This way, screenreader users can focus on the main content.
• Headings have meaning. You need to use it to give structure to the page. Just like a document file where the title needs to be used correctly. So, I recommend thinking of the headings like a title in a document. So, heading one would be the main title and then h2 would be the sub-title. Also, it's best to write the HTML without any styling so that you can see the page structure clearly.
• There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
• Alternative text for images should not contain any words that are related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
• Attribution should live outside the main landmark. Also, it should live on its own landmark element, footer.

Now, for the CSS.

• I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
• On 651px some content are overlapping. So, I recommend trying to fix this issue.
• The mobile layout is not consistent. The ratings should have the same width and stack on top of each other. The comment__first should be horizontally in the center. So, try to make the elements positioning consistent on mobile and keep it as simple as possible.
• Add some padding to the body element to prevent the elements inside it touching to edges of the browser at any screen size.
• I suggest making the background size of the body element as the original size of the image (SVG). As you can see from the design comparison, the background image looks bigger compare to the original design.

That's it! I hope you find this useful! 😊