NFT Card using HTML and CSS

Community feedback

• 

  Kehinde•660

  @jonathan401Posted over 2 years ago

  Hey there @winprn 👋🏽 congrats on completing this challenge 🎉🎉🎉. You did really well. Just a few things from me 😄.

  1. This isn't really a feedback but you should consider checking out the report on your solution. This has help me a lot 💪🏿. For example, you should wrap your whole card in main element.
  2. You could consider changing the .card-title which is currently a p element to an h1 element. This is because it is required that every page contains at least one h1 element for easily navigation of the page by other users who may have some disabilities.
  3. When I checked out your solution on my mobile phone, the card was stretched over the screen. To fix this, instead of adding a definite to the card, you could consider giving a max-width style rule to the card instead of a width to the card. This will make sure that the card easily 'contracts' on mobile screens and then on larger screens you remove this max-width and adding a definite width of 37.5rem (which you defined in your CSS for larger screens). That is all from me 😄. Once again nice work 👏🏾. Happy Coding 🎉

  Marked as helpful

  1

  ---

  

  Ly Dinh Minh Man•260

  @winprnPosted over 2 years ago

  @jonathan401 Hi, thank you for your feedback. At first, I did make the .card-title as a class of the h2 element, but then I changed it to an a element to make it better for viewing its detail (like other shopping websites).

  I wrapped all the content inside a main element as you said, and also changed the style. Thank you once again!

  0

  

  Kehinde•660

  @jonathan401Posted over 2 years ago

  @winprn You're welcome. You could also achieve the same effect when you make it as .card-title a h1 element since you could use CSS to style it to make it look like a link. But I trust your decision 💪🏿. So what works best for you but also try to make the sites you create accessible as well 😇.

  1
• 

  Ayomide Gidigbi•100

  @DraysongzPosted over 2 years ago

  Its a great design, but add cursor pointer style to the main nft image

  1

  ---

  

  Ly Dinh Minh Man•260

  @winprnPosted over 2 years ago

  @Draysongz thank you!

  0

  

  Ayomide Gidigbi•100

  @DraysongzPosted over 2 years ago

  @winprn You're welcome

  1