Four card feature section with Flexbox and CSS GRID
Design comparison
Solution retrospective
I'm proud of finally using CSS GRID on a project for the first time and of making a good use of the pseudo-class :nth-child.
Community feedback
- @TedJenklerPosted 3 months ago
Hi @VitorEmanoelNogueira,
Nice project and good job with the grid layout! I noticed a couple of areas for improvement:
Section Structure: You’re using two <section> elements. Consider adding a <header> to one of them or removing unnecessary containers. Styling the <body> with Flexbox can help streamline your layout.
Reducing Containers: Always try to minimize the number of containers. Use Flexbox to stack elements on top of each other for cleaner code. For example, the parent of the cards could be a <main> element, and the cards themselves could be within <section> or <article> tags. This approach not only makes your code cleaner but also improves accessibility.
Keep up the great work!
Best, Teodor
Marked as helpful1 - @Jan-Dev0Posted 3 months ago
That looks great! The only thing I would mention is that it's not necessary to use the tag name along with the class name, like div.card. .card alone is sufficient.
Marked as helpful1@VitorEmanoelNogueiraPosted 3 months ago@Jan-Dev0 Thank you for the tip!
0
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