NFT Preview Card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  Hello, Sandlerz! 👋

  Congratulations on finishing this challenge! 🎉

  I have some feedback on this solution:

  • Accessibility
    • The equilibrium image should be wrapped with an interactive element, which in this case, a element because it has a :active states.
    • All page content should live inside the landmark including the equilibrium image.
    • 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
    • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead.
    • Also, I would not recommend specifying the height of any element in this case. In the real world, the page content might change over time, whether you adding or removing content. If you specify the height of the element, then you should always adjust the height every time the page content is changing.
    • I would recommend letting the content inside the card dictate the height of it.
  • Best Practices (Recommended)
    • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

  That's it! Hopefully, this is helpful! 😁

  Marked as helpful

  1

  ---

  

  Sebastian•300

  @sandlerzPosted almost 3 years ago

  @vanzasetia thanks very much vanza for that huge feedback. I'm putting in practices all of those things.

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Good Job sandlerz

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

  Keep up the good work!

  Marked as helpful

  1

  ---

  

  Sebastian•300

  @sandlerzPosted almost 3 years ago

  @Crazimonk Thanks for comment Naveen, I'm going to do that on the current project and look up for more information about Accessibility.

  1