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

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


A single page in HTML and CSS about nft

Community feedback

P. Ricardo 2,370

@pRicard0

Posted

Algumas dicas HTML.

  • Evita usar a tag <span>sempre que possível. Ela não é semântica.
  • Ao invés de utilizar a tag <header> para todo o cartão, você poderia utilizar a tag <main>
  • Não utilize atributo alt para imagens meramente ilustrativa como é o caso da maioria dos svg. Deixa o atributo alt vazio.
  • Ao invés de utilizar a tag <span> para conter o nome do cara, ali se encaixaria melhor a tag <a> por conta que provavelmente é uma âncora que direcionaria para outro lugar. É recomendado que também estilize usando pseudoclasses como :hover

Uma dica CSS.

  • É recomendado que a borda se aproxime mais do design original. Você pode fazer isso botando border-top: 1px; na hr. ( Você não pode botar border: 1px; por que vai somar 1px do top e 1px do bottom )

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