NFT Preview Card - HTML/CSS/

Community feedback

• 

  notabhishekrai•180

  @notabhishekraiPosted over 2 years ago

  Great Job! But you should wrap all the code inside a <main> </main> (replacing div class = "container" with main class="container" should do) and use atleast 1 H1 tag. These two should solve your accessibility issues.

  for the hover effect, you can just use position relative to the parent and position absolute to child with top and left 0.

  max-width does help in responsive design. If you use max-width of 200px for an image, it will resize when you decrease the screen size but it wont resize(stays the same) when you increase the screen size (to whatever size). Unlike the normal width property.

  Marked as helpful

  2
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Good job completing this challenge.

  Keep up the good work

  Your solution looks great however I think that the user avatar does not need a border around it

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

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  1
• 

  Dizzy_Sloth•50

  @TotallySlyPosted over 2 years ago

  Thank you for the feedback, both of you. I keep forgetting about semantic HTML.... that is a massive error on my part. Something I need to change.

  And I am glad my thinking was correct behind the max-width property! I look forward to taking it onto the next challenge

  1