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.
- Live Site URL https://zerescas.github.io/qr-code-component/
- Basic HTML5 with Semantic markup
- CSS Flexbox
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>- Make more structured, readable a HTML5 and CSS code with better naming of classes and id
- Understand how to better split HTML5 elements
- Twitter https://twitter.com/zerescas
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)