3 column card with active state using css grid and Sass

Solution retrospective
I am listening to any comments in order to improve myself
Please log in to post a comment
Log in with GitHubCommunity feedback
- @romila2003
Hi Alcandris,
Congratulations 🎉 for completing this challenge, the CSS Grid component looks great and is responsive. There are some issues/suggestions I want to address:
- It is best practice to wrap the main content within the
main
tag which would ensure that your content is wrapped within the correct landmarks e.g.<main class="container"></main>
- You should also wrap the footer within the
footer
tag e.g.<footer class="attribution"></footer>
- The buttons have a hover effect that is shown in the design provided with the starter-pack. Also, the buttons are missing the
type
attribute.
Overall, great work and wish you the best for your future projects so keep coding 👍.
Marked as helpful - It is best practice to wrap the main content within the
- @correlucas
👾Hi Alcandris, congrats on completing this challenge!
Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:
Add the correct color for this background, the value is
background-color: #F2F2F2
Improve the card overall look adding the more rounded borders to the first and the third card using a value around
border-radius: 14px
.Improve your html markup using meaningful tags to wrap the content, you can replace the div you’ve used for each card with <article>. Remember to wrap big blocks of content with semantic tags and never divs, use divs for small blocks.
✌️ I hope this helps you and happy coding!
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