NFT Card Component

Community feedback

• 

  Praveen Perumal•740

  @solvedbiscuit71Posted over 2 years ago

  Hi Athira, Good work on your first angular project in frontendmentor!

  I have some tips to improve your code,

  • wrap everything inside the body with a <main> tag to avoid accessibility issue.
  • use <div> tag instead of <span> for element with class "detail","eth","time"
  • use display: flex with align-items: center in "eth","time" and footer to vertically center the image and text.
  • add the hover state for <span class="name"> element.
  • add min-height: 100vh; in <main> tag to vertically center the card.

  Addressing the use <div> instead of <span>, we generally use <span> as a "leaf node" means that it doesn't have other childNode except the textNode. it's a best practice

  Hopefully you find these suggestion helpful 😊

  2

  ---

  

  Athira•130

  @athirasarmanPosted over 2 years ago

  @solvedbiscuit71 Hi, Thanks for the response. There is no accessibility issue as everything is wrapped inside <main> tag. Whatever HTML issues I am getting issues because of ng-content which is getting added by angular. How to get rid of that?

  0

  

  Praveen Perumal•740

  @solvedbiscuit71Posted over 2 years ago

  @athirasarman you are right i didn't notice it in the first glance but, getting the accessibility issue for not wrapping everything in main tag is a common thing that people do.

  Anyways, about the HTML issue idk because i haven't tried Angular myself try reaching out the slack community for further help.

  Marked as helpful

  0

  

  Athira•130

  @athirasarmanPosted over 2 years ago

  @solvedbiscuit71 Sure. Thanks

  0