Social proof section page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello Hollas! 👋

  Sorry for giving feedback now. I was busy with my exam. 😅

  Anyway, congratulations on finishing this challenge! 👏

  Here is some feedback from me.

  • All the star icons are decorative images. They should be hidden by screenreader users so that they can focus on the "actual" page content. So, I recommend leaving all the alt="" empty.
  • Using a logical heading structure is a fundamental aspect of web accessibility. Correctly formatted h1, h2, and h3 help people who use assistive technology, such as screen readers, to navigate a web page.
  • Those photos are pretty important images. So, I suggest adding some alternative text to each image. Use their name as the alternative text.
  • It's important to make sure the HTML code that you wrote has no issues. So, my recommendation is to fix all the issues.
  • I recommend removing the width: 100%; from the body element. It's because by default the body element is already having full width.
  • Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.
  • In addition to the previous feedback, I recommend removing the height from all the other elements. Let the content inside the element controls the height of it. Also, since you are using % as the unit, it makes the card very short on mobile landscape view.
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible. 😉
  • I suggest using rem for margin and gap. Percentage unit is going to make it behave inconsistently across multiple devices (unless you have tested it).

  That's it! Hope this helps. 😊

  0