Skip to content
Submitted almost 2 years ago

QR Code Component using HTML and CSS

Raghu Anand•50
@raghuaanand
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

Community feedback

  • Grace•31,210
    @grace-snowPosted almost 2 years ago

    Looking at the code, you appear to be suffering from whats known as "divitis". I have some suggested improvements for you

    1. Change container to a main element. Then remove all divs, placing classes directly on the elements you want to style instead
    2. Update the alt text on the image so it's more meaningful. QR code to... Where? (Add basic url)
    3. To center your card on the page use flex or grid properties on the body along with min-height 100vh. Remove the large margin. Add a small amount of padding on body or margin on the card just so it can't hit screen edges on small screens.
    4. The card should not have a width. Change that to max-width so it can go narrower if/when it needs to. It's even better if that value is in rem instead of px
    5. The card should have padding. Padding is for internal spacing - it's that space between the card edge and all the contents inside.
    6. The img should be display block and max-width 100%. It should not have margin top.
    7. Really important - font size must never ever be in px. Use rem.
    8. The card children will need vertical margins to create space between them (margin is for external spacing). They shouldn't need padding..
    0
    Raghu Anand•50
    @raghuaanandPosted almost 2 years ago

    @grace-snow I am now on the way to cure myself from 'divits'. Is this what you suggested?

    <body> <main> <img src="./images/image-qr-code.png" class="header" width="260px" alt="QR Code to Frotnend Mentor"> <h3 class="para-heading">Improve your front-end skills by building projects</h3> <p class="paragraph"> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> </main> </body>

    I am working on the other things also. Thanks once again!

    0
  • Grace•31,210
    @grace-snowPosted almost 2 years ago

    It looks like you've deployed the readme instead of the solution. You'll have to go into github pages settings, remove the theme if you've applied one and make sure you're deploying the correct branch and directory

    0
    Raghu Anand•50
    @raghuaanandPosted almost 2 years ago

    @grace-snow I was finding the way to deploy the files but I was unable to do. I will find it out and correct it. Thank you the feedback.

    0
    Raghu Anand•50
    @raghuaanandPosted almost 2 years ago

    @grace-snow https://raghuaanand-qr-code.netlify.app/ I think now I got to know how to deploy on netlify. Will learn how to do it on GitHub

    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