NFT Preview Card Component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Luis,

  Congratulation on finishing this challenge. Great job on this one! I have few suggestions regarding your solution:

  HTML

  • The most important part in this challenge interactive elements. Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ..) for this imagine what would happen when you click on the image, there are two possible ways:

  1: If clicking the image would show a popup where the user can see the full NFT, here you use <button>.

  2:If clicking the image would navigate the user to another page to see the NFT, here you can use <a>.

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

  You should have used <a> to wrap Equilibrium #3429 .

  • Remember the alternate text should not be hyphenated.

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

  • The icon view does not really need to be in the HTML. You can use CSS for it.

  • If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the <hr>, you can use border-top: to the avatar's part.

  • Consider using rem for font size. Absolute units don’t scale—15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.

  Overall well done! Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Luis•270

  @luibernipPosted about 2 years ago

  WOW, @PhoenixDev22!!!

  Thank you for all the suggestions and explanations, I will definitely make all the changes to my code and send it once again. I believe this challenge was more about HTML semantics instead of CSS, which is kind of a different approach to frontend.

  Thank you once again for your help.

  Have a great day! :)

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @luibernip Glad to help. Happy coding!

  0