NFT Card (flexbox, custom variables, pseudo elements, BEM)

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Colin, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • You can fix the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • add descriptive text in the alt attribute of the images
  • using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  Marked as helpful

  1

  ---

  

  Colin McArthur•140

  @ColinMcArthur85Posted over 2 years ago

  @denielden Thank you! Thats VERY helpful! I noticed the alt text issue after I uploaded this, a silly oversight but one I intended on correcting.

  My biggest concern was the :hover issue so thank you for the reference, I will check that out and update this accordingly.

  Appreciate the feedback here.

  1
• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  I recommend you move the attribution out of the card and put it in its own footer on the page

  Beyond that

  • this is touching all sides of my mobile screen. Make sure it has a little space by either adding margin to the card or padding to a wrapping element like body
  • include a git ignore. This came with your starter files and is bad to remove. Less important in this challenge but will become extremely important as you move onto larger projects with build steps
  • the first link is empty at the moment because the image has empty alt. What is it you'd expect to happen if someone clicked on that image? Write that link destination in an aria-label on the anchor tag, or add some Sr-only text inside the anchor tag
  • profile images like that avatar are valuable content imo, not decorative, so should have alt text eg "Jules Wyvern avatar"

  I would use pseudos to do the image hover exactly as you have done but with some small changes

  • I'd use 2 pseudos so it's easier to control opacity. One for the teal color and one for the eye icon (you need to fix the path for the eye icon btw)
  • I'd have them both on that link by default but opacity 0 and give them a transition so it's smooth
  • I'd keep zindex low on both so there's more control. Eg zindex 1 and 2 or 10 and 20 so you can stack the two pseudos correctly.
  • on hover all that would change is the opacity of each pseudo
  • it's entirely possible to do all this with one pseudo instead, but that would mean changing the teal color to hsla so it has its own alpha (opacity) value independent of the pseudo itself

  I hope this helps

  1