Use pure CSS Flexbox to creating a QR code page .

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

For this practice project, I divided the page into two sections: qr-code-container and attribute (which explains who created the project). Then, in the parent element, main, I applied Flexbox. I gave the main section, qr-code-container, flex-grow: 1 so that it takes up the remaining space, which means I don't need to manually set the height anymore.

main {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.qr-code-container {
  flex-grow: 1;
  background-color: #d5e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

The tricky part was keeping track of the padding and how it affects the container width. With Figma, we can clearly see the spacing between the sections. At first, I just included the total width, not realizing that it didn’t account for the padding.

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

I've been trying to understand the difference between HSL and RGB in CSS. From what I found online, it seems like HSL produces better-looking colors. However, when I implemented the colors from a Figma design into a website, I noticed that the colors in HSL looked a bit washed out and weren't as vibrant as in the design. On the other hand, using RGB seemed to give a color that was much closer to what was in the design, and it looked more accurate.