Skip to content
Submitted 12 months ago

QR code component using HTML and CSS

UG•140
@0x-UG
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

This was the easiest challenge for me so far. I even decided to play around with linear gradient on the page background

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 12 months ago

    Hi. It looks good, but there are quite a lot of things to improve in the code.

    HTML:

    • You need a <main>. Change the first <div> to a main. And make the ID a class.

    • qr-code should also be a class. IDs are rarely used these days.

    • Alt text also needs to tell where it leads (frontendmentor.io).

    • "Improve your frontend skills" is a <h1>.

    • .attribution should be a <footer>. And the text needs to be wrapped in a <p>.

    CSS:

    • Don't use @import. It's better for performance to link the fonts in the <head> of the HTML.

    • It's good practice to include a CSS Reset at the top. Andy Bell has a good one you can use.

    • Remove max-width and max-height on the body. Add min-height: 100vh

    • Change justify-content from space-between to center, to center the card vertically.

    • Remove flex-wrap: wrapon the container. You do not need it here.

    • Remove box-sizing: content-box. It's the default, so you wouldn't have to declare it. Anyway, in the mentioned CSS Reset, the first thing it does is select all elements and applies box-sizing: border-box.

    • Remove all fixed widths. Add max-width in rem on the card.

    • Put text-align: center; on the body. The text will elements will inherit the value.

    • Font-size should not be in px. Use rem.

    Marked as helpful
    0
    UG•140
    @0x-UGPosted 12 months ago

    @Islandstone89 thanks for this, I'm still new to it all so I don't necessarily know all the tips and tricks of CSS, I kinda tend to just do things manually like a noob would, I'll try these out right now!

    1
    UG•140
    @0x-UGPosted 12 months ago

    @Islandstone89 I'm done. Thanks for the feedback. Please be sure to give more feedback on my solutions whenever you can/see it. It'd be much appreciated. :) Thanks again!

    1
  • Varchronos•70
    @VarchronosPosted 12 months ago

    A vertical linear background would look better in my opinion. Looks great!!!

    0
    UG•140
    @0x-UGPosted 12 months ago

    @Varchronos what's the CSS syntax for vertical linear bgs? . I only know this one cos I learnt it while doing the score summary challenge

    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