QR Code Component with Semantic HTML Elements

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

I am most proud of the responsiveness of the QR Code Component. Initially, when I had it, the text or image would overflow outside of the card and really got me thinking as to how I could solve it. When I was able to solve, that feeling was great because I had made a component that looked good across different screen sizes without needing to use a media query.

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

My challenges came off with figuring out which semantic HTML elements to use and also how to import web fonts.

When it came to the HTML elements, I consulted the Mozilla Web Docs - HTML to see what attributes were widely supported and their use cases to help me decide which elements to use in my source code.

For web fonts, I decided to follow the documentation in the Google Fonts API support and used the link tag to import the font-family then create a CSS class to get the two font variants.

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

My implementation for getting the card component to be in the middle of the screen was to do the following:

.container {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    translate: -50% -50%; 
} 

Initially, I was planning to position the card component using Flex but was having issues regarding the positioning. The way I had it was to make the body tag have a display of flex then do flex-direction: column, justify-content: center, and align-items: center but noticed that the card was still positioned at the top. I was wondering the different ways you could position the card component in the middle using Flex or Grid and also the benefits of using those methods versus the implementation I had done above.