Responsive Testimonials Grid Section using Tailwind CSS

What are you most proud of, and what would you do differently next time?

I’m most proud of successfully implementing a responsive layout that seamlessly transitions from a vertical stack on mobile to a 4x2 grid on desktop, using Tailwind CSS’s utilities for Flexbox and CSS Grid. The custom mobile order (Daniel, Jonathan, Jeanette, Patrick, Kira) was a highlight, achieved by reordering the HTML and using md:order-* classes to maintain the desktop grid layout with Kira spanning two rows vertically. This required careful planning to balance mobile and desktop requirements while adhering to the style guide’s colors (e.g., bg-[hsl(263,55%,52%)]) and Barlow Semi Condensed font. The mobile-first approach, with gap-6 for spacing and px-10 py-15 for padding, ensured a polished look across screen sizes, and lazy-loading images (loading="lazy") improved performance.

Next time, I’d focus incorporating accessibility testing (e.g., screen reader compatibility, keyboard navigation) early in the process to meet WCAG standards, and consider adding a footer for attribution to enhance professionalism.

What challenges did you encounter, and how did you overcome them?

One major challenge was reordering the testimonials for mobile view (placing Kira last) while preserving the desktop grid layout, as the HTML order naturally affects the flexbox stacking but conflicts with the grid’s positioning.

I overcame the ordering challenge by restructuring the HTML to Daniel, Jonathan, Jeanette, Patrick, Kira, and using Tailwind’s md:order-* classes (e.g., md:order-3 for Kira) to reposition cards in the desktop grid, ensuring Kira spanned two rows (md:col-span-1 md:row-span-2).

What specific areas of your project would you like help with?

I’d appreciate feedback on the following: Accessibility: Suggestions for improving WCAG compliance, such as ensuring the layout is screen-reader-friendly and fully navigable via keyboard.

Mobile Spacing: Input on whether reintroducing max-md:mb-6 or adjusting gap-6 would enhance mobile card separation, especially on smaller screens (e.g., 320px).