Responsive NFT Crypto Card

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @ilhanhakan-koc,

  I have some suggestions regarding your solution:

  • To tackle the accessibility issues, You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

  • You can use a landmark footer for the attribution . HTML5 landmark elements are used to improve navigation .

  • 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 . add hover effect on them .

  • the fa-eye 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 An avatar of the user it's meaningless , you can use Jules Wyvern for it.

  • Read more how to write an alt text

  • No need for <div class="main__line"></div>, you can simply useborder-topto the avatar's part class="main__footer".

  • So you can use <ul> to wrap` class="main__information"> and in each<li>there would be<i> 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: 380px; 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.

  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.

  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

  ---

  

  Hako•110

  @ilhanhakan-kocPosted over 2 years ago

  @PhoenixDev22

  Wow thank you so much for the detailed information. Didn't noticed that I missed so many points. I've edited my project and tried to add all the points listed above in my project.

  0
• 

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  Hello there! Good job in completing this project. Regarding your solution, I would like you to notice the following…

  • This part of the line <div class="attribution"> could be wrap with footer tag. Alternative way is to place it inside the main tag
  • In this line, it could be wrap with section tag...

   <h2>Equilibrium #3429</h2>
        <p>Our Equilibrium collection promotes balance and calm.</p>
  Into:
  <section>
        <h2>Equilibrium #3429</h2>
        <p>Our Equilibrium collection promotes balance and calm.</p>
  </section>
  

  Other than that..

  • You utilized the semantic well, specially wrapping the whole content with main tag.
  • The HTML structures looks good.
  • The code looks neat and readable.
  • The CSS file is well organized and proper usage of sizing elements
  • The design itself it well implement and properly used the given details of the design

  Above all, the project is done well. Keep up the good work! Cheers!

  Marked as helpful

  0

  ---

  

  Hako•110

  @ilhanhakan-kocPosted over 2 years ago

  @RioCantre

  Thank you so much for your feedback. I have added your tips to my project.

  0