Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview card component use flex

Lilith 70

@LacrhymoseL

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lilith 70

@LacrhymoseL

Posted

thank a lot for your tips. my next project I'll be use this tips. but

"If you wanted to just comment out the div.attribution section at the bottom, you could've used an actual <footer> element for the avatar and name at the bottom of the card, rather than using a div and giving it a class of footer. That would just help with the semantics of your HTML a bit, as we have a unique element for footers that negates the need for the div/class method." I'm little confuse. how different???

"This one is more for FrontEndMentor itself, but to avoid getting the "Pages should contain a level-one heading" error message in your accessibility report, you can just add a <h1> at the top of your page and hide it using CSS. It's kind of a cheatsy way, but since FEM doesn't recognize that these are only components and not entire webpages, it judges them as if they are." how to hide h1? what element I should use?? sorry for my english language. I'm not good at English.

0

@KoiHast

Posted

Hey, great job on this project! I just noticed a couple things that may help you out on future projects.

  • You don't really need an alt attribute for the "ethereum", "clock", and "avatar" icons. Small, unimportant images like this don't really add any content to the page and are more there for decoration, so the best thing to do is give them an empty attribute like alt="". That way, screen readers and other accessibility tools know that it's not important to the context of the entire page and can skip over reading it out to their user.

  • If you wanted to just comment out the div.attribution section at the bottom, you could've used an actual <footer> element for the avatar and name at the bottom of the card, rather than using a div and giving it a class of footer. That would just help with the semantics of your HTML a bit, as we have a unique element for footers that negates the need for the div/class method.

  • This one is more for FrontEndMentor itself, but to avoid getting the "Pages should contain a level-one heading" error message in your accessibility report, you can just add a <h1> at the top of your page and hide it using CSS. It's kind of a cheatsy way, but since FEM doesn't recognize that these are only components and not entire webpages, it judges them as if they are.

I'd look over your CSS, but I'm still learning a lot of those rules myself, so I don't want to steer you wrong. I hope the HTML tips help, though! 🌺✌

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord