Mobile first design, Flexbox for layout and centering

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

I’m really happy with how I matched the design using just HTML and CSS. Getting the layout right and making it look good on different screen sizes felt like a win. I also managed to add the Google Fonts and keep the images optimized so the page loads quickly.

Next time, I’d focus more on making the project easier for everyone to use by improving accessibility. I’d also try using CSS Grid instead of Flexbox to see if it makes the code cleaner. And I’d like to set up automatic deployment so I don’t have to do it manually every time.

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

One challenge was figuring out how to get the Google Fonts to load properly. At first, the font didn’t show up on my live site because I hadn’t imported it correctly in my CSS. I fixed this by double-checking the import link and making sure it was at the very top of my stylesheet.

Another challenge was making sure the QR code image stayed sharp and centered on different screen sizes. I had to tweak my CSS a few times using Flexbox and margins until it looked right on both mobile and desktop.

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

I’d appreciate feedback on how I structured my CSS. I want to ensure my layout is clean and efficient.

Also, if there are ways to improve my HTML for better accessibility, I’d love some advice on that.

Finally, any tips on optimizing image loading or enhancing page performance would be greatly appreciated.