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 using Astro

@crossinguard

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?

I am most proud of of creating a personal design system that can be reused across future FM challenges. Next time I want to build my component to be resizable from the beginning, with the design parameters providing the default values.

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

I struggled with layering images. In the past I have done this with absolute position but I wanted something that felt less...janky. SmolCSS had me covered with their stack layout and an excellent linked use-case article on hero layouts.

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

I am pretty new to JavaScript and TypeScript. I tried to make this entire project type safe to minimize issues both in component use and use of the site.json information. I am cobbling together information from many sources and trying to adapt to Astro's implementation so please hit me up with anything that looks like an incorrect or inadvisable approach.

Community feedback

@hirakjsarma

Posted

The design is spot on from the reference image and I love how you have taken the time out to make a detailed README section. The final site also had attribution and footer sections so neatly done. The Project overall is very well documented and structured. The QR code element works well in various devices and layouts. You have done an excellent job.

1

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