NFT-preview card component with HTML/CSS

Community feedback

• 

  Shashree Samuel•9,260

  @shashreesamuelPosted almost 3 years ago

  Hey kanyshaiosmonova, good job on completing this challenge. Keep up the good work.

  Your design looks partially good however I think you should consider the following

  • The card should have a margin of margin: 0 auto. This will center the card in the center of the page. Then you can add some margin from the top using the margin-top property to get it in the exact center.

  • The card should have some padding around it to match the actual design shown. You can achieve this using the padding property.

  • The card description should have some margin from the top and the text should wrap within the height of the text. You can achieve this by doing a line break <br> before the text "balance".

  • The color of the offer should be the same color as the description text. I suggest referring to the style-guide.md file for reference.

  • The card footer ( the user avatar and the name of the creator ) should have some space from the bottom margin of the card. You can achieve this by using the margin-bottom property.

  In terms of your accessibility issues, simply wrap all your content between <main> tags and it should fix all your accessibility issues. I recommend familiarizing yourself on html semantic tags if you haven't used them before. They will greatly improve your code and prevent accessibility errors regarding your content.

  You can read more on html semantic tags here

  https://www.w3schools.com/html/html5_semantic_elements.asp

  Once you fix your accessibility issues then your validation errors should be resolved.

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  1
• 

  Kanyshai Osmonova•80

  @kanyshaiosmonovaPosted almost 3 years ago

  Thank you for your feedback. I will check it out

  0