NFT Preview Card using HTML, SCSS, and A sprinkle of JS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @Cooly-o-Cats,

  I have some suggestions regarding your solution:

  • Anything with a hover style in a design means it's interactive. you need to add an interactive element around the image.

  • For any decorative images, each img tag should have empty alt="" andaria-hidden="true"attributes to make all web assistive technologies such as screen reader ignore those images.(alt="Ethereum Crypto Currency", alt="Clock Icon", alt="View Icon" ).

  • the icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt

  • Never start with “Image of …” or “Picture of …” It’s going to be obvious to either a person or a machine when something they're accessing is alt text. it should be Jules Wyvern .Tips for writing 'good' alt text

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

  • You can use an unordered list<ul> for class="small-info" and in each <li>, there would be <img > and<p>. great use of the<abbr>

  • No need for <div class="divider"></div> , you can use border-top to the class="author" (there is <hr/> in html )- You can add bordr-radius to the .overlay .

  • A general point - try to put classes directly on anything you want to style. Then you won't need as many nested css selectors.

  Overall your solution is good , Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Liam R•425

  @Cooly-o-CatsPosted over 2 years ago

  @PhoenixDev22 Thanks so much! I'll be using this feedback in future projects. And might even update this one. :D

  1