Design comparison
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
- @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 helpful0@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 - @Aik-202Posted about 2 years ago
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 helpful0@DavidQA71Posted about 2 years ago@Aik-202 Thanks for your advices, i'm still learning so this is very helpful!
0 - Turn the
Please log in to post a comment
Log in with GitHubJoin 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