Skip to content
Submitted about 2 years ago

QR Code Component (HTML and CSS)

Tharun Raj•1,330
@Code-Beaker
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

This is my second challenge and I'm proud of completing it myself.

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

I haven't come across any major issues with this project.

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

Any feedback is welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas Exequiel•200
    @arrejoria

    Hey good job on this solution! 💯 I can leave you some tips

    I want to highlight some positive aspects of its design. These elements caught my attention and I think they are the strong point of your work:

    1. [HTML]: The HTML boxes infrastructure is good, you're on the right way.
    2. [CSS]: Variable CSS is a good practice to improve your speed on large layouts 👍

    Here are some recommendations that will help you improve your design:

    1. [Size Changes]: Note that you use an explicit width and height for some elements. That can be a problem for large layouts, try using max-width, max-height for example.
    2. [Positioning]: You are using relative and absolute to center the content of your container. Try using Flexbox or wrapping its left and top properties with a transform that might also work.

    keep it up you are doing great! 🧉

    Lucas,

    Marked as helpful
  • Vitor Shigueta•80
    @VitorShigueta

    You can use body { height: 100vh; } to give a reference to your container and make it centered on the screen (it is appearing cut off the screen at the top)

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