nft preview card component main

Hi Mouali, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

• add main tag and wrap the card for Accessibility
• add descriptive text in the alt attribute of the image
• remove all margin from container class
• try to use flexbox to the body for center the card. Read here -> best flex guide
• after, add min-heigth: 100vh to body because Flexbox aligns child items to the size of the parent container

Overall you did well :)

Hope this help and happy coding!

Hello @MoualiMust ,

Congratulation on completing frontend mentor challenge.

I have some suggestions regarding your solution:

• There should be two landmark components as children of the body element - a main (which will be the NFT card ) and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

• To tackle the accessibility issues: Page should contain a level-one heading . In this challenge , you can use <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

• In this challenge the content of the card is all related . You have misused the article tag read more about the article usages in mdn .

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

• For any decorative images, each img tag should have empty alt="" as you didand aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

• the icon-view 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 or role presentation with empty alt.

• There are so many ways to add the hover effect on the image , The one I would use , using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on the hover as there is no reason to have the extra clutter in the html.

• The avatar's alt should not be empty , you can use the creator name Jules Wyvern. Read more how to write an alt text

• The link wrapping the equilibrium image should either have Sr-only text, an aria-label or alt text that says where that link takes you.

• For the avatar's part class="avatar", you would use <figure> and <figcaption>.

• To center the card on the middle of the page use flexbox properties and min-height: 100vh;` to the body .

• width: 350px;an explicit width is not a good way . consider using max-width to card instead and a little margin to the card .That will let it shrink a little when it needs to.

General point : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.

• You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs.

You might have a look at my solution , to see how I did the hover effect on the image , it might help.

Overall , your solution is good. Hopefully this feedback helps.