NFT preview card component using CSS grid and flex

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi omar saleh,

  Congratulation on finishing this challenge. Excellent work! I have few suggestions regarding your solution, if you don't mind:

  HTML

  • When you wrap the anchor around the header <a><h1>...</h1></a>, the whole line get's clickable. h1 id block element and <a> is inline element. Personally, I wouldn't do it. Having the <h1> tag on the outside would make it easier to scan for in source code and only the text will be clickable.

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

  • For middle part of the card class=”stats” , you can use an unordered list <ul>, in each <li> there should be <img> and <p>. That way you can align them centrally.

  • 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 <div class="line"></div>, you can use border-top: to the avatar's part.

  Hopefully this feedback helps. Happy coding!

  Marked as helpful

  0

  ---

  

  omar saleh•150

  @omarsaleh11Posted about 2 years ago

  this feedback was tremendous, this was a lot of new stuff, I'm kinda new this is my second month at coding, thank you very much, @PhoenixDev22

  0