NFT Preview Card component with Mobile-First workflow and Flexbox

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!

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?

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! 👻🎃

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