Testimonials grid section with Tailwindcss
Design comparison
Solution retrospective
Hi community, i fhinished this challenge as close than i can, any feedback is welcome. 😁
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @emanuel-ra, congratulations on your new solution!
I’ve some suggestions for you:
The html structure you’ve used here works, but if you want to make this even better, you can replace the
<div>
you’ve used to keep the blocks and replace with some better html markup and semantic, for example, the main block can be wrapped with<main>
and each testimonial card with<article>
, then you can use a tag that not everyone knows, for the paragraph containing thequote
you can replace the<p>
with<blockquote>
that is tag the describe exactly its content.This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/
✌️ I hope this helps you and happy coding!
1@emanuel-raPosted about 2 years ago@correlucas Thanks!! i'll check the article 😁
1 - @VCaramesPosted about 2 years ago
Hey @emanuel-ra, some suggestions to improve you code:
-
The profile images Alt Tags need to be improved. It should state the following; “Headshot of -person’s full name-“
-
You want reduce the padding/margin and font size of your content in mobile view; it is the same from desktop to mobile.
-
I recommend adding a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.
-
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout and give you full control of it.
Here is how it looks like fully implemented: EXAMPLE
Desktop View Code:
.testimonial-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: "daniel daniel jonathon kira" "jeanette patrick patrick kira"; gap: 30px; } .daniel-card { grid-area: daniel; } .jonathan-card { grid-area: jonathon; } .jeanette-card { grid-area: jeanette; } .patrick-card { grid-area: patrick; } .kira-card { grid-area: kira; } `` **Happy Coding!** 👻🎃
0 -
Please log in to post a comment
Log in with GitHubJoin 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