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.
This is my version of the QR code beginner project, I tried to replicate my design as close to the original but I added box shadow around the container.
I began by planning out how to layout my html, since I felt confident I could figure out a way to lay things out I just did it without writing it down on a piece of paper.
After laying thing out how I wanted them, I began to style my design as close as possible to the original and this was the result.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
The biggest thing I struggled with was wondering why my body container would not align-items center after I had used display flex. After some googling I realized the body's height was only the max height of the content which was the container image.
After adding a height of 100vh to the body and limiting the height of the container to be max content, I was able to center align the container.
<body>
<div class="container">
<div class="qrCode">
<img src="images/image-qr-code.png" alt="">
</div>
<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>
</div>
</body>body {
height: 100vh;
}
.container {
height: max-content;
}I still need to get more practice with learning about sizing in general with CSS and Flexbox.