NFT Card Example

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hello Max Kaiser ! Congo 👏 on completing this challenge

  Let's look at some of your issues, shall we:

  • Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with alt. Check my article on accessibility issues

  happy Coding😀

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @maxkaiser100,

  I have some suggestions regarding your solution:

  • The anchor tag <a> should be wrapping the main image image-equilibrium

  • Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around tEquilibrium #3429 .

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

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

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

  • Read more how to write an alt text

  • So you can use <ul> to wrap` cass="clockBoxand in each<li>there would be<img > and <p> .

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

  • width: 300px; 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.

  • Use min-height: 100vh; instead height: 100vh. using vh (viewport height) units allow the body to to grow taller if the content outgrows the visible page.

  • It's not recommended to use px for font size . Using px won't allow the user to control the font size based on their needs.

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

  You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

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

  Marked as helpful

  0

  ---

  

  Max Kaiser•300

  @maxkaiser100Posted almost 3 years ago

  @PhoenixDev22 This is such a great answer. I do have some questions if you've got a moment. For the life of me, I cannot figure why this works: <a href="images/image-equilibrium.jpg" target="_blank" class="image"><img src="images/image-equilibrium.jpg" alt="Equilibrium NFT"></a>

  The link itself isn't doing anything, correct? Is it just basically a container like <div> just in another shape that lends itself to an interactive state better?

  0