QR-CODE component using html and css

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

What I’m Most Proud Of

• Clean Layout and Design: I successfully implemented a visually appealing layout that closely matches the design provided by Frontend Mentor.

• Improved CSS Skills: I gained confidence in using CSS properties like border-radius, padding, and layout techniques.

• Project Completion: I’m proud to have completed the challenge and learned new techniques along the way.

What I Would Do Differently

Add Media Queries: I would enhance responsiveness by adding media queries to better adapt the design to different screen sizes.

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

Challenges I Encountered and How I Overcame Them

Challenge:

I initially wanted to use only the box model to structure the layout, avoiding modern layout techniques like Flexbox. However, aligning and centering the elements within the container using just the box model proved difficult. I found it challenging to achieve the desired vertical and horizontal alignment across different screen sizes.

How I Overcame It:

After experimenting with the box model, I decided to use Flexbox for centering the content within the container. Flexbox made it much easier to align elements both vertically and horizontally, while maintaining a clean and responsive layout. This switch helped me save time and produce a more consistent result, even though it meant stepping away from my original intent of using only the box model.

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

Specific Areas I’d Like Help With

I would really appreciate help with understanding Flexbox more deeply. While I used it for centering elements in my layout, I’m still not fully confident in how to apply its full range of capabilities. Specifically, I would love more clarity on:

1. Flexbox Container Properties: How to effectively use properties like justify-content, align-items, and flex-direction to create flexible and responsive layouts.

2. Flexbox Item Alignment: Understanding the different ways to align individual flex items within the container, particularly in more complex layouts.

3. Flexbox vs Grid: When to use Flexbox vs CSS Grid, and how to determine which one is best suited for different layout scenarios.

Any guidance or resources that explain these concepts in detail would be greatly appreciated!