nft-card-component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Mamadou Maikoke Troare,

  Congratulation on completing your first challenge here in frontend mentor. Excellent work! I have few suggestions regarding your solution, if you don't mind:

  HTML

  You should use the<footer> landmark to wrap the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.`

  1. 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>. For the same reason , you can use <a> to wrap Equilibrium #3429 and Jules Wyvern.

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

  3. 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 **has to be added**, icon-ethereum, icon-clock ).

  4.Images must have alternate text . look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content

  5. For class="purchase-info" , you can use an unordered list <ul>, in each <li> there should be <img> and <p> that way you can align them centerally.

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

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

  8. The avatar's alt needed. You can use the creator's name Jules Wyvern. Read more how to write an alt text

  CSS:

  1. Consider using rem for font size. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  2. The hover effect on the NFT image is missing. 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.

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

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

  Marked as helpful

  0

  ---

  

  Maikoke•450

  @MaikoCodePosted over 2 years ago

  @PhoenixDev22 I will take your suggestions on board and work through it again.

  1