NFT Card using HTML and CSS only

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  Hi there! 👋

  Congratulations on finishing this challenge! 👏

  I have some feedback on this solution:

  • Accessibility
    • Well done on using landmarks correctly! 👍
    • Use interactive elements (a) for any elements that have :hover or :active states.
    • Always wrap text content with a meaningful element (p).
    • For decorative SVGs, add aria-hidden="true" attribute to the svg.

  <svg aria-hidden="true">
  </svg>
  

  • Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image. 🙂
  • The alternative text for images should not be hyphenated.
  • Use the creator's name as the alternative text for the avatar.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Styling
    • I would recommend using flexbox to align the icon and never use inline styling. It has a high specificity and can cause a serious issue on bigger projects.
    • I would recommend making the body element as a flexbox container to position the card in the middle of the page, both vertically and horizontally. Then remove all the margin properties from the container element.

  /**
   * 1. Make the card vertically center and
   *    allow the body element to grow if needed
   */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 1 */
  }
  

  • Best Practice (Recommended)
    • Remove the xmlns attribute from the inline SVG. It doesn't need it by the browser.

  That's it! I hope this helps! 😁

  23

  Marked as helpful
• Account deletedPosted over 3 years ago

  Hi there 👋

  Congratulate on finishing your project 🎉. You did a great job 💡

  I give some suggestions to help you take your project design to the next level 📈😉

  • Add box-shadow to the card
  • Change the h1 font-size to 24px
  • Add cursor: pointer to the h1 and .creator-name elements

  Happy coding ☕

  Maqsud

  23

  Marked as helpful
• 

  optimusprime202•1,160

  @optimusprime202

  Posted over 3 years ago

  Hey @ckullo, You’re on the right track now.

  00