NFT Preview Card Component Challenge

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  hello @Cashkid500 ,

  In this challenge the interactive element is <a>

  <h1 class=""><a href="#">Equilibrium #3429</a></h1>

  hopefully this feedback helps.

  00

  Marked as helpful
• 

  Naveen Gumaste•10,420

  @NaveenGumaste

  Posted over 3 years ago

  Hay ! Balogun Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Just use vercel or netlify and connect them using your github and boom its done Check this video it will tell you how to host

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  01

  Marked as helpful
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello @Cashkid500 ,

  I have some suggestions regarding your solution:

  To tackle the accessibility issues:

  • There should be two landmark components as children of the body element - a main (which will be the NFT card ) and a footer (which will be the attribution).<Footer> should be in the <main >read more about A simplified web page, might look something like this:

  • Anything with a hover style in a design means it's interactive. you need to add an interactive element around the Equilibrium #3429.

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

  • 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's alt text shouldn't be alt="avatar image You can use Jules Wyvern as an alt text.

  • You can read more about alt text

  • don't use span for meaningful content.

  • You can use an unordered list <ul> for <div class="nft-info">and in each <li>, there would be <img> and<p>(for the text ).

  • You can use border-top to the class="nft-footer" instead of <hr/>.

  • It would be better

   <p>Creation of<a class="nft-owner" href="#">Jules Wyvern</a></p> 
  
  

  • never usepxfor font-size.

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

  • Use max-width:350px instead of width for the card .That will let it shrink a little when it needs to

  • you can provide the link of the live solution.

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

  02

  Marked as helpful
• 

  IRVINE MESA•1,835

  @DrMESAZIM

  Posted over 3 years ago

  @Cashkid500 I will record a short video of me publishing my static site on GitHub .therefore please send me your email address or WhatsApp number to receive the video.

  05
• 

  IRVINE MESA•1,835

  @DrMESAZIM

  Posted over 3 years ago

  hi @Cashkid500. I would love firstly for you to change the file name from nft.html to index.html Secondly If you are unaware of how to publish static live site for free on GitHub, let me know and I can help you

  01