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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: QR Code component solution repo
• Live Site URL: QR Code component solution page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

I learned a how to create a QR code component. usign the HTML semantics, BEM method and CSS custom property.

<!--QR container>-->
<main class="content">
  <!--QR code-->
  <figure class="content__image">
    <img src="images/image-qr-code.png" alt="QR code" />
  </figure>

  <!--Text-->
  <section class="content__text">
    <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>
  </section>
</main>

/*QR Code container*/
.content {
  background-color: var(--white-background);
  height: 510px;
  width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 20px;
  gap: var(--space-300);
}

/*QR Code*/
.content > .content__image > img {
  width: 288px;
  height: 288px;
  border-radius: 10px;
}

/*Text*/
.content > .content__text {
  width: 288px;
  height: 140px;
  text-align: center;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

Continued development

I want to continue working on this project, and learn more about responsive design, card design, flexbox and grid css.

Useful resources

• CSS MDN - This helped me for understand CSS.

• CSS Tricks - This is a great resource for learning CSS.

• ¿Qué es BEM CSS? - This is an amazing article which helped me finally understand BEM method. I'd recommend it to anyone still learning this concept.

Author

• Github - @PierreLogs
• Frontend Mentor - @PierreLogs
• Twitter - @lepierre19