nft-preview-card-component-main

Community feedback

• 

  joaovitorwitt•250

  @joaovitorwittPosted about 2 years ago

  Hello @Kihura, how are you doing today?

  Your solution looks great, no doubt on that. But I have some suggestions that you can make to improve your project.

  On the main tag instead of using position: relative; use display: flex;

  The code looks something like this:

  main {

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  

  }

  That way you can properly align your content on the middle of the screen.

  The second thing that you might consider add is the hover effect on the NFT card, you can take a look at my solution for this project to see how that would look like.

  The last thing is to use more HTML5 Semantic tags: https://developer.mozilla.org/en-US/docs/Glossary/Semantics

  Semantic tags can help the search engines determine the importance of your content, make your code more readable, and also offer more accessibility.

  The rest looks great.

  Keep the good work.

  If you have any doubts feel free to reach out.

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Kihura, You have done a good work! 😁

  Some little tips to improve your code:

  • use main tag to wrap the card and improve the Accessibility but not as a container of that one element
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • add descriptive text in the alt attribute of the images
  • You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution
  • Using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
  • remove all margin from main
  • 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
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  0