Skip to content
Submitted 2 days ago

QR Code Card using basic HTML and CSS

Babyjenx•30
@Babyjenx
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 getting the QR code as centered as I did. Still not quite sure how to get it perfect but I'm happy with the end result.

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

Not too many challenges here other than centering. I found this to be a really helpful introductory project.

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

Is there a specific way to center divs on a page?

Any tips on how my code could be improved would be much appreciated!

Community feedback

  • KapteynUniverse•1,520
    @KapteynUniversePosted 2 days ago

    Hey Babyjenx, nice job.

    To center items you can use flex or grid.

    body {
display: flex;
justify-content: center; /* horizontally*/
align-items: center; /* vertically */
min-height: 100vh; /* Need this for vertical alignment */
}

    body {
display: grid;
place-items: center; /* or place-content: center; */
min-height: 100vh;
}

    Other than this

    Using landmarks and wrapping the content with main is a good practice. Every page needs one main.

    Use a modern css reset, it will make your life easier

    Avoid using hard coded values like width: 250px; , use max-width: 250px; instead. For better responsiveness using max-width: 15rem; would be better. Use rem especially for font size and media queries.

    Images needs a meaningful alt texts, unless they are decorative. For this one something like "QR code to/of/for (idk, english hard :D) frontendmentor.io" might be better.

    And for styling use classes instead of ids. Ids must be unique to one item, so you can't use same style on different places with id.

    Marked as helpful
    1
    Babyjenx•30
    @BabyjenxPosted about 2 hours ago

    Thanks @KapteynUniverse this is SUPER helpful. I really appreciate it :)

    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