Submitted over 3 years ago

Pixel-perfect QR code component (HTML, CSS)

accessibility, bem, sass/scss

Joshua•25

@minimalsm

A solution to the QR code component challenge

Preview Code

Solution retrospective

Second frontend mentor challenge completed 🎉

As this was fairly simple my main goal was to use BEM (never used it before) and have it be pixel perfect.

When trying to achieve pixel-perfect I took screenshots of the component in the browser and overlaid them in Figma using "Place Image". Is there an easier way of doing this?

Also, using BEM for the first time. I was unsure if I thought have used a BEM class to style the article or not as the design was fairly simple? Any thoughts on this?

Had to use Surge for the site because GitHub pages isn't rendering the page properly 🤷‍♂️

Any feedback is greatly appreciated! Thanks 😬

Here are some resources I found helpful:

Make Your CSS Variable Names Suck Less

Accessible heading structure

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Joshua's solution.

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