Submitted about 1 year ago
3-Column Preview Card with Css Grid ,Flexbox and Padding
@Nayabi26
Design comparison
SolutionDesign
Solution retrospective
This project give me some insights about centering , land marking the elements. I got confuse with how to arrange elements inside each card with space equally . Padding quite difficult .
Community feedback
- @grace-snowPosted about 1 year ago
HTML isn't too bad on this, only a few pointers
- you don't need role main on a main. It's already got that role
- you shouldn't have multiple h1s on a page. This is a component that would sit on a page that has a h1 like "Cars" so make all the headings into h2s
- what you have as buttons in here should be anchor links. This is because clicking them would navigate the user somewhere. Whenever an interactive elements purpose is navigation it must be a link
- the way you've linked the fonts in the head is not quite right. Go back to Google fonts and select all the fonts you need (their specific weights) and generate one link for all of them. You only need the two links before once as well (the prereconnect ones) - one of each, exactly as provided by Google fonts, you don't need to duplicate them even if you did have separate font family links underneath them. This is all about improving performance
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