NFT Preview using CSS Grid

Community feedback

• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge.

  Keep up the good work

  Your solution looks great however I think that your divider line needs to have less opacity

  In terms of your accessibility issues simply wrap all your content between main tags

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  0

  ---

  

  Edvinas•230

  @ebukanasPosted over 2 years ago

  @TheCoderGuru Thanks Shashree!

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Edvinas,

  Congratulation on completing this frontend mentor challenge.

  I have some suggestions regarding your solution:

  • It's invalid html to wrap a heading element in an anchor tag. Swap those around so the anchor is inside the heading. <h1> <a class="" href="#">Equilibrium #3429 </a></h1>

  • Images must have alternate text.

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

  • You can remove the exrtra div and To center the card on the page, you may use flex or grid properties to the body and min-height: 100vh . Then you can add a little padding to the body(remove the margin)

  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.

  You can use <figure> and <figcaption > for the avatar's part.

  CSS

  • width: 18rem;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card .That will let it shrink a little when it needs to.

  • In line-height: 1.5em;use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

  Overall , your solution is good. Hopefully this feedback helps.

  0