NFT preview card | HTML & CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @myrdn ,

  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(image-equilibrium.jpg) .

  • the icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden:true ` or role presentation with empty alt.

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view,icon-ethereum, icon-clock )

  • it's invalid html to wrap a heading element in an anchor tag. Swap those around so the anchor is inside the heading <h1><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 avatar' alt text should be empty . it should be only Jules Wyvern .

  • Tips for writing 'good' alt text.

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

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

  • you can use border-top: to the class="card__attribution" , no need to use <hr class="card__line" />.`

  • never use <span>' s for meaningful content , <p class="card__author">Creation of <a href="#">Jules Wyvern</a></p>.

  • width: 335px;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.

  Overall, your solution is good, Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  myrdin•80

  @myrdnPosted almost 3 years ago

  @PhoenixDev22 Thanks a lot for your feedback, it's really helpful !

  I have improved my solution regarding your review. I think the hover style on the image can mean it's a link but also opening a modal or something ?

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @myrdn ,

  You’re welcome. The hover effect means an interactive element (buttons , inputs, anchors…). In this this challenge is an anchor <a>. the link <a href=" images/equilibrium.jpg" > around the image would open the image .

  Hopefully it’s clear.

  0