NFT preview card using Flexbox

Community feedback

• 

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  It is true that any decorative images should have empty alt="" texts and you should also add aria-hidden="true" attribute to make screen readers ignore the image.

  • The image is probably decorative if it does not add further meaning to the content

  I learned this just a few minutes ago from @vanzasetia lol

  I hope this was helpful 😁

  Marked as helpful

  3
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Marit,

  Excellent work! I have few suggestions if you don’t mind:

  • The link wrapping the equilibrium image(image-equilibrium ) should either have Sr-only text, an aria-label or alt text on the image that indicates where the link navigate the user.

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

  • If you wish to draw a horizontal line, you should do so using appropriate CSS. You can remove the <hr>, you can use border-top: to the avatar's part

  • The avatar's alt should not be empty . You can use the creator's name Jules Wyvern. Read more how to write an alt text

  • For class="nft-buyer__content you can use an unordered list <ul>.In each <li>, there should be <img> and <p> that way you can align them centrally.

  • To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.

  • There is a little gap under in the image as it’s not set to display: block. Is that why you set the .overlay height to height: 99%; ?

  • There are so many ways to add the hover effect on the image , The one I would use, using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover.the icon view does not really need to be in the HTML as you can use css for that.

  • Consider using rem and em as they are flexible units rather that absolute units px, better using rem for font size.

  • If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • Really important to keep css specificity as low/flat as possible. The best way to style HTML elements is single class selectors. Classes can be reused

  Aside these, great work . Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @PhoenixDev22 so is it better to use classes than using for example nth-of-type() function?

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Illyaas4Show Hello Illyaas, What I meant is As a rule, if a selector will work without it being nested then do not nest it.You can read more here

  Hopefully this makes it clear.

  0

  

  Marit•400

  @MaritxxPosted over 2 years ago

  @PhoenixDev22 I've spent about 25 minutes trying to figure out why that gap under the image was there... and it's that simple of a solution. Auch. :') Yep! That's indeed why I set it to 99%.

  Thanks for the additional information, especially the info on accessibility helps a ton! I've tried to apply this in the next project I did and at least the site is not calling me out of accessibility or HTML issues anymore, so I guess that's a win.

  1

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @PhoenixDev22 oh ok thank you I understand now

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @Maritxx You’re welcome and glad it was helpful.

  1