NFT-Preview Card Component Page with only HTML & CSS
Design comparison
Community feedback
- @MiculinoPosted almost 3 years ago
Good job on completing the challenge, Ali! The solution turned out nicely ;)
It's nice you tried to get it as close as possible to pixel perfect, but make sure not to stress yourself out too much over this. As long as your solution respects the design guidelines and the solution is functional and responsive, you're good to go.
I had a look through your code and I have a few suggestions / observations that I hope can be useful. In no particular order, here they are:
-
To remove that accessibility issue from your report, use the <footer> element for the .attribution div. Usually, a footer is right at the end of a page, below the <main> element. In this context, you're building a card component, so it wouldn't make sense to have the <footer> inside the card.
-
I noticed you've used the relative rem units for font size, but you've used pixels for the rest. Percentages and other relatives units such as rem and / or em are recommended for building modern, functional, and responsive interfaces. This will also allow more options for accessibility and for users in general.
-
You don't need to use the "height:auto" property on an img element because the height is automatically calculated by the browser based on the element's width.
-
As I've suggested to many others who've completed this challenge, you can use the ::after and ::before pseudo-elements to create the overlay effect. At the end of the day, it's up to you what approach you use, but I'd say it's worth a short.
-
If you set the root font-size to 62.5%, that'll make it easier to use rem units since 1rem will be equal to 10px because 62.5% of 16 is 10px.
-
You did a nice job of structuring your HTML code and using meaningful class names. I think you'd be ready to start using the BEM methodology, which I recommend you start looking into.
Overall, you're definitely on the right path and with each challenge you complete, you'll learn new tricks and best practices to write even more awesome code!
0@alisariyerPosted almost 3 years ago@Remus432 Thank you Remus sincerly for this feedback ,I got them. Happy to see these useful points. ππ»π
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