NFT preview card component using flexbox and grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Jorge Sánchez! 👋

  A few changes you can do to make your solution better.

  • Replace the <article class="card"> with <main>. All the page content should live inside landmark elements. <article> is not a landmark element.
  • Use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
  • For your information, anchor tags are for navigation. The <button> element is for an action like opening a modal, submitting a form, toggling an element, etc. It is essential to use the correct elements.
  • Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.
  • Remove the word "image" from the alternative text. The semantic meaning of the <img> element tells assistive technologies to pronounce it as an image.
  • Make the <img> as a block element and set max-width: 100%. It makes working with <img> easier.

  I recommend creating the overlay of the Equilibrium using pseudo-element. You can see the solution from @IlnaraAckermann as your reference: Frontend Mentor | Css3, HTML5, flexbox, pseudo-class and pseudo-elements coding challenge solution

  I hope you find this useful. Have fun coding! 😄

  0