Skip to content
Submitted 11 months ago

a simple qr code card using html and css

F1r2e3d4•110
@F1r2e3d4
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

  • Øystein Håberg•10,390
    @Islandstone89Posted 11 months ago

    HTML:

    • You need a <main>, this is important for accessibility. Change .card to a <main>. You don't need any divs.

    • The alt text also needs to say where it leads (frontendmentor.io).

    • Headings should always be in order, so you never start with a <h3>. Change it into a <h1>

    CSS:

    • It's best practice to write the CSS in a style.css file, and link to it in the <head> section.

    • Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.

    • It's good practice to include a CSS Reset at the top.

    • On body, you don't need to set width: 100%, as that is the default. height should be min-height. And you should only have one font-family declaration.

    • Remove the fixed width. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

    • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

    • Instead of width use max-width: 100%, and add display: block to the image.

    • As the design doesn't change, you don't need any media queries in this project. When you do need them, set them in rem instead of px. Also, it's common practice to do mobile styling first, and use media queries for larger screens.

    Marked as helpful
    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