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 using CSS Grid, Media query and Flexbox

@ladykays

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@thomashertog

Posted

while the site is looking almost like the design there are some subtleties that can be improved.

Design

  • too much whitespace overall (i'm blaming the over-use of grid-template-rows)
  • the border-colors on the profile images is not necessarily white everywhere
  • the profile images are too big (in the design they're as big as the space needed for the next to it)

HTML

  • your solution does not include semantic HTML (e.g. your .container element could be a <main>)
  • I feel like you used headings (<h1> to <h6> for styling). Styling should be done in CSS, heading levels should be in logical order. by that i mean: when you strip away everything else in your HTML, does it like a table of contents that makes sense?
  • the image you included for the quotation mark in the background should either not be in the HTML (and can be added via a pseudo element in CSS) or it should have the aria-hidden attribute to ensure it is removed from the accessibility tree
  • alt texts should have meaningful content (in my opinion: repeating the name is not meaningful, so those might be hidden as well, or you need to give them better alt texts)

Marked as helpful

0

@ladykays

Posted

@thomashertog Thanks for the feedback. It was really helpful and I appreciate you taking your time to go through my work and providing me with constructive feedback. I have implemented all your suggestions. Thanks once again.

0

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