001-qr-code-component - HTML, CSS custom properties, CSS Flexbox

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

Vertical centering of the card in the browser window can be done by setting the body's height to 100vh and declaring it a flexbox container. Flexbox items with margin: auto are centered both horizontally and vertically within the container.

CSS variables with a global scope can be declared in a pseudo :root element.

    :root {
      --white: hsl(0, 0%, 100%);
    }

Customization of default CSS values for all elements can be done as follows:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

The figma design file was inspected to check paddings, line heights and word spacings. Although these spacing values were adopted in my implementation, there is still a small vertical offset between the card text in my implementation vs. the frontendmentor.io solution.