NFT Preview Card using html and css

Solution retrospective
I would appreciate some feedback on how to improve the cleanness of the code, for both HTML and CSS.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hello there! 👋
Good effort on this challenge! 👍
I have some feedback on this solution.
- In this case, use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
- I suggest creating the image overlay with pure CSS. You can use pseudo-element and background properties to create it. By doing this, you can remove these lines of HTML which clean up the HTML.
<div> <img src="./assets/icon-view.svg" alt=""> </div>
- Lastly, you can fix all the accessibility issues that have been generated.
That's it! Happy coding! 😁
Marked as helpful - @Ambrolla
Hello!
The only big issue in css file I found is this: In .card you have: margin: auto; margin-top: 40px; Maybe pick one? :)
However, in order to keep everything more organized, I write comments (if it's more than 1 thing, for example for @media), I write that it's going to be media or Card images, etc. There are no comments in your code in CSS and I really recommend it because if you'll go back in 3-6 months and start looking at it, you might find yourself lost (especially if it's a bigger piece of code).
You did a good job, considering that it's your second repository! Keep going! And I'm serious!
Marked as helpful
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