qr-code-component's Introduction

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.

Overview
- Screenshot
- Links
My process
Author
Acknowledgments

Overview

Screenshot

My process

Built with

Basic HTML5 with Semantic markup
CSS Flexbox

What I learned

This is one of the first pages made myself looking only on a design. Troubles were appearing already on beginning. Which CSS properties should I use to complete the challenge with a preferably normal solution. Maybe I should use a display tag?

.section {
  display: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
}

It looks fine with one section on a webpage but with a footer it becomes more uncontrollable and messy set of CSS properties.

.footer {
  display: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

Some time later I learned about flexboxes and want use it. So I end up with a such structure:

<body> <!-- flex column -->

  <main class="content"> <!-- flex row -->

    <div class="qr-code-container"></div>

  </main>

  <footer class="footer"></footer>

</body>

Continued development

Make more structured, readable a HTML5 and CSS code with better naming of classes and id
Understand how to better split HTML5 elements

Useful resources

Comphensive guide about CSS Flexboxes

Author

Twitter https://twitter.com/zerescas

Acknowledgments

Big thanks to https://www.frontendmentor.io/profile/romila2003 for the tips in comments section after which I:

Made fixes accessibility issues (absent of main and h1)
Refactored code (a useless flex-wrapper around a main content was deleted and replaced by body with flex properties)

Recommend Projects