NFT preview card component using flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The "NFT image" alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.

  • The “icons” in this component are purely decorative. ⚠️ Their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • In this component, the "Equilibrium #3429" is a heading ⚠️. So it should be wrapped inside a heading element.

  • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it.

  Here are some examples that you can freely use:

  Josh Comeau Reset

  Eric Meyer Reset

  • You should never set a width to the body and you will want to change the height: 100vh; to min-height: 100vh; for improved responsiveness.

  • For improved accessibility 📈 for your content, it is best practice to use rem for your font-size and other property values. While em is best for media-queries. Using these units gives users the ability to scale elements up and down, relative to a set value.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  0
• 

  Pankaj Kumar•120

  @pankaj512Posted almost 2 years ago

  Thanks for taking your time for this detailed review.

  I'm just learning web development, so your feedback is 100% valued to me. Most of the time I get confused about which CSS units to use for what. If possible could you please provide some resources to learning about when to use what CSS units.

  You said I should not set width to body, so where I should use provided width for desktop & mobile? On a container?

  0