NFT Preview Card component with Mobile-First workflow and Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, John! 👋

  Good effort on this challenge! 👍

  First, I recommend visiting the Solid Start website. It gives you an overview of web accessibility.

  Some suggestions from me.

  • Don't put target="_blank" on every anchor tag. Only use it when the link is navigating the users to an external link or website.
  • I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
  • Lastly, I recommend fixing all the issues that have been reported.

  I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
  • Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  I hope this helps! Happy coding!

  Marked as helpful

  0
• 

  sm7654•160

  @sm7654Posted about 2 years ago

  Hi, you did a great job!!

  i wanted to make to image hover too but i couldn't get it.

  if you didn't understand what i meant when i said image hover read this: (the image hover is that when you place your mouse over the image you see that there is an eye with cyan background-color but you still see the image behind.)

  can you explain me how you did it?

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey! To better improve you project here are some recommendations to better improve you code:

  • The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

  • The icons need to have a blank Alt Tag along with an aria-hidden=“true”* to hides it from assistive technology.

  • The profile image Alt Tag needs to be improved. It should state the following; “Headshot of -person’s full name-“

  • The only heading in this challenge is the NFT title; "Equilibrium #3429”. Everything else gets wrapped in a Paragraph Element.

  • The profile image border needs to be a circle not a square.

  Happy Coding! 👻🎃

  0
• 

  Adriano•38,290

  @AdrianoEscarabotePosted about 2 years ago

  Hi John, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • images must have alt text unless it is a decorative image, for any decorative image each img tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader.
  • Prefer to use rem over px to have your page working better across browsers and resizing the elements properly

  The rest is great!

  I hope it helps... 👍

  0