NFT Preview card Using HTML 5, CSS FlexBox and CSS Grid

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Varun Pandey,

  Well done! I have some suggestions regarding your solution:

  • 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. the alternate test should not be hyphenated .

  • For any decorative svgs, each svg tag should have aria-hidden="true" and focusable=”false” attributes to make all web assistive technologies such as screen reader ignore those svgs.

  • Profile images like that avatar are valuable content. The alternate text should not be avatar, it's meaningless.You can use the creator's name Jules Wyvern. Read more how to write an alt text .

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

  • In class="nft-price-container", it's not recommended to use <div> and <span>alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. By adding semantic tags to your document, you provide additional information about the document, which aids in communication. Instead , you can use an unordered list <ul>, in each <li> there should be <svg> and <p>.

  Overall, your solution looks great. Hopefully this feedback helps

  Marked as helpful

  1

  ---

  

  Varun Pandey•80

  @varunUk09Posted about 2 years ago

  @PhoenixDev22 Thanku Thanku so much my motivation level up

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @varunUk09 Glad to hear that it was helpful. Happy coding!

  Marked as helpful

  1