Skip to content
Submitted 3 months ago

Testimonials Grid Section with Next.js, Tailwind CSS

JaceLee•240
@jaceleedev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

This was a much more challenging task than I initially anticipated. Each card had slight differences in size, and the first card was completely different. I'm extremely proud that I didn't give up and managed to complete it to the end. Grid is truly amazing, but I think it will take more time to get used to than flexbox. That's why I plan to continue using grid and practice with it in the future.

I've created a separate view for tablets to ensure a natural responsive design, even though it wasn't in the original design specifications. Please come and take a look!

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

First, handling the transition from desktop to mobile was incredibly difficult. Since the desktop layout was challenging, I started working on the desktop view first, but I struggled with how to easily handle the responsive layout. The solution was to use the max-sm, max-lg, etc., classes provided by tailwindcss. These classes allow developers using a desktop-first approach to perfectly apply responsive design.

Second, there were too many conditional renderings, which made the code increasingly difficult to read. I was able to solve this using the clsx module. By handling complex logic with functions using clsx, the component became much cleaner.

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

I welcome any tips that you might have gained while working on this project. 😄

Community feedback

  • haquanq ®️•1,585
    @haquanqPosted 3 months ago

    Hello @jaceleedev 💅

    Nice work on the solution!! It looks good and similar to the design.

    Here is my opinion on what can be improved

    • When ever using section or article, you need to provide a title/heading (h2-h6) otherwise you can use div instead to wrap it's content. Or, you can provide a visibility hidden heading inside section, in your case should be h1 since page must have one h1 (improve SEO & accessibility).
    • As i said above, each or your article card need a title, you should consider using person name and status as a title/heading h2 (short and concise). The first paragraph of bold text can be considered to be the next heading h3(more descriptive) instead of being inside blockquote (important: never skip heading level).
    • About using blockquote, you should use custom quotation marks as such (delete these quotation marks inside text) to achieve more accurate looking marks.
    blockquote {
  quotes: "“" "”" "‘" "’";
}

    Have a nice day and enjoy coding!!! 🕺🔮

    Marked as helpful
    1
  • JaceLee•240
    @jaceleedevPosted 3 months ago

    Thank you for your feedback. Initially, I did include headings, but I was hesitant in this challenge because I didn't see an appropriate place for an h1 in the sections. However, as you suggested, using a hidden h1 is a great solution. I've updated the project to include h1 through h3.

    I didn't remove the first paragraph from the blockquote because it requires some restyling, and it is actually a quote. Since it's not a simple title, I decided to leave it as is. Regarding the quotation marks, I copied them directly from the Figma design to match the style. If this were a professional project, I would request the designer to update the quotation marks.

    Thank you for your valuable feedback!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord