Social proof section

Hey there! 👋 Here are some suggestions to help improve your code:

• The profile images alt tags need to be improved ⚠️. It should state the following; “Headshot of -person’s full name-“

More Info:📚

Headshot Alt Text

• For the testimonials, it is best ✅ to to wrap each individual testimonial component in a figure element, the individuals information should be wrapped in a figcaption element and lastly, the testimonial itself should be wrapped in a blockquote element.

Code:

<figure>
   <blockquote></blockquote>
   <figcaption></figcaption>
</figure>

More Info:📚

MDN Figure Element

• Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

• For improved accessibility 📈 for your content, it is best practice ✅ to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅

Hi Elodie👋 Great job on completing this challenge! 🥳

Overall, it seems to be well-structured and easy to understand. However, there are a few areas that could be improved:

• There is a lot of repetition of the same code for different rating containers. For example, the following classes have the same styles:

    background-color: $light-grayish-magenta;
    color: $very-dark-magenta;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;

You could make use of a class for each rating container to improve the maintainability of the code.

• The SVG files for the star icons are being repeated multiple times within the HTML file. It would be more efficient to use a single file and reuse it multiple times with CSS.

• There's some classname which is not self-explanatory, you could make use of more informative classname to improve the readability of the code. such as social-proof__rating-container could be something like social-proof__review-details as it holds the rating details.

Overall, this is a very well done solution to the challenge. Great job!

Hope I'm Helpful! 👍

Keep up the good work! 😊❤️