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 Card with Sass

Freud 210

@AlexandroMunera

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

PhoenixDev22 16,950

@PhoenixDev22

Posted

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

@AlexandroMunera

Posted

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

1

@nehanalinik

Posted

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

@AlexandroMunera

Posted

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

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