Frontend Mentor - QR code component solution
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.
Table of contents
Overview
Screenshot
Links
- Solution URL: github.com/Bn-Bushra/Coding-with-Frontend-Mentor
- Live Site URL: lucent-praline-4eaebd.netlify.app
My process
Built with
- Semantic HTML5 markup.
- CSS custom properties
- Flexbox
- Desktop-first workflow
What I learned
I learnt the importance of design for a web developer. Design serve as a visual aid and makes the destination achievable.
I also learnt that structuring with HTML is key. See how I utilised semantism here.
<div class="background"> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qr-code" /> </div> <div class="image-text"> <div class="heading"></div> <div class="paragraph"></div> </div> </div> </div>
I used css flexbox to center the qr code container.
.container { display: flex; flex-direction: column; justify-content: center; align-items: center; }
Continued development
I'll like to master CSS flex box and grid very well to be able to use efficiently and understand the working priciples of CSS.
Useful resources
Author
- Website - My website
- Frontend Mentor - @Bn-Bushra
- Twitter - @byteburaq
Acknowledgments
Alhamdulillah. Wa jazakumullahu khayran Jazah.