Bn-Bushra• 290
@Bn-Bushra
Submitted
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: github.com/Bn-Bushra/Coding-with-Frontend-Mentor
- Live Site URL: lucent-praline-4eaebd.netlify.app
- Semantic HTML5 markup.
- CSS custom properties
- Flexbox
- Desktop-first workflow
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;
}
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.
- Website - My website
- Frontend Mentor - @Bn-Bushra
- Twitter - @byteburaq
Alhamdulillah. Wa jazakumullahu khayran Jazah.
