Skip to content
Submitted about 1 month ago

QR code component

bonzoycv•10
@bonzoycv
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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.

Future Approach

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:

  1. Overcome obstacles more quickly
  2. Reduce frustration
What challenges did you encounter, and how did you overcome them?

The most challenging aspects of this project were:

  1. Implementing Flexbox correctly
  2. 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•2,380
    @huyphan2210Posted about 1 month 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
    1
    bonzoycv•10
    @bonzoycvPosted about 1 month 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.

    1
  • amandaaanh•10
    @amandaaanhPosted about 1 month ago

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

    1

Please log in to post a comment

Log in with GitHub

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