nft preview card component using html5 markup and CSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hey ShyamCanCode, congratulations on completing the challenge! You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • use h1 for the title of card instead of h3
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😁

  Marked as helpful

  1

  ---

  

  ShyamCanCode•90

  @ItachidorriPosted over 2 years ago

  @denielden Thanks for reviewing my work, I appreciate your valuable time. Hare Krishna!

  1
• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  There are a lot of problems on this I’m afraid

  • you’ve removed an essential meta tag from the head that controls scaling on mobile. This is teeny as a result. It was in your original starter files
  • the html is missing interactive elements. Anywhere there is a hover in a design it means something is interactive. That means you have to use elements like anchor tags or buttons (there are others, and all depends what you expect to happen on click as to which element you need to use). Using the correct elements will make them work for keyboard users and screenreader users etc
  • center the card on the page using grid/flex not position absolute with transform/translate. That removes the card from the document effectively and will result in overflow for some users (content going off screen). It is a technique you very rarely have to use these days
  • similarly, floats are not recommended and very rarely needed in modern frontend work. Use flexbox for a much more robust solution
  • the card needs no height or width, just a max-width. This will make it properly responsive
  • look into rem units more than px

  Overall, I recommend you learn from some more modern tutorials. There are lots of recommendations on the resources page here, but off the top of my head I recommend: Kevin Powell videos, Stephanie Eckles site modern css, Josh Comeau, Andy Bell, Inclusive components, Every Layout, Rachel Andrew. There are loads of others but that’s a good overview of people/resources that share modern resources

  Good luck

  Marked as helpful

  1

  ---

  

  ShyamCanCode•90

  @ItachidorriPosted over 2 years ago

  @grace-snow Thanks for reviewing my work, I appreciate your valuable time. Hare Krishna!

  0
• 

  P

  Marge C.•440

  @msunjiPosted over 2 years ago

  Hiya! The finished product looks great by the way, so well done! 👍

  I do have one suggestion for you though. Instead of using float and clear, I recommend you use flexbox instead. I think for the smaller parts of this project that you've used float on, it's fine. But as you start working on larger projects, you may want to learn more about things like flexbox and/or CSS Grid. Hope this was helpful!

  0

  ---

  

  ShyamCanCode•90

  @ItachidorriPosted over 2 years ago

  @msunji Thanks for reviewing my work, I appreciate your valuable time. Hare Krishna!

  0