Design comparison
Solution retrospective
Are there any best practices, in semantics or styling, that you would suggest as an improvement to my code?
Community feedback
- @cgrkzlknPosted over 2 years ago
Great job! You can add box shadow to the card element. I think that will be a nice improvement :)
You can use this tool to generate box-shadow: CSSmatic Box Shadow Generator
For example :
.card{ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1); }Marked as helpful0 - @AgataLiberskaPosted over 2 years ago
Hi Chris! Nice work, your solution looks just like the design, and it's good to see some semantic elements :) One advice I would give is that it's a good idea to get in the habit of including
widthandheighton your img elements to avoid any shifts in layout - that's something that google would pick up on in audits and score you down for. I would also link to google fonts in your <head> element in your stylesheet rather than importing it from css - that way it loads at the same time as the stylesheet - right now it will only download after the browser is done downloading and parsing your stylesheet. Doesn't make much difference when files are tiny but when your code base grows, it can have an effect on loading :)Marked as helpful0
Please log in to post a comment
Log in with GitHub
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