NFT_preview_card_component

Community feedback

• 

  Chriscent Pingol•230

  @KishonShrillPosted 12 months ago

  Clean your CSS class pointers

  In your css code, I believe .container .foot h4 span .oth{} is just the same as .oth{} and .container .foot h4{} is same as .foot h4{}

  Doing so will make it less more confusing and more readable code when working in your css. Let me give you another quick example:

  Let use this HTML Code as an example...

  <div class="container">
      <div class="img-c">
          <div class="image">
              <img class="fir" src="./images/image-equilibrium.jpg" alt="">
          </div>
          <div class="overlay">
              <img class="sec" src="./images/icon-view.svg" alt="">
          </div>
      </div>
  </div>
  

  • Instead of pointing like this .container .img-c .overlay .sec{} you can just shorten it like this .sec
  • and instead of .container .img-c:hover .overlay { opacity: 1; } you can also shorten it into .img-c:hover .overlay{ opacity: 1; }.

  Use HTML semantic code

  There are many semantic code you can use, some of these code include:

  • <article>
  • <aside>
  • <footer>
  • <header>
  • <main>
  • <nav>
  • <section>

  In your case, instead of using another div as a container like what you did here 👇

  <main>
      <div class="container">
          <p></p>
      </div>
  </main>
  

  You can clean it more by making the <main> as your container instead...

  <main>
      <p></p>
  </main>
  

  And whatever was your styles of [container], just point and change it to the <main> element instead which would be something like this...

  main {
      width: 324px;
      padding: 20px;
      background-color: var(--card-back);
      border-radius: 15px;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      -ms-border-radius: 15px;
      -o-border-radius: 15px;
  }
  

  Overall Feedback and Summary

  All in all, your frontend is okay and great 🥳🎈🎉🎊 and that is all that matters, but soon you will be working with other people too soo having readable code really is a 1++. So all you need to work on is:

  • Clean CSS class pointers
  • Use HTML semantic code if possible

  This is a great start so far 🎉 and I hope you enjoy your road of frontend programming 😄

  0

  ---

  

  Mo_Reda•90

  @0xmaxx1Posted 12 months ago

  @KishonShrill Thank you for your good comment😊 I will improve the use of semantic HTML . . . . I hope you can see the rest of the other designs on my profile👍👌

  0