NFT Preview Card Solution by DevDoc7

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @DevDoc7 ,

  I have some suggestions regarding your solution:

  • Use the <main> landmark to wrap the body content using a main (which will be the NFT card ) .

    • 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 .

  • Images must have alt text.

  • 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 ).

  • The avatar 's alt shouldn't be "empty " , you can set Jules Wyvern to it. And for the equilibrium image should be descriptive.

  • This should be a heading Equilibrium #3429. for this challenge , you can use<h1>.

  • 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 or role presentation with empty alt.

  • I would leave the equilibrium main img in html and use pseudo-elements . You either have to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo on hover.

  • Alt text for the profile image shouldn't be empty . Read more how to write an alt text

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

  • You can use an unordered list<ul> to wrap class="section-price" and in each <li>, there would be <img > and<p> . Don't use span's for meaningful content .

  
  <ul class="">
      <li  class="etherium">
        <img src="./images/icon-ethereum.svg" alt="" aria-hidden ="true">
        <p class="text-eth">0.041 ETH</p>
      </li >
  
      <li class="deadline">  
        <img src="./images/icon-clock.svg" alt="" aria-hidden ="true">
        <p class="text-time">3 days left</p>
      </li>
  </ul>
  
  

  And for this part, <p class="">Creation of <a href="#" class="text-by">Jules Wyvern</a ></p>.

  • I recommend to use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

  • Never use px for font size.

  You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

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

  Marked as helpful

  0

  ---

  

  Sertac•30

  @DevDoc7Posted almost 3 years ago

  @PhoenixDev22 Your feedback is very helpful. Thank you for your time

  1