Single price grid component | Html & css | Flexbox & Grid

Solution retrospective
I am just a beginner and would appreciate any feedback.
Do I have good practices? What errors do I have? How could I improve my code?
Thanks <3
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hey, MasterKrab! 👋
Nice work on this challenge! 🙌
In addition to SzymonRojek helpful feedback, a few things I'd like to suggest are,
- Adding a border-radius to the card component, as in the original design (you might have to set
overflow
tohidden
for the card component to make sure that the border-radius shows, as thediv
s within the card component may be overflowing their container slightly). - Adding a hover state to the button.
Keep coding (and happy coding, too)! 😁
- Adding a border-radius to the card component, as in the original design (you might have to set
- @SzymonRojek
Hi MasterKrab,
Well done :D
A few tips below:
- I think inside of an article you don't need three sections because this is one component so instead of it just create three divs => divs are perfect for generic groupings of content;
- instead of a button I'd suggest to use a link, check this article => A Complete Guide to Links and Buttons;
- outline set to none it is not a good practice (accessibility);
- you have used an explicit width (container) => important: that's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink.
Ps. Don't forget to upvote any comments on here that you find helpful.
Greetings :D
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