nft-preview-card-component-main

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Nishchay vastrakar,

  Excellent work!Congratulation on completing this challenge.I have some suggestions regarding your solution if you don't mind:

  • You can use <main> landmark to wrap the NFT card. HTML5 landmark elements are used to improve navigation,

  • I wouldn't wrap <a> around <h1> , because having the <h1> tag on the outside would make it easier to scan for in source code.

  <h1> <a href=""> .......</a></h1>
  
  

  • The link wrapping the equilibrium image (image-equilibrium ) should either have Sr-only text, an aria-label or alt text on the image that indicates where the link navigate the user.

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

  • You can use unordered list<ul> to wrapclass="plan-flex". In each <li> should be <img> and <p>`, then you may use flex properties to align them centrally.(It’s not recommended to use <span> ``alone to wrap meaningful content)

  • The avatar's alt should not be empty . You can use the creator's name Jules Wyvern. Read more how to write an alt text

  • To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.

  • There are so many ways to add the hover effect on the image , The one I would use, using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover. The icon view doesn’t really need to be in the HTML as there no need for another clutter in HTML. You can use CSS for it.

  • I see a little gap under the image as not set to display:block;

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  Last, there are are some extra <div>, they should be removed.

  Aside these your solution is good. Hopefully this feedback helps

  0