Social proof section

Community feedback

• 

  Abhinav•240

  @IamAbhiDev

  Posted almost 2 years ago

  Hey there 👋. Congratulations on completing the challenge! 🎉

  You did a great job completing this challenge! 😃 Here are a few recommendations that I have to help you improve your code -

  Html 📄:

  • It's good to use semantic tags in your Html to make the webpage more interactive and easy to navigate for assistive technologies. Though it's important to note that every webpage must have one <main> element.

  • Using <section class="container"> can cause accessibility issues. Instead, it's better to use <main class="container"> to specify the main content of the document.‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

  • Instead of using the <div> element for your heading and text, you can use the <header> element as it indicates the header of the webpage to the users using assistive technologies such as screen readers to help them navigate through the webpage.

  You can write the code for it as follows -

  <header class="top-section-text">
  <h1 class="heading">10,000+ of our users love our products.</h1>
  <p class="text">We only provide great products combined with excellent customer service.
  See what our satisfied customers are saying about our services.</p>
  </header>
  

  • You do not need to nest the header and the rating section under <div class="top-section">. It is better to keep them separate which will give you more control over your layout in this case.‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

  • To make it more accessible, you can make use of the <ul> element instead of the <div> element, and you should replace the <h2> heading with the <p> element in the case of your ratings and testimonials. Here's an example of how -

  Ratings -

  <ul class="ratings-container"> <li class="ratings"> <div class="ratings-icon"></div> <p class="ratings-text">Rated 5 Stars in Reviews</p> </li> <li class="ratings"> <div class="ratings-icon"></div> <p class="ratings-text">Rated 5 Stars in Report Guru</p> </li> <li class="ratings"> <div class="ratings-icon"></div> <p class="ratings-text">Rated 5 Stars in BestTech</p> </li> </ul>

  Testimonials -

  <ul class="testimonial-container"> <li class="testimonial"> <div class="profile"> <img src="./images/image-colton.jpg" alt="" class="img"> <div class="user"> <p class="name">Colton Smith</p> <p class="status">Verified Buyer</p> </div> </div>

  <q class="review"> We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent! </q>

  </li> <li class="testimonial"> <div class="profile"> <img src="./images/image-irene.jpg" alt="" class="img"> <div class="user"> <p class="name">Irene Roberts</p> <p class="status">Verified Buyer</p> </div> </div>

  <q class="review"> Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery.</q>

  </li> <li class="testimonial"> <div class="profile"> <img src="./images/image-anne.jpg" alt="" class="img"> <div class="user"> <p class="name">Anne Wallace</p> <p class="status">Verified Buyer</p> </div> </div>

  <q class="review"> Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone! </q>

  </li> </ul>

  CSS 🎨:

  • It's a good practice to center content using CSS grid or flex-box. Here's how you can do it -

  Flex-Box:

  body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  }
  

  Grid:

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

  I hope you find this helpful 😄 Above all, the solution submitted is good!

  10