Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component (w/ Vite, SCSS, and pa11y to check accessibility)

P

@ashea29

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

As an added challenge, I decided to create a theme toggle for this project. I added a separate set of color variables closely related to those for the default theme, and a button to switch between themes.

As another added challenge, even though it's blatant overkill for such a simple component, I took the opportunity to build an accessibility checker into my workflow using pa11y and concurrently. The intention is to use this, going forward, in future challenges and other projects.

What challenges did you encounter, and how did you overcome them?

This challenge fell under the category: "review of the skills I already have." But practice is always a good thing! :)

I did learn some new things along the way -- mostly from building the accessibility checker. It took some trial and error to get things working properly, and in a way that made sense.

What specific areas of your project would you like help with?

None that I can think of.

Community feedback

254mozart 10

@254mozart

Posted

Your design is very brilliant! Good idea adding different color themes for user preference. I think I will try including that in my next project.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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