Successfully completed NFT-preview card

Community feedback

• 

  Muhammadh•1,140

  @Mr-jawPosted almost 2 years ago

  Hello there 👋

  Congratulations on completing the challenge

  HTML 📰

  • replace <div class="card"> with <main> tag, and replace <div class="attribution"> with <footer> tag to fix accessibility issues.

  • avoid using hyphens or underscores in the alt attribute of the <img> tag. Since it should be humanly readable text.

  • replace the <h3> tag in <h3>Equilibrium #3429</h3> with the <h1> tag since the project should have a top-level heading. and in <h4>0.041 ETH</h4> and <h4>3 days left</h4> replace the <h4> tag with <h2> tag. Also, replace the <h5> tag in <h5> Creation of <span id="name">ayush namdev</span></h5> with the <h3>. So the headings come in an order. This will improve accessibility.

  CSS 🎨

  • Use relative units such as em or rem for margin, padding, width, and height. most preferably rem for font size. avoid using px since it is an absolute unit.

  • It is a good practice to use CSS custom properties. learn more about it here

  Also here is a quick fix to center the card to the middle of the page

  1. Inside the .card selector, remove margin: auto;

  2. and add the following lines of codes to the body element

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

  This should fix it 👍

  I hope this was useful 😊

  HAPPY CODING

  Marked as helpful

  0

  ---

  

  Ayush namdev•120

  @ayushprojectsPosted almost 2 years ago

  @Mr-jaw thanks Muhammadh this is very helpful information for me as i have started practicing my skills on this platform it will take some time to learn these properties and making it habit overall your comment is very helpful for me. thankyou

  0