Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @36atharva, Congratulations on completing this challenge!
Great code and great solution! Iβve few suggestions for you that you can consider adding to your code:
Use
<main>
instead of a simple<div>
this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a<main>
block and that<div>
doesn't have any semantic meaning.You made your html structure entirely with
div blocks
but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each card you use<article>
instead of the<div>
.βοΈ I hope this helps you and happy coding!
Marked as helpful1@36atharvaPosted about 2 years ago@correlucas thankyou for your suggestions!, I will apply the following changes
0 - @VCaramesPosted about 2 years ago
Hey, some suggestions to improve you code:
I noticed that you did one grid to to create three columns and did another grid to get the center two into position. An easier way to achieve this is by doing the following using Grid-Template-Areas:
.card-container { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: "supervisor team calculator" "supervisor karma calculator"; } .karma-card { grid-area: karma; } .calculator-card { grid-area: calculator; align-self: center; } .team-card { grid-area: team; } .supervisor-card { grid-area: supervisor; align-self: center; }
Happy Coding! π»π
Marked as helpful1
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