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.
- Solution URL: @jaimedargallo/QR-code-component-main
- Live Site URL: https://frontendmentor-qr-code-dusky.vercel.app
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
In this proyect I learn about:
Using semantic HTML5 markup would have taught the importance of creating structured and meaningful content that search engines and screen readers can easily interpret.
How to create flexible layouts that can adapt to different screen sizes and devices. I would have also learned how to control the alignment and distribution of content within the layout.
Adopting a mobile-first workflow would have taught I how to prioritize mobile devices when designing your project. This approach would have helped I create a responsive design that looks great on both small and large screens. The importance of using media queries to adjust the layout based on the device's screen size.
To see how you can add code snippets, see below:
<main>
<article class="card">
<img src="images\image-qr-code.png" class="codeQR" alt="" />
<h2>Improve your front-end skills by building projects</h2>
...
</article>
</main>body {
align-items: center;
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
font-family: 'Outfit', sans-serif;
justify-content: center;
}- Freecodecamp - The place where I learn the basics about HTML and CSS.
- Flexbox Froggy - A game to practice flexbox with CSS.
- Flexbox Defense
- Frontend Mentor - @jaimedargallo
- Twitter - @jaimedargallo
- Github - @jaimedargallo
I would like to take this opportunity to express my heartfelt gratitude and appreciation to my personal mentor @boton. I feel incredibly fortunate to have had the privilege of working closely with such an inspiring and supportive mentor.