Skip to content
Submitted about 2 years ago

Grid Section

David Aguirre•40
@DavidQA71
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

Hello everyone! this is my third challenge. I had some difficulties to finish it but finally I did it. Surely the code can be improved so any advice is welcome. Happy code!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello David Aguirre, Congratulations on completing this challenge!

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

    body {
    min-height: 100vh;
    background-color: #EDF2F8;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

}
.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: repeat(3, 1fr); */
    gap: 20px;
    padding: 40px 20px;
    /* margin: auto; */
    justify-content: center;
    /* align-items: center; */
    flex-wrap: wrap;
    max-width: 75vw;
    /* max-height: 90vh; */
}

    You need to include the title for you PAGE. Do that inserting in the <head> the tag <title> → <title>Testimonials section- Front End Mentor</title>

    Your html is working but you can improve it using meaningful tags and replace the divs, for example the main div that takes all the content can be wrapped with <main> or section, about the cards you can replace 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. Note that <div> is only a block element without meaning, prefer to use it for small blocks of content.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    David Aguirre•40
    @DavidQA71Posted about 2 years ago

    @correlucas I'll keep it in mind. It happens that each course or video that I have seen uses many DIVs and that confuses me haha ​​but I appreciate your comment that will surely help me improve!

    0
  • Assurance Chioma Ikogwe•410
    @Aik-202Posted about 2 years ago

    Hi David, Nice work, you did justice to this. I have some suggestions though:

    1. Turn the div with class container to main tag as every html page must have a main tag as it tells screen readers where the page starts from.
    2. Then in each of your section... Turn the first p tags with class p1 to h2 -h6 headings. As sections must begin with h2-h6 headings. That should solve some of your accessibility problems. Nice work once again. Hope this helps, you can update your solution once you've made these changes.
    Marked as helpful
    0
    David Aguirre•40
    @DavidQA71Posted about 2 years ago

    @Aik-202 Thanks for your advices, i'm still learning so this is very helpful!

    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