QR code component with Astro, Tailwind CSS, Bun, and Netlify

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

Using Astro and my own Astro template to implement the solution. However, using an Astro component within the project might have been a bit overkill for getting to the desired outcome. Frameworks like Nuxt/Vue and Astro seem to be component-centric, so I am try to get into the habit of using components.

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

I struggle with CSS layouts. I had to "cheat" a bit to get started - but then was able to finish the rest on my own.

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

Sometimes I am not really sure where to put margins. Do I use it on the upper element, to add space between it and the lower element? Or vice versa? Or does it not matter? Same for left vs. right elements.

Using hard-coded widths seems "restrictive". Is there a better way to set the width that is more dynamic instead of using a hard-coded width of "360px".

I have several issues with Frontend Mentor itself:

• The screenshot does not match my live solution. For example, my paragraph has three lines but the screenshot of my solution only shows two lines. This seems to be a bug with the screenshot process. I tried creating a second screenshot and got the same results.

• Code blocks in this section are not being saved if they are at the very bottom. I tried using both of the options as described in the markdown help but neither worked. It shows it in the preview correctly, but when I hit submit or update solution, the content within the code block is lost. I have tried several times. Here is an example - you will see it is blank after I update solution:

``