Social proof section | grid, scss

👋Hi Gutka! First, I can't find the CSS file on your GitHub repo 😅. I also had see the source code, but I couldn't open the CSS file.

I have some feedback on this solution:

• Heading order is important. You need to use h2 first, before you can use h3.
• Rated 5 Stars... should not be a heading. Heading tags is used for titling section. If you think that is an important information, I recommend to use strong tag.
• The alt value should not be hyphenated. It should be human readable and informative.
• The star icons are decorative images. Remember, for any decorative images, you should leave the alt="" and add aria-hidden="true or role="presentation". Or you can just use background-image as Tediko said.
• If you're going to use background-image, there's a gotcha. You need to change the width value on the icon-star.svg file to create a space. I recommend to increase it to 22 (based on Tediko Solution) to create a space on the right side of the icon, since you can't use margin or padding on background.
• The feedback__name should not be a heading too.
• For the alt value for the photo, I recommend to just fill it with their name. alt="Colton Smith".

That's it! Hopefully this is helpful!

Hello, Gutka! 👋

Congrats on finishing another challenge! 🎉 Your solution looks good. Here's my few tips:

• Less breakpoints doesn't necessary means better. Now, your solution isn't fully responsible. It does look good on mobile and on larger desktops but everything inbetween does look like mobile and it isn't good. Here is my old solution to this challenge just to illustrate you how it can behave across screen sizes.
• You repeat your HTML code with star images which is unnecessary. Find the way to use only one star image. You can do it easily by using background-repeat approach in your css. To do this you'll have to create empty div and remove all img's.

Good luck with that, have fun coding! 💪