Product Landing Page using CSS Grid

Solution retrospective
I am new to CSS Grid, can you give any advice or tips for best practices? Thanks!!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hi, arey! 👋
Nice work on this challenge! 🙌 Your solution looks pretty good and is responsive! 👏
A couple of things I'd like to suggest are,
- Maybe not using CSS grid to lay out the entire page. It isn't really necessary since block-level elements stack on top of each other by default. You should be good by just having the header, main element, and footer next to each other in your markup because they will display one after the other on the page.
- Setting
background-size
tocover
and addingbackground-repeat: no-repeat
to the background image to make it look more like the original design (especially in the mobile view). - Turning the social media links at the bottom of the page into actual links by wrapping each of them in a link tag. You should also include some screen reader-only text inside the links or add an
aria-label
to each of them to show what the links are for. - Perhaps using a link tag for the "Register" CTA since those commonly take users to a register or sign-up page. 😉
Hope you find these tips helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful - Account deleted
Hi Arey,
Very nice design.
Try focusing more on your margins, padding and image placing. On the button, you needed to add some box-shadow property.
Also, I always use an HTML/CSS validator to check the code before submitting my code because then I know that my code is 100% before submitting.
Hope that helps you out.
Happy coding :)
Marked as helpful
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