Submitted 3 days ago

QR code component

bonzoycv• 10

@bonzoycv

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I'm most proud of completing this challenge in just a couple of hours, despite my limited CSS knowledge. It's incredibly motivating, and I'm eager to tackle more challenges in the future. The experience has boosted my confidence in my ability to learn and apply new skills quickly.

For future projects, I'd approach problem-solving differently:

Instead of spending excessive time stuck on a single issue, I'll be more proactive in seeking solutions.
I plan to utilize online resources more efficiently:
- Searching for specific solutions on Google
- Asking for guidance in coding communities

This approach should help me:

Overcome obstacles more quickly
Reduce frustration

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

The most challenging aspects of this project were:

Implementing Flexbox correctly
Utilizing Media Queries effectively

To tackle these difficulties, I employed the following strategies:

Searched various web resources for Flexbox and Media Query tutorials
Studied different code examples of responsive web designs
Experimented with Flexbox properties to understand their effects
Tested different breakpoints in Media Queries to optimize responsiveness
When stuck, I broke down the problem into smaller, manageable parts
Applied solutions incrementally, testing each change

By overcoming these challenges, I've significantly improved my understanding of responsive web design principles, but I should say that still got some problems understanding how media queries works.

Community feedback

Huy Phan• 1,880

@huyphan2210

Posted 3 days ago

Hi @bonzoycv, Congrats on completing the first challenge!

I took a look at your solution and wanted to share some feedback:

The card (your main tag) isn’t centered in the viewport (the visible area of a web page on a screen). You’ve already used Flexbox on the body, but you're missing justify-content: center to center it. Typically, using display: flex; flex-direction: column; align-items: center; justify-content: center; on the parent element (in this case, the body) ensures proper centering of child elements. There are exceptions, but this combo works well here. It’s a good idea to understand why these values center content as they do.
I noticed you’re using two h1 tags and three p tags for the card content. I think it's better to stick with one h1 and one p in this case. I assume the multiple tags were to match the line breaks in the design, but remember that the number of lines shouldn’t be a hard requirement. If the content changes or grows, those extra tags may cause issues. Matching the design is important, but so is keeping your HTML structure clean and future-proof for easier maintenance.
As for media queries, there’s no one right way to use them, but I recommend looking into a mobile-first approach. It’s a good practice to design for smaller screens first and then use media queries to adjust layouts for larger screens.

Hope this helps!

Marked as helpful

bonzoycv• 10

@bonzoycv

Posted 3 days ago

Hello @huyphan2210, Thanks a lot for your feedback. As you notice I am having a hard time to understand flexbox and media queries and your feedback was so much useful to understand a little bit more how this works. I will make the necessary corrections, thank you very much again.

amandaaanh• 10

@amandaaanh

Posted 3 days ago

It looks good and it would be better if you adjusted the size of the card according to the design.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord