Grid Section

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!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾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 - @Aik-202
Hi David, Nice work, you did justice to this. I have some suggestions though:
- Turn the
div
withclass container
tomain
tag as every html page must have amain
tag as it tells screen readers where the page starts from. - Then in each of your
section
... Turn the firstp
tags withclass 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 - Turn the
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