Building a responsive testimonial grid with HTML, CSS, and JavaScript

In today's digital world, a website is often the first point of contact between a potential customer and a business. One of the most effective ways to build trust and credibility with website visitors is by including testimonials from satisfied customers.

Testimonials serve as a powerful marketing tool for businesses, as they provide social proof that a product or service is worth investing in. However, simply displaying a list of testimonials on a website can be unappealing and ineffective. A more effective way to display testimonials is by creating a responsive testimonial grid that highlights the most important information and makes it easy for visitors to navigate.

In this blog post, we will guide you through the process of building a responsive testimonial grid with HTML, CSS, and JavaScript.

Step 1: Set up the HTML

The first step is to set up the HTML structure for the testimonial grid. We will start with a basic structure that includes a container for the grid and individual testimonial elements. Each testimonial will consist of an image, a name, a job title, and a message.

<div class="testimonial-grid">
  <div class="testimonial">
    <img src="image1.jpg" alt="Testimonial 1">
    <h3>John Doe</h3>
    <h4>CEO, Company Inc.</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate vel justo a lacinia. Suspendisse a nulla euismod, eleifend massa ut, mollis libero. Donec ac euismod massa.</p>
  </div>
  <div class="testimonial">
    <img src="image2.jpg" alt="Testimonial 2">
    <h3>Jane Doe</h3>
    <h4>CTO, Company Inc.</h4>
    <p>Donec faucibus orci a sem sodales, eget maximus enim commodo. Maecenas ultrices, nibh a vestibulum ultricies, tellus diam commodo erat, nec pretium purus urna vel mauris.</p>
  </div>
  <!-- Add more testimonials as needed -->
</div>

Step 2: Style the HTML with CSS

Once the HTML structure is in place, we can use CSS to style the testimonial grid. We will use Flexbox to create a responsive grid that adjusts to different screen sizes.

.testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.testimonial {
  width: 30%;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

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

.testimonial h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.testimonial h4 {
  font-size: 16px;
  font-weight: normal;
  color: #999;
  margin-bottom: 15px;
}

.testimonial p {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

Step 3: Add JavaScript functionality

Finally, we can add JavaScript functionality to the testimonial grid to make it more interactive and user-friendly. We will use JavaScript to create a simple slider that allows users to navigate between different testimonials.

const testimonials = document.querySelectorAll(".testimonial");
const prevButton = document.querySelector(".prev");
const nextButton = document.querySelector(".next");
let currentIndex = 0;

function showTestimonial(index) {
  testimonials.forEach((testimonial) => {
    testimonial.style.display = "none";
  });
  testimonials[index].style.display = "block";
}

showTestimonial(currentIndex);

prevButton.addEventListener("click", () => {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = testimonials.length - 1;
  }
  showTestimonial(currentIndex);
});

nextButton.addEventListener("click", () => {
  currentIndex++;
  if (currentIndex >= testimonials.length) {
    currentIndex = 0;
  }
  showTestimonial(currentIndex);
});

We start by selecting all the testimonial elements and the previous and next buttons. We also create a variable to keep track of the current testimonial index.

The showTestimonial function takes an index as a parameter and hides all the testimonial elements except for the one at the specified index. We call this function with the initial index to display the first testimonial.

We then add event listeners to the previous and next buttons. When the previous button is clicked, we decrement the current index and show the testimonial at the new index. If the index goes below 0, we wrap around to the last testimonial. The next button works in a similar way, incrementing the index and wrapping around to the first testimonial if necessary.

Conclusion

In this blog post, we have shown you how to build a responsive testimonial grid with HTML, CSS, and JavaScript. By following these steps, you can create a visually appealing and interactive testimonial section for your website that can help build trust and credibility with potential customers.