Skip to content
Submitted 3 days ago

QR code with html and css

FriedHamm•60
@FriedHamm
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 proud that I took the initiative to start something on my own, and next time, I’d like to make it responsive.

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

It was challenging to read even the simple instructions, and creating the Git repository and uploading it to Netlify was also difficult. I took my time reading through the instructions carefully and made steady progress.

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

I focused solely on completing the task successfully. As a result, it’s not responsive, the selector names feel unnatural, and I think the readability could be improved. I’d appreciate feedback on these areas.

Community feedback

  • Huy Phan•2,140
    @huyphan2210Posted 3 days ago

    Hi, @FriedHamm

    I checked out your solution and I have some thoughts:

    • You're using max-width: 20% on the .container, which limits it to 20% of the body's width. Since .container is a div (a block-level element), max-width: 20% behaves similarly to width: 20%. While this is technically responsive, it may not be the most flexible solution. I recommend replacing 20% with a specific value, such as 300px. While not perfect, it might be more suitable for this challenge.
    • Instead of height: 100vh, consider using min-height: 100vh on the body. This ensures that the body element will always cover the full viewport height but allows it to expand if necessary.
    • For better readability and accessibility, try to use more semantic HTML elements instead of div tags where possible (e.g., section, header, main). This helps with both structure and accessibility. Also, consider researching CSS naming conventions like BEM for your class names to keep things more consistent and maintainable.
    • Well done on completing the challenge! There are still a few things to improve, but overall you're on the right track. It's normal to face challenges when learning new concepts, but you made good progress with Git and Netlify. Keep pushing yourself, and you’ll continue to improve!

    Hope this helps!

    0

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