Responsive NFT-preview-card-component-challenge using Native CSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  Hello Basit, 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
  • add descriptive text in the alt attribute of the images
  • 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
  • use min-height: 100vh to html instead of height, otherwise the content is cut off when the browser height is less than the content
  • add transition on the element with hover effect
  • instead of using px or % 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!

  Marked as helpful

  2

  ---

  

  Basit Korai•350

  @basitkoraiPosted almost 2 years ago

  @denielden OMG! I really appreciate your effort Daniel, Thanks for Telling me all of those things that I was doing wrong. It means a lot. That's what keeps me going.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @basit-flash you are welcome and keep it up :)

  0
• 

  Adriano•38,160

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Basit Korai, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  A good practice to center content is using grid or flex-box, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:

  Flex-box:

  body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min height: 100vh;
  }
  

  GRID

  body {
      display: grid;
      min height: 100vh;
      place-content: center;
  }
  

  Images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Basit Korai•350

  @basitkoraiPosted almost 2 years ago

  @AdrianoEscarabote I can't thank you enough man. Really appreciate your feedback. :)

  1