Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card using html and css

@vgallop

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would appreciate some feedback on how to improve the cleanness of the code, for both HTML and CSS.

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

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

0
Yuliya 230

@Ambrolla

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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