Skip to content
Submitted over 1 year ago

QR-Code component (Basic HTML - CSS) (Modified to be responsive.)

eslamwaleed1•20
@eslamwaleed1
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

I would appreciate any feedback (": Modified to be responsive for mobile landscape.

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi 👋🏻, in case you want to take a look:

    HTML / ACCESSIBILITY:

    • To create responsive websites, the following <meta> tag should always be included inside the <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • The main content of every page (the card in this case) should be wrapped with the <main> tag.
    • Every page should have an <h1>.
    • This is a meaningful image and it should have an alt text with a description in case the user can't see it.

    CSS:

    • You might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers. An example from Josh Comeau 🔎

    Here are some very common and useful ones to get you started:

    * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
This will remove the vertical scroll bar you have for example.
    • Think about using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default). Consider this suggestion especially for the font-size.

    I hope it’s useful : )

    Regards,

    Marked as helpful
    1
    eslamwaleed1•20
    @eslamwaleed1Posted over 1 year ago

    Thank you a lot (": @fernandolapaz

    1
    eslamwaleed1•20
    @eslamwaleed1Posted over 1 year ago

    Can you explain more about the <h1>? I understand that it's important but in this QR component design there is no use for it. Should it be empty or what? @fernandolapaz

    0
    Fer•3,970
    @fernandolapazPosted over 1 year ago

    @eslamwaleed1

    Well, if there was no <h1> in the component, it could be added before it with a 'visually-hidden' or 'sr-only' class, something like this:

    <body>
<h1 class="sr-only">QR code component</h1>
<div class="qr">

    And hide it with CSS.

    Marked as helpful
    1
    eslamwaleed1•20
    @eslamwaleed1Posted over 1 year ago

    Thank you, Fernando! You're great. @fernandolapaz

    1
    Holo Olagoke•50
    @Olarra18Posted over 1 year ago

    @fernandolapaz please more explanation on this "The main content of every page (the card in this case) should be wrapped with the <main> tag."

    0
    eslamwaleed1•20
    @eslamwaleed1Posted over 1 year ago
    <main> it's from the semantic elements. As I searched I found that every page should be something like this: <main> <section> </section> <section> </section> </main>

    Search for Semantic Elements to know more, hope this is helpful (": @Olarra18

    1
    Holo Olagoke•50
    @Olarra18Posted over 1 year ago

    @eslamwaleed1 yeah thanks

    1
    Fer•3,970
    @fernandolapazPosted over 1 year ago

    @Olarra18

    Oh, that's simply because every page should have a <main>.

    In this case, even though it's just a component, we can use <main> for the card because there's nothing else on the page (it would be different on a real page, of course).

    w3schools - <main> 🔎

    MDN - <main> 🔎

    1
    eslamwaleed1•20
    @eslamwaleed1Posted over 1 year ago

    I've updated it if you wanna take a look @fernandolapaz

    1
    Fer•3,970
    @fernandolapazPosted over 1 year ago

    @eslamwaleed1

    Nice 🙂

    1
    Holo Olagoke•50
    @Olarra18Posted over 1 year ago

    @fernandolapaz thanks for the link

    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