nft-preview-card-component - html and css

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello Neeraj Verma,

  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.

  • In this challenge , as it’s not a whole page, you can have<h1>wrapping Equilibrium #3429 like this: <h1><a href="#">Equilibrium #3429</a></h1>

  • 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 did great wrapping Equilibrium #3429 and Jules Wyvernby <a>

  • 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. Remove the <hr>, you can use border-top: to the avatar's part.

  • You can use unordered list<ul> to wrap class="inner-detail-box". In each <li> should be <img> and <p>, then you may use flex properties to align them centrally.

  • The alternate of the avatar image 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. There is no need for a extra clutter in the HTML. The icon view doesn’t really need to be in the HTML.You can use CSS for it. You can have a look at my solution here, it might help.

  Overall, Your solution looks great . Hopefully this feedback helps.

  Marked as helpful

  0