Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @DianaVCruz, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
Its amazing that you’ve customized some interaction, you’ve to pay attention because when you add some
hover effects
you've to think that for the mobile version there's an issue that the elements with hover getstuck
on the active state of the hover until you click on something else. Something you can do to avoid this problem on mobile, the stick hover, is to add a media query saying that you want hover effects only on devices that are nottouch
. So you can use:@media (hover: hover) { {ADD HERE ALL THE CLASSES WITH HOVER EFFECTS TO DISABLE IT ON MOBILE} }
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @denieldenPosted about 2 years ago
Hello Diana, You have done a good work! 😁
2 little tips to improve your code:
- add
main
tag and wrap the card for improve the Accessibility - also you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility
Keep learning how to code with your amazing solutions to challenges.
Hope this help 😉 and Happy coding!
Marked as helpful0 - add
- @VCaramesPosted about 2 years ago
Hey @DianaVCruz, some suggestions to improve you code:
-
Delete the
width
and change theheight
tomin-height
in your Body Element. -
The Background Image Property is only to be used on decorative images. NOT images that add value and serve a purpose. For this challenge you want to use the Image Element.
-
Once you fix the image issue, You'll want to include an Alt Tag with it. You want it to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
The "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site
-
Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.
This is not enough:
*{ margin: 0; padding: 0; box-sizing: border-box; }
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
Happy Coding!
Marked as helpful0 -
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