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 component looking as close to the design as possible.

@Viti-Martins

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


What could be refactored in this could to make it looks even better ? Accepting any kind of feedback.

Community feedback

Vanza Setia 27,835

@vanzasetia

Posted

Hi, Vitor! 👋

A couple of suggestions:

  • Fix invalid HTML: <h1> must not be a child element of <a>. You can use Caninclude to check whether an element can be inside another element.
  • No external links: You do not need to have target="_blank" to every link. Only use it if the users will lose something if the links do not open in a new tab. For example, the links that are required to open when the users fill in a form.
  • No extra element: You do need a <div> for the NFT card. You can use the <main> element instead. It is possible by making the <body> element as the flex container of the card instead of using the <main> element.
  • Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS and Why font-size must NEVER be in pixels
  • Unitless line-height: Always use unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN

I hope my suggestions help you. Have fun coding! 😄

Marked as helpful

1

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