NFT Preview Card with flexbox and pseudo-element for overlay

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @BeLuxurious02 ,

  I have some suggestions regarding your solution :

  • Within the body sits main for the body content and footer for the FM attribution.

  • Anything with a hover style in a design means it's interactive, you need to add an interactive element <a> around the image , Equilibrium #342 and Jules Wyvern .

  • 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 as in"./images/icon-ethereum.svg", ./images/icon-clock.svg"` .

  • you can use an unordered list class="card__info"and in list item <li> there would be <img> and <p>.

  I would do for the avatar's part:

         <div class="paragraph2 ">
                      <img src="./images/image-avatar.png " class="author" alt="Avatar">
                      <p > Creation of <a href="#">Jules Wyvern</a></p>
         </div>
  
  

  • You can read on how and when to write alt text on images and how to make accessible. They'll either need aria-hidden if meaningless or labelling appropriately if meaningful.

  • Don't use span or div for meaningful content.

  • Use max-width instead of width. Then a little margin on the component or padding on the body to stop it hitting screen edges.

  • Never have font size in px. Using px won't allow the user to control the font size based on their needs.

  Hopefully this feedback helps.

  Marked as helpful

  0
• 

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  Hello there! Nice work with this one. Looking at your solution, I would suggest the following for you...

  • Wrap the content container with specific tag like main and attribution with footer tag
  • Include alt with description in the img tags
  • Add cursor:pointer to the hover state of the fonts in design. Consider adding it with the .card_footer span rule set
  • Add border: 1px solid white; and border-radius: 50%; in .card_footer img rule set

  Overall, you did good. Hope this helps and Keep up the good work!

  Marked as helpful

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hay ! Cédric Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Always use the "alt attribute" and just leave it empty bt.. always add it with img tag.

  -> Learn more on accessibility issues

  Keep up the good work!

  Marked as helpful

  0