Skip to content
Submitted about 2 years ago

Testimonials grid section solution with HTML & CSS

Sinka László•470
@dlxzeus777
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

Hey everyone 👋

This was my first time using display grid and it was fun!

Any feedback on how can I improve in the future is much appreciated!

Community feedback

  • Kristina Radosavljevic•380
    @KristinaRadosavljevicPosted about 2 years ago

    Hi there! Congrats on completing the challenge, it looks really good :)

    There's just one thing I noticed that you might want to fix - I would suggest using min-height instead of height on the <body>. Otherwise you can't really scroll on 'short' screens (where the width is big but the height not so much) and the content is cut off.

    Hope this helps and once again good job :)

    Marked as helpful
    1
    Sinka László•470
    @dlxzeus777Posted about 2 years ago

    @KristinaRadosavljevic Hi, thank you for your advice! I'll make sure I use min-height in my future challenges! :)

    I really liked your solution to this challenge as well!

    1
    Kristina Radosavljevic•380
    @KristinaRadosavljevicPosted about 2 years ago

    @dlxzeus777 Thank you and I'm glad I could help :)

    Marked as helpful
    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @dlxzeus777, congratulations on your new solution!

    Great code and great solution! I did this challenge too and know how hard it is to set up this grid layout. I think you've done a really good job building everything! Here are some tips for you:

    Improve your html markup using meaningful tags and replace the important blocks of content with better tags, for example the main div that takes all the content can be wrapped with <main> or section, the cards you can be replaced the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Don’t use div for the important blocks, ever prefer some tag that shows what its containing the block.

    Here's a complete guide for HTML semantic TAGS: https://www.w3schools.com/TAgs/default.asp

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
    Sinka László•470
    @dlxzeus777Posted about 2 years ago

    @correlucas Thank you, I'll keep that in mind!

    0

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