Submitted 2 months ago

Responsive Grid | Tailwind

Brian Hammer• 180

@BrianHammer

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

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 am proud of how everything fits together, and how I overcame each challenge. One thing I want to do differently is look at the best way to order elements in a grid. My way works, but it involved adding classes to two cards, when I would rather adjust the order by changing the class of only one card.

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

One challenge I had was getting the background image to not overlap the text. I solved this by learning about background-image properties using tailwind. I adjusted both the position, prevented background repeating, and adjusted the size using tailwind documentation. Another challenge was positioning the grid elements correctly. I solved this by adding 'order' class to the two last elements to get them in the correct order.

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

Any feedback is appreciated

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 2 months ago

Hi!

A couple suggestions about semantic tags.

It's a list, so it's better to use ul tag here.
It should be only one h1 tag on the page. Guess since this project is out of context it's fine to skip h1 tag at all.
And I'm not get quite familiar with this topic, so I can't tell for sure, but seems that when text is a quote it should be inside blockquote tag. Here the web.dev article about it.

I guess you could make a mobile version a bit easier =) You can change the grid template to grid-template-column: 1fr instead of changing every item inside it.

Oh, and you could also make the quote image with before or after. It'll spare from fiddling with background properties, but you have to fiddle with positioning and z-index, so I don't really know what is better =)

It's very cool work, keep doing =)

Marked as helpful

Please log in to post a comment

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