nft preview card component

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi, a couple of things that may interest you:

  • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

  • You shouldn't wrap each element with the <section> tag, use elements like <img>, <h1> or <p> directly.

  I hope it’s useful : )

  Regards,

  Marked as helpful

  1

  ---

  

  YoungZV•260

  @YoungZVPosted over 1 year ago

  Hi @fernandolapaz

  Yes, it is very very helpful thank.

  • For some reasons I totally forgot the interactive elements such as <a> or <button>. Just concentrated on the look.

  • It would have been better to use simple divs when i want to wrap things like this in this kind of projects?

  • What would be the semantic tags for projects like this?

  Will update my solution.

  Thank you.

  1

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @YoungZV

  I'll tell you what I think about the semantics for a simple project like this (just a component):

  • <main> to wrap the card, as you did. 👍
  • then directly elements like <img>, <h1> or <p>.
  • and we could use some <div> (not semantic) if we need to wrap several elements for layout purposes for example.

  My solution in case you want to take a look 🔎

  Marked as helpful

  1

  

  YoungZV•260

  @YoungZVPosted over 1 year ago

  Thank you @fernandolapaz I have updated my html and css files.

  1