Skip to content
Submitted 5 months ago

Static Web QR Code Component using HTML & CSS

beqqi•40
@beqqi
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 am proud of the fact that I didn't procrastinate until I get everything right where I wanted them to be.

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

I was having a problem with the positioning, which I am currently working on.

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

It would be nice if I had understood how the layout works and how parent-child relationship works.

Community feedback

  • Yefree Valdez•840
    @yefreescodingPosted 5 months ago

    Nice job on this component, and congratulations on not procrastinating xd.

    Here are some tips to improve your styles with CSS and make the design stand out 😁:

    • Do not apply a background-color to the * {} selector, as this will affect the background of every element on your page.
    • You can style the body with min-height: 100dvh; and display: grid; place-items: center; to center any div within your body, eliminating the need for position: absolute;.
    • If you use position: absolute; for any component, always remember to add position: relative; to the parent container. This is very important.
    • <img src="" alt=""/> elements can be tricky to style, but using display: block; max-width: 100%; can make your coding life easier.
    • It's essential to learn how to use display: grid; and display: flex; as they are crucial properties in today's front-end development.
    Marked as helpful
    0
    beqqi•40
    @beqqiPosted 5 months ago

    Thank you very much, I will work on it! @yefreescoding

    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