QR code

Community feedback

• 

  BRIVAL-M•60

  @BRIVAL-MPosted over 1 year ago

  Hi :) For semantics, you can use the HTML tag <figure> to code your card.

  More about this tag

  And here is an image explaining the BEM, but you already know :) BEM tips img

  Marked as helpful

  1

  ---

  

  devusexu•130

  @devusexuPosted over 1 year ago

  @BRIVAL-M

  Thanks for sharing!

  I forgot this tag and I didn't see this picture before. Seems the naming can let me write less combinators and understand the component it indicate more easily.

  Good to know these concepts, thank you.

  0
• 

  Luis Jimenez•720

  @LuisJimenez19Posted over 1 year ago

  Hi, congratulations on finishing the challenge.

  You are correct there is a better way to center it. A tip is that whenever possible it is better to manipulate the content from its container. You can do this:

  body {
      flex-direction: column;
      min-height: 100vh;
      display: flex;
      background-color: var(--bg-color);
      justify-content: center;
      align-items: center;
  }
  

  This will center everything perfectly. I see that you use <main> to make the card, which is fine but would be better:

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

  and in this .card give it the styles of the card, and if what you want is to leave the footer below you can apply to the main a ``flex-grow:1;

  I hope my contribution is helpful.

  Marked as helpful

  1

  ---

  

  devusexu•130

  @devusexuPosted over 1 year ago

  @LuisJimenez19

  Thanks for your generous sharing!

  I try flexbox in my second challenge and I feel much better now.

  I originally want to reduce the unnecessary tags as long as I can, but now I see <div class="card"> is better for styling to reduce confusion, no matter during development or reading the code afterwards.

  It help a lot, thank you.

  0