Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Links

• Solution URL: Code
• Live Site URL: Live Preview

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

While solving the QR code challenge I had problems centering the qr code image. After a little online search, I learned that images act funny in a div because we're forcing an inline element (img) inside a block element (div). I learned two ways to tackle this problem but I used the one I preferred 👇👇👇👇👇

👇 To see how you can add code snippets, see below 👇:

  <div class="inner qr-code">
    <img id="qr-code" src="image-qr-code.png" alt="qr_code">
  </div>

  .qr-code {
    margin-top: 10px;
    width: 95%;
    height: 100%;
  }

  #qr-code {
    padding: 5px;
    display: block;
    margin: auto;
    box-sizing: border-box;
    width: 100%;
    border-radius: 15px;
    object-fit: contain;
  }

Continued development

I want to improve my responsive layout skills, my JavaScript knowledge and learn to use frameworks and libraries.

Useful resources

• freeCodeCamp - This is an amazing article which helped me finally understand how to center images in a div. I'd recommend it to anyone having problems with that.

Author

• Frontend Mentor - @Ghost-writer-2