QR code component solution

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

I'm most proud of the fact that I was able to structure the component using semantic HTML and style it cleanly using Flexbox with a mobile-first approach. It was satisfying to see everything centered properly and looking exactly like the design.

What I would do differently next time is:

-Add comments in my CSS to improve readability for others.

-Try implementing the layout using CSS Grid as well, to compare both methods.

-Focus more on accessibility — like adding proper alt text and considering screen reader users.

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

One of the main challenges I encountered was understanding how default browser styles (like margin and padding) affect layout. Elements didn’t line up as expected at first, but I learned to use a CSS reset and inspect the DOM to better control spacing.

Another challenge was getting the component perfectly centered on the page. Initially, I struggled with margin tricks, but I eventually solved it by using Flexbox and setting min-height: 100vh with justify-content and align-items to center the component both vertically and horizontally.

Lastly, I found it tricky at first to organize my CSS clearly, but using BEM naming conventions helped me write cleaner, more maintainable styles.

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

I’d appreciate feedback on:

CSS structure and best practices: Am I using BEM and Flexbox efficiently, or is there a better way to organize the styles?

Responsiveness: Does the layout hold up well across various screen sizes? Are there improvements I can make?

Readability of my code: Is my HTML and CSS clean and easy to understand, especially for someone else reading it?

I’m also open to general tips on improving my workflow or making future components more reusable and scalable.