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.

• Frontend Mentor - QR code component solution
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
    • Author

• Solution: https://github.com/sdkdeepa/QRCode-component
• Live website : https://sdkdeepa.github.io/QRCode-component

First built semmatic HTML and then figured our the styling. Added accessibility at the end.

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Accessibility: alt text for the image and taborder

I learnt about rem and color: hls() in css. Also learnt how to add tab order in the HTML for the elements present.

body {
	background-color: hsl(212, 45%, 89%);
	font-size: 15px;
	font-family: 'Outfit', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 4rem;
}

.card {
	background-color: hsl(0, 0%, 100%);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	border-radius: 0.625rem;
	width: 200px;
	padding: 0.9rem;
	margin-bottom: 1rem;
}

I would like to build my own QR code generator. I could use for my content sharing such as videos, netlify urls or my workshop. this was I don't need to use external QR Geneators.

Read these to refresh my memory:

1. Tab Order
2. color:hsl
3. Flexbox
4. REM

Frontend Mentor - @sdkdeepa