NFT preview card component challenge hub

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @dovanaite ,

  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 Equilibrium #3429, Jules Wyvern. like :

      <h1><a href="#">Equilibrium #3429</a></h1>
      <p class="creationText"> Creation of <a href="#">Jules Wyvern</a></p>
  

  • 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-clock.svg, /icon-ethereum.svg", icon-view.svg)

  • the icon-view doesn't really need to be in the html and doesn't need to be wrapped in an interactive element <a> , 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

  • The alt text of the shouldn't be alt="nft creator avatar", it’s meaningless . You may use the author name Jules Wyvern .Tips for writing 'good' alt text.

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

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

  • No need for <hr/> , you can use border-top to the class="creation" .

  • It's better to use min-height: 100vh; for the body , using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport.

  • Never use px for font-size.

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

  I would suggest to check @vanzasetia solution and read the read me file to have an idea how to set the hover effect on the image

  Overall your solution is good , Hopefully this feedback helps.

  Marked as helpful

  3
• 

  Mahmoud Ashraf•310

  @m-Ash1Posted almost 3 years ago

  I can't really catch any difference between the two designs so GOOD JOB! I just have one comment on the photo overlay. you can add a transition: 0.3s; to make the hovering event smoother. but at all good job and keep up :)

  Marked as helpful

  1