HTML and CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello Francisco Montoya,

  Congratulation on completing another frontend mentor challenge. I have some suggestions regarding your solution if you don't mind:

  • You can use <main> for the NFT card and <footer> landmark the attribution. HTML5 landmark elements are used to improve navigation.There is no need for a <header> in this challenge.

  • The most important part in this challenge is the interactive element. 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 use <a>.

  • You should have used <a>to wrap Equilibrium #3429 and Jules Wyvern too.

  • Page should at least have one level heading. You can use <h1> instead of <h2>.

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

  • 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-ethereum, icon-clock).

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

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

  Hopefully this feedback helps.

  Marked as helpful

  0