NFT preview card component using CSS Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @Abhirup-Sarkar ,

  I have some suggestions regarding your solution:

  To tackle the accessibility issues:

  • You can use landmark main to wrap the body content (which will be the NFT card )HTML5 landmark elements are used to improve navigation .

  • Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around the image, Equilibrium #3429 and Jules Wyvern . add hover effect on them .

  • The avatar's alt shouldn't be image of creator it's meaningless , you can use Jules Wyvern for it.

  • Read more how to write an alt text

  • the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • No need for this <hr>, you can simply use border-top for the avatar's part class="container__creator

  • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs. It's recommended to use rem for font-size.

  Overall, your solution is good, Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Abhirup Sarkar•30

  @Abhirup-SarkarPosted over 2 years ago

  @PhoenixDev22 Thank you for your helpful advice :)

  1
• 

  Andrew Castro•85

  @Andrew-CastroPosted over 2 years ago

  Great job Abhirup, you're getting some HTML validation issues because of your class names. I would consider reviewing BEM methodology naming conventions: https://en.bem.info/methodology/css/#naming

  TLDR: The modifier should only have one hyphen, but two underscores.

  Marked as helpful

  0

  ---

  

  Abhirup Sarkar•30

  @Abhirup-SarkarPosted over 2 years ago

  @Andrew-Castro Thank you for your advice :)

  0