Skip to content
Submitted 8 months ago

Qr code Component ( html and css )

Abderrahman Beddi•30
@itsmeabderr
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 8 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 a page's "main" section. Change .container into a <main>.

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

    • "Improve your" is a heading, so make it a <h1>.

    CSS:

    • Including a CSS Reset at the top is good practice.

    • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

    • Remove font-size: 100% on html, as that is the default.

    • Move background-color from .container to body.

    • On .container, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width - block elements like <body>, <main> and <div> are 100% wide by default.

    • Remove all widths and heights in px.

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

    • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

    • Since all of the 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.

    • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

    • On the paragraph, change width to max-width.

    Marked as helpful
    1
    Abderrahman Beddi•30
    @itsmeabderrPosted 8 months ago

    @Islandstone89 I wanted to express my gratitude for the incredibly insightful feedback you provided on my project. Your thoughtful observations and suggestions have truly enriched my work and inspired me to strive for even greater excellence. Thank you for taking the time to share your expertise and support. Your encouragement means the world to me.

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

    @itsmeabderr 🙂

    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