Social proof section using Sass

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 12 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • For star icons used decoratively, like in this challenge, it's best to keep the alt attribute empty. This prevents screen readers from repetitively reading the same description, which can be bothersome for users with visual impairments. So, you can simplify the code by leaving the alt attributes for the star icons empty.

  • I feel that it's not necessary to use JavaScript to create a responsive web page. You could have utilized media queries to add and remove margins from components. If you choose not to use media queries due to how you've set up your grid-template-columns, you could assign a minimum height to the container. Then, align the vertical alignment of its items using align-self. align-self aligns the items within their grid layout vertically.

    .testimonials {
       [...]
       min-height: 300px;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    }
    
    .testimonial:nth-child(1) { /* You can use a custom class here*/
      align-self: start;
    }
    .testimonial:nth-child(2) {
      align-self: center;
    }
    .testimonial:nth-child(3) {
      align-self: end;
    }
    

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Jorge Sánchez•420

  @Jorge-sanchez09Posted 12 months ago

  @MelvinAguilar Greetings 👋

  • I see, I hadn't thought about the images description, I didn't remember the meaning of leaving the alt attribute empty 😅.

  • Yeah, the align-self method would have been much nicer than using JavaScript 😞.

  Thank you very much for the help! 😁

  0