Frontend Mentor | NFT preview card component coding challenge solution

@PhoenixDev22

Posted about 2 years ago

Hello @TheChrisP ,

I have some suggestions:

For any decorative images, each img tag should have emptyalt=""and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images like in alt="Eye Hover Icon", alt="clock-icon" and alt="Ethereum Icon" AND avatar's one andimage-equilibrium.jpgshould be descriptive (not "Creator Photo" you can use the the avatar name Jules Wyvern) .
Anything with a hover style in a design means it's interactive , you need to add an interactive element <a> around the image , Jules Wyvern and Equilibrium #3429.
You can use an unordered list<ul> to wrap class="card-value-text" and in each <li> there's <img> and <p>.
Don't use span for meaningful content.
It is essential that interactive elements have focus-visible styles as well as hover styles. These need to be really clear and obvious as they are needed to help a keyboard user know where is focused on the page.
the eye image 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 orrole presentationwith empty alt.
You can use <figure> and <figcaptin> for the avatar div (to use more semantic tags).
You should use em and rem units .Bothemand rem are flexible, scalable units . Usingpxwon't allow the user to control the font size based on their needs.