Social Proof Section using CSS Grid

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Nice work on this challenge! Your overall layout looks good. Here are some pointers I've got after taking a look at your project:

  • You've got a paragraph tag with a class of .heading for the heading. It's much better to use actual heading tags to create a proper content hierarchy. In this design, I'd say the "10,000+ of our users..." content would be a h1, and the names of the people would be h2 elements. Creating a content hierarchy is especially important for accessibility purposes as screen readers use them to structure the content.
  • For the star images, you've got alt="star" on each of them. This means screen readers would read out the word "star" 5 times before each review. To improve accessibility, I'd recommend leaving the value blank. This means the screen readers would skip the images and jump straight to the content to read the review.
  • Beware of nesting selectors unnecessarily in Sass as it can lead to overly specific selectors in the generated CSS file. For example, you have this selector .container .wrapper .ratings-container .rating .rating-description which could be this .rating-description.
  • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
  • Small details, like line heights and spacings, go a long way to refining a project and getting it closer to the design. You can see in the design comparison slider where some of these differences are.
  • The responsiveness could also do with a few tweaks, especially at tablet sizes where the content looks quite squashed in places.

  I hope these tips help. Let me know if you have any questions. Keep up the great work! 👍

  1

  ---

  

  Ron Paolo Toyhacao•165

  @rontoyhacaoPosted almost 4 years ago

  @mattstuddert Yayy thank you so much for your advice I really appreciate it, I'll surely apply them next time. I always get confused on which element to use on my projects especially with short texts like names.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @rontoyhacao you're welcome! Knowing what element to use where is something that will come with practice and experience. So just keep at it 🙂

  0