NFT preview card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @BartyCoding ,

  Congratulation on completing frontend mentor challenge.

  I have some suggestions regarding your solution:

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

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

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

  • 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 the hover as there is no reason to have the extra clutter in the html.

  • The avatar's alt should not be Avatar. It's meaningless , you can use the creator name Jules Wyvern. Read more how to write an alt text

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

  • To use more semantic tags , you can use <ul> to wrap class="card-info" and in each <li> there would be<img>and <p>.Never use div alone for meaningful content.

  • For the avatar's partclass="card-profile", you would use <figure> and <figcaption>. You might have a look at my solution , to see how I did the hover effect on the image , it might help.

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

  Marked as helpful

  1

  ---

  

  Bartlomiej Dlugosz•140

  @BartyCodingPosted over 2 years ago

  @PhoenixDev22 Thank you for your detailed feedback. I've implemented most of these items now. I haven't really used pseudo-elements before but it was pretty fun learning something new.

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi BartyCoding, I took some time to look at your solution and you did a great job!

  Also add descriptive text in the alt attribute of the image. Overall you did well :)

  Hope this help and happy coding!

  1