Skip to content
Submitted 11 months ago

QR Card Component

Yhadira•40
@Siphixx
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

Any tips appreciated

Community feedback

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

    HTML:

    • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. As this project only has the card as the "main" content, the <main> can also be the card - change .card-qr to a <main>.

    • You don't need to wrap anything in divs, so remove those for an even better structure.

    • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it 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>.

    • .attribution should be a <footer>.

    • Footer text needs to be wrapped in a <p>.

    CSS:

    • It is best practice to write the CSS in a separate file, often called style.css. Create one in the same folder as the index.html, and link to it in the <head>: <link rel="stylesheet" href="style.css">.

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

    • Remember to have a "fallback" for fonts, like this: font-family: "Outfit", sans-serif;

    • max-width on the card should be in rem - around 20rem works fine.

    • Add display: block on the image, and replace width with max-width: 100% - the max-width prevents it from overflowing its container.

    • Since all text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

    • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead, like you have done in the Custom Properties.

    Marked as helpful
    2

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