Skip to content
Submitted about 2 months ago

Responsive Testimonials Section made using HTML5, CSS Grid & Flexbox

Sunay Dagar•120
@suzzy-dszy
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?
  • Happy that I was able to utilize grid-template-areas for the first time to easily layout the content of my webpage.
What challenges did you encounter, and how did you overcome them?
  • Understanding Grid area was a bit confusing at first, after searching online I managed to implement it appropriately.
What specific areas of your project would you like help with?

For those who review my code;

  • Is my HTML semantic good?
  • Are the BEM classes properly used and defined, if not, any modifications i should make next time to make writing my SCSS more streamlined. I felt like i repeated my self in a sense a few times.

-Thank you in advance for checking my solution out. 💯

Community feedback

  • Francisco•210
    @antoniomontoiaPosted about 1 month ago

    Semantic HTML

    The solution effectively uses semantic HTML elements such as <article>, <blockquote>, and <h1>, which enhance the document's structure and improve SEO. The use of <main> and <footer> also contributes to a clear layout.

    Consider using <h2> or <h3> for user names instead of <h1>, as there are multiple testimonials on the page. This adjustment would maintain a proper heading hierarchy.

    Design Consistency

    The overall design aligns well with typical testimonial layouts, but the design is just a bit off; consider reviewing line-height and font-size to ensure they match the intended design. Limiting the overall width for the cards could enhance the visual appeal and readability. Ensure that the design matches any provided mockups or specifications from the challenge. Pay attention to spacing, font sizes, and color usage to ensure consistency.

    Additional Note on BEM Methodology

    I'm also struggling with the BEM methodology, so I cannot help you in that regard. However, I recommend reviewing the naming conventions to ensure they follow the BEM principles, which can improve the maintainability and clarity of your CSS.

    --

    Overall, this solution demonstrates a solid understanding of CSS Grid principles. The use of semantic elements, responsive design, and a clear structure are commendable. Keep up the great work!

    Marked as helpful
    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