NFT Preview Card Component

Community feedback

• 

  Abdelrhman Kamal•450

  @AbdelrhmanX7

  Posted over 3 years ago

  if this your first time then you did it great but i have some comments on your project First: you can use body in css file second: if you want to make your main in center of page (https://blog.hubspot.com/website/center-div-css) visit this website to know all ways to center your main element Third: you have problem with position you can find all things about positions (https://www.w3schools.com/css/css_positioning.asp) fourth: you must learn about flex and grid

  11
• 

  Mohireza•100

  @Mohireza1

  Posted over 3 years ago

  Before solving these challenges, you need to be familiar with both flexbox and grids. I suggest that you learn flexbox using Flexbox Froggy and then maybe use flex for centering stuff in your pages.

  You can also learn about girds (the people behind Froggy have a grids tutorial, too), which are, in my opinion, essential to designing any webpage.

  11
• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 3 years ago

  Hi Twoicedstone, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • add main tag and wrap the card for Accessibility
  • img element must have an alt attribute, it's very important!
  • 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
  • remove margin, position, left and top properties from main class
  • try to use flexbox to the body for 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

  Overall you did well 😉

  Hope this help and happy coding!

  11