Creating a responsive testimonials section with HTML, CSS, and JavaScript

Testimonials are a great way to showcase positive feedback from customers and clients on your website. A responsive testimonials section allows these comments to be easily viewed on any device, regardless of screen size or resolution. In this tutorial, we will be creating a responsive testimonials section using HTML, CSS, and JavaScript.

Step 1: Set up the HTML structure

First, we need to set up the HTML structure for our testimonials section. We will create a container div that will hold all the testimonial elements. Inside the container div, we will create individual divs for each testimonial. Each testimonial div will contain the name of the person who provided the testimonial, their photo, the testimonial text, and a rating (if applicable).

Here is the HTML structure for our testimonials section:

<div class="testimonials-container">
   <div class="testimonial">
      <img src="https://via.placeholder.com/150" alt="testimonial">
      <h3>John Doe</h3>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."</p>
      <div class="rating">
         <span class="fa fa-star checked"></span>
         <span class="fa fa-star checked"></span>
         <span class="fa fa-star checked"></span>
         <span class="fa fa-star"></span>
         <span class="fa fa-star"></span>
      </div>
   </div>
   <div class="testimonial">
      <img src="https://via.placeholder.com/150" alt="testimonial">
      <h3>Jane Doe</h3>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."</p>
   </div>
   <div class="testimonial">
      <img src="https://via.placeholder.com/150" alt="testimonial">
      <h3>Bob Smith</h3>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."</p>
      <div class="rating">
         <span class="fa fa-star checked"></span>
         <span class="fa fa-star checked"></span>
         <span class="fa fa-star checked"></span>
         <span class="fa fa-star checked"></span>
         <span class="fa fa-star"></span>
      </div>
   </div>
</div>

Step 2: Style the testimonials section with CSS

Next, we will style our testimonials section with CSS. We will use CSS flexbox to arrange the testimonials in a row on larger screens and in a column on smaller screens. We will also add some styles to make the testimonials look visually appealing.

Here is the CSS code for our testimonials section:

.testimonials-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.testimonial {
   width: 30%;
   margin-bottom: 30px;
   padding: 20px;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   text-align: center;
}

.testimonial img {
   border-radius: 50%;
   width: 100px;
   height: 100px;
   margin-bottom: 10px;
}

.testimonial h3 {
   margin-top: 0;
   font-size: 18px;
   }
   
.testimonial p {
   margin-bottom: 0;
   font-size: 14px;
   line-height: 1.5;
}
   
.rating {
   margin-top: 10px;
}
   
.checked {
   color: orange;
}

Step 3: Make the testimonials section responsive with JavaScript

Finally, we will make our testimonials section responsive using JavaScript. We will use JavaScript to detect the screen width and change the number of testimonials displayed per row accordingly. We will also add a button that users can click to see more testimonials.

Here is the JavaScript code for our testimonials section:

const testimonialsContainer = document.querySelector('.testimonials-container');
const testimonial = document.querySelectorAll('.testimonial');
const button = document.querySelector('#btn');

let currentSlide = 1;
let width = window.innerWidth;

function showSlides() {
   if (width <= 768) {
      for (let i = 0; i < testimonial.length; i++) {
         testimonial[i].style.display = 'none';
      }
      for (let i = 0; i < 2; i++) {
         testimonial[i].style.display = 'block';
      }
   } else {
      for (let i = 0; i < testimonial.length; i++) {
         testimonial[i].style.display = 'block';
      }
   }
}

window.addEventListener('resize', () => {
   width = window.innerWidth;
   showSlides();
});

button.addEventListener('click', () => {
   if (width <= 768) {
      for (let i = currentSlide; i < currentSlide + 2; i++) {
         if (i > testimonial.length) {
            break;
         }
         testimonial[i - 1].style.display = 'block';
      }
      currentSlide += 2;
      if (currentSlide > testimonial.length) {
         button.style.display = 'none';
      }
   } else {
      for (let i = currentSlide; i < currentSlide + 3; i++) {
         if (i > testimonial.length) {
            break;
         }
         testimonial[i - 1].style.display = 'block';
      }
      currentSlide += 3;
      if (currentSlide > testimonial.length) {
         button.style.display = 'none';
      }
   }
});

showSlides();

Explanation

First, we select the testimonials container and individual testimonials using querySelector and querySelectorAll. We also select the button using querySelector. We then define variables for the current slide number and the screen width.

Next, we create a function called showSlides that checks the screen width and displays the appropriate number of testimonials per row. If the screen width is less than or equal to 768 pixels, we display only 2 testimonials per row. Otherwise, we display all testimonials per row.

We then add an event listener to the window object that listens for a resize event. When the window is resized, we update the width variable and call the showSlides function.

Finally, we add an event listener to the button that listens for a click event. When the button is clicked, we display the next set of testimonials based on the screen width and update the currentSlide variable. If we have reached the end of the testimonials, we hide the button.

Conclusion

In this tutorial, we learned how to create a responsive testimonials section using HTML, CSS, and JavaScript. We used HTML to structure our testimonials, CSS to style them, and JavaScript to make them responsive. With this knowledge, you can create your own testimonials section that looks great on all devices and enhances the user experience. You can customize the design and functionality to fit the needs of your website or project.

Remember, when creating a testimonials section, it's important to use real and credible testimonials from your customers or clients. Testimonials can help build trust and credibility for your brand, and they can also provide valuable feedback that can help you improve your products or services.

With this responsive testimonials section, you can showcase your best testimonials in an attractive and user-friendly way, and make it easy for potential customers or clients to see why they should choose your brand.