QR Code Component

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

I was able to get the component to look pretty similar to the design.

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

The main challenge with this one was making sure the image was an appropriate size and was not overflowing its container. Setting the image to block display and giving it a max-width of 100% took care of the sizing issues. Using auto margins for the image made sure it was centered.

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

1. I would like feedback on the choice of my html elements and structure. Specifically, I would like to know if I chose the correct semantic elements.

2. In order to center the component in the body, I had to add this css rule:

   html, body {
       height: 100%;
   }
   

   I am not sure why I had to do this, even when I made the body display: flex and used center for justify-content and align-items.

3. Was it appropriate to give the body a flex display to center the component?

4. Did I properly size the component?