NFT preview card component challenge hub

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as well…

  • Instead of div, alternatively wrap the whole content with main tag . Use semantic tags, for HTML structures, refer it with this one Semantics
  • Include alt with description in image tags. Like this line <img src="images/icon-view.svg" class="eye">
  • Clean the whitespaces in the code
  • Add the hover state of the h2 and .creator pre rule sets
  • Refactor this part and evaluate the details into...

  From:
   <div class="symbols">
        <div>
          <img src="images/icon-ethereum.svg" id="eth">
          <small>0.041 ETH</small>
        </div>
        <span></span>
        <div>
          <img src="images/icon-clock.svg" id="clock">
          <small>3 days left</small>
        </div>
   </div>
  
  Into:
   <div class="symbols">
        <div class="sample name here">
          <img src="images/icon-ethereum.svg" id="eth">
          <small>0.041 ETH</small>
        </div>
        <div class="sample name here">
          <img src="images/icon-clock.svg" id="clock">
          <small>3 days left</small>
        </div>
   </div>
  
  CSS:
  .sample {
       display: flex;
       align-items: center;
  }
  

  • Remove margin-bottom: 10px; in .symbols small rule set and add padding: 0 0.2rem;

  Above all, Well done! Keep it going!

  Marked as helpful

  0

  ---

  

  Mohammed Kasim•210

  @MO-KA19Posted almost 3 years ago

  @RioCantre Thank you very much for the feedback, I am still pretty new to these stuff and frontend mentor challenges so I just look at the picture and try to make it with my mind, These feedbacks help me so much to improve and I will try your notes in my next challenges. Thank you again 3>

  0