NFT Card with Sass

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @AlexandroMunera ,

  I have some suggestions regarding your solution:

  • Anything with a hover style in a design means it's interactive. you need to add an interactive element<a> around the image Equilibrium #3429, Jules Wyvern.- Add the hover effects on them

  • Page should contain a level-one heading .In this challenge , you can wrap Equilibrium #3429 with a <h1> , it would be like : <h1 class="card__title"> <a href="#"> Equilibrium #3429 </a></h1>

  • the link should be wrapping the original image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • The alt text of the avatar shouldn't be empty, it should be Jules Wyvern .

  • Tips for writing 'good' alt text.

  • You can use an unordered list<ul> to wrap class="card__details"and in each <li>, there would be <svg > and<p> (to wrap the text).

  • never use <span>'s or <div>'s for meaningful content ,

      <ul class="card__details">
              <li class="card__value">0.041 ETH</li>
              <li class="card__date">3 days left</li>
       </ul>
  

  Also, <p class="">Creation of <a href="#">Jules Wyvern<a></p>.

  • an explicit width is not a good way . Remove the width from the card component and change it to max width instead. That will let it shrink a little when it needs to.

  • Let the content inside the card element dictate the height of it

  Overall your solution is good , Hopefully this feedback helps.

  1

  ---

  

  Freud•210

  @AlexandroMuneraPosted over 2 years ago

  @PhoenixDev22 wow thank you so much for your time and give me this feedback.

  1
• 

  Neha Nalini Kennedy•100

  @nehanalinikPosted almost 3 years ago

  Did you just forget about the hover part?

  Also it'll be good if you add alt attribute to your images and add description to them too !important. 🐬

  1

  ---

  

  Freud•210

  @AlexandroMuneraPosted almost 3 years ago

  @nehanalinik You're right. Thank you for the feedback. I'll correct it.

  1