QR code component

Community feedback

• 

  Shivangam Soni•1,030

  @ShivangamSoniPosted 5 months ago

  Nice Work. Just a few things.

  1. Apply Resets on all elements rather than just on the HTML

  /* use Astrisk instead */
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  

  2. Explore & use more HTML tags: Making the entire Card component out of the main tag doesn't really make sense. It would have been better to use the article tag similar to this:

  <main>
      <article>
          <img src="images/image-qr-code.png" alt="qr-code">
          <h1>Improve your front-end skills by building projects</h1>
          <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </article>
  </main>
  

  3. Use CSS Classes: It makes the code much more understandable & maintainable. Using just tags is not going to be a good solution when it comes to larger projects. I also suggest looking into things like BEM Style CSS

  <main>
      <article class="card">
          <img class="card__img" src="images/image-qr-code.png" alt="qr-code">
          <h1 class="card__title">Improve your front-end skills by building projects</h1>
          <p class="card__info">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </article>
  </main>
  

  Marked as helpful

  1

  ---

  

  Zoé Moeremans•140

  @zmoeremaPosted 5 months ago

  thanks for your tips ! @ShivangamSoni

  1