NFT preview card component use flex

Community feedback

• 

  Lilith•70

  @LacrhymoseLPosted almost 2 years ago

  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
• 

  Koi Hastilow•90

  @KoiHastPosted almost 2 years ago

  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