Submitted almost 2 years ago

Responsive QR code component | Semantic HTML & Vanilla CSS, BEM

bem

Johan•100

@JohanChereau

A solution to the QR code component challenge

Preview Code

Solution retrospective

Hello everyone👋

I'm excited to share my solution to my first challenge on Frontend Mentor! 🎉

I would love to hear your feedback on the readability, structure, and overall quality of my code. Improving in these areas is a priority for me, and I'm eager to learn from your insights.
Additionally, if you have any suggestions or tips regarding accessibility, responsiveness or anything, please don't hesitate to share them.

Thank you in advance for your time. Your feedback will be invaluable as I continue my journey as a web developer. 🙏

Code

Please log in to post a comment

Community feedback

Account deletedPosted almost 2 years ago

You nailed it!

In case you didn't know you can also separate the colors from thehsl function. Having them separately let's you be more flexible with your opacity value.

Like this:

:root {
/* Define just the color values */
--clr-neutral-700: 218, 44%, 22%;
}

.title {
/* Now it's much organized if you want to work with the opacity of the above color */
--title-text: hsl(var(--clr-neutral-700), 0.8);
    
color: var(--title-text);
}

Marked as helpful

P
Chimobi Ekwunife•10
@MrEkwunife
Posted almost 2 years ago
Nice job 👍. I love it

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord