social-proof-section-master

Hi Gehad, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

• every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
• images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

The rest is great!

I hope it helps... 👍

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

• To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

• Along with the blank alt tag, you also want to include the aria-hidden=“true” to your stars to fully remove it from assistive technology.

• The profile images are not decorative. Their Alt Tags need to be improved. It should state the following; “Headshot of -person’s full name-“

• To enhance the semantics of your component, you want 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>
   <figcaption></figcaption>
   <blockquote></blockquote>
</figure>

More Info:

ARTICLE

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃