NFT preview card component challenge hub

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @nohawaheed ,

  I have some suggestions regarding your solution:

  • Using landmark elements , you can improve the navigation experience on your site for users of assistive technology . So wrap the content of the body in<main>.and a <footer >(which will be the attribution)

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

  • 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 like in alt="view-icon", alt="ethereum icon" and alt="clock icon" AND avatar's one(not "avatar " you can use the the avatar name Jules Wyvern) and image-equilibrium.jpg should be descriptive .Read about how and when to write image alt text and what it's for.

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

  • The eye image 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 .

  • You can simply use unordered list <ul> to wrap div class="d-flex justify-content-between break-line pb-3">and in each list item <li>would have <img > and <p> .

  • The card gets large on screens larger at 1440px , I would suggest to remove the media query , you can add max-width instead of width that would let it grow to a point. Then a little margin on the component or padding on the body to stop it hitting screen edges.

  • Use flexbox properties to center the card in the middle of the page to the element that holds the card .

  {
  display: flex;
  align-items: center;
  justify-conentent : center ;
   flex-direction: column;
  min-height :100vh;
  }
  
  

  no need for those extra 2 divs and section as it takes only the main landmark to wrap the card .

  Hopefully this feedback helps.

  Marked as helpful

  0