Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Testimonials Grid Section built with Astro and Tailwind CSS

SmartAce 170

@Smart-Ace-Designs

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I originally attempted to use card components and data stored in a JSON file. I soon realized that there was too much variation in the cards to benefit from a generic card design. I am proud that I was able to recognize the flaw in my design early and start over without too much effort.

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

I tried to original store the testimonial data in a JSON file along with some custom CSS code that was specific to each testimonial. I soon discovered that the Tailwind JIT was not compiling those class names when stored in a JSON file and the styling was being lost. It took me quite a bit of time to figure out what was causing the problem...but then figured out that I needed to add the JSON file to the content property in the tailwind.config.mjs file. In the end, however, I ended up scraping the idea of using a JSON file for other reasons.

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

Nothing at this time. But I am very open to suggestions and constructive criticism.

Community feedback

P
Markus 240

@mhjarvis

Posted

Your site looks great - love it that you also used Astro. I ended up actually creating a Card component in mine, along with a JSON file. Finally got it working.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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