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.
I challenged myself with the QR Code Component to hone my frontend skills.
- Solution URL: Click here
- Live Site URL: Click here
- Semantic HTML5 markup
- CSS custom properties
I initially felt I wouldn't be able to accomplish it. But once I started thinking about what the layout should be, I was able to develop something that was near to the solution. MDN documentation aided me along the way.
A few difficulties I encountered: horizontal and vertical item centering. How do we center it without the thing bouncing about and shrinking?
Some code snippets I found helpful but doesn't help entirely, see below:
<div class="container">
<div class="child"></div>
</div>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
/* Setup */
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- freeCodeCamp - Had the snippet from here.
I need a bit more practice with the flexbox.
- MDN Docs - This helped me revise some snippet. Very easy to comprehend.
- Website - Alfred