Submitted over 2 years ago
3 Column preview card using HTML and CSS: Grid and FlexBox properties.
@HarshJohn
Design comparison
SolutionDesign
Solution retrospective
Check out my code and suggest to me how can I improve from here. What mistakes did I commit on my way? And other suggestions, please.
Community feedback
- @denieldenPosted over 2 years ago
Hi Harsh, great work on this challenge! 😉
Here are a few tips for improve your code:
- add
main
tag and wrap the card for improve the Accessibility - remove all
margin
frommain-body
class and body because with flex they are superfluous - after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - add
transition
on the element with hover effect - Tip of graphic design: with
font-family:" Big Shoulders Display ", cursive
the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with afont-family:" Big Shoulders Display ", sans-serif
much more similar to the primary font.
Overall you did well 😁 Hope this help!
0 - add
- @d3vaqaPosted over 2 years ago
well done, just checkout the accessibility issues as they are pretty important
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