Static QR Code Component

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

Even though the project was so small and simple, I am proud of using semantic HTML elements, abandoning my previous habit of using generic div elements coupled with a myriad of classes.

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

• Image gap: At first the gap between the QR code image and the element below it baffled me, but setting the display property of the image to block solved the issue.
• Horizontal and vertical centering: I was unsure what the best approach to this problem would be. I knew the desired alignment could be implemented with grid or flexbox, but considering the simple structure of the page I deemed neither of the two layout mechanisms were necessary and I opted for the following solution:

body {
    position: relative;
}

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

• Sizing different to design: While the height of the heading content box in the design file was 52px, the height of the same content box in my generated page was 52.81px (using the same font, font size, line height and letter spacing as specified in the design file), which slightly shifted the content below the image. I thought it to be reasonable enough to ignore this difference, but I would like to know if this should be fixed and how.

• Fixed height and width of main content: as the design file didn't call for dynamic sizing, I set the dimensions of the main element using height: 499px; and width: 320px;, as specified in the design file. Was this the right approach?