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.
Note: Delete this note and update the table of contents based on what sections you keep.
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learned that I don't know Flexbox as well as I thought I did. I also learned how to get measurements from Figma design software.
To see how you can add code snippets, see below:
<div class="container">
<section class="item">
<img src="./images/image-qr-code.png" alt="QR code" />
</section>
<section class="item-body">
<h1>Improve your front-end <br>skills by building projects</h1>
<p>Scan the QR code to visit Frontend <br> Mentor and take your coding skills to <br> the next level</p>
</section>
.container{
max-width: 320px;
height: 450px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
box-shadow: 0 10px 40px hsl(220, 15%, 55%);
padding: 15px;
border-radius: 15px;
}
I really want to dig more into Flexbox. It's still confusing. May be watch a few more videos or some courses on Scrimba and or LinkedIn learning.
Note: Delete this note and the content within this section and replace with your own plans for continued development.
- Resource 1 - This helped me with Flexbox. I really liked this persons content hope it will help me going forward.
- [Resource 2] (https://yoksel.github.io/flex-cheatsheet/#section-justify-content) - Found this great resource on Github.
- Github - Craig Wolfe
- Frontend Mentor - @craigwolfe
Full Stack Zach from Youtube (https://www.youtube.com/@zachgoll)