marunayo / qr-code-component

Frontend Mentor - Challenge 1

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
• Author

Overview

Links

• My Soludtion
• Live Site URL

My process

Built with

• HTML
• CSS Flexbox
• Mobile-first workflow

What I learned

I'm using Flexbox to make the content/qr-component align both horizontally and vertically. Also to make the component consistent in mobile and desktop, I just using max-width here.

How I make the component sizes the same:

<section class="container">
    <div class="qr-component">
      <div class="qr-component-wrap">
        <!-- img and text -->
      </div>
      <div class="attribution">
        <!-- .... -->
      </div>
    </div>
  </section>

.qr-component-wrap {
    max-width: 370px;
    /* .... */
}

and here the code for making the component align center horizontal and vertical:

.qr-component {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Continued development

Well there is two things that still not comfortable:

1. I just feel my HTML could be more less
2. In my CSS, I think there could be another way to make it easier. Summary, sometimes when I write the code, I always think a better solution with less code. But I don't know what that is, because I also think this is the best solution that I can make.

Author

• Frontend Mentor - @marudever
• GitHub - @marudever
• Twitter - @marudever