NFT Preview card build with SCSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @radanovicnikola93 ,

  I have some suggestions regarding your solution:

  • You have misused the article tag read more about the article usages in mdn .

  • The avatar's alt shouldn't be empty , you can use Jules Wyvern for it.

  • 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.

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-ethereum, icon-clock ).

  • Read more how to write an alt text

  • No need for <div class="card--line"> </div> , you can use border-top for class="card--author" .

  -width: 20rem;an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

  • height: 40rem; It's rarely ever a good practice to set heights on elements . Let the content inside the card element dictate the height of it.

  • General point: nesting css selectors not a good thing . Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors

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

  1
• 

  Nikola Radanović•200

  @radanovicnikola93Posted almost 3 years ago

  Thanks for the feedback ! :)

  0