Skip to content
Submitted 3 months ago

QR Code Component using HTML and CSS

P
Petter Torst Saatvedt•180
@PetterTSaatvedt
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

  • P
    Øystein Håberg•12,740
    @Islandstone89Posted 3 months ago

    Hi Petter, nice to see a fellow Norwegian here!

    You did a good job on this challenge - here are a few suggestions to make your solution even better:

    HTML:

    • The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

    • I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

    • Change .attribution to a <footer>, and use <p> for the text inside.

    CSS:

    • It is best practice to write 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">.

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

    • Since Outfit is a sans-serif font, you must change font-family: 'Outfit', serif to font-family: 'Outfit', sans-serif.

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport.

    • Remove the width in px on the card. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

    • We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

    • 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, height: auto and max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

    Marked as helpful
    1
    P
    Petter Torst Saatvedt•180
    @PetterTSaatvedtPosted 3 months ago

    @Islandstone89 Hei Øystein, tusen takk for masse bra feedback!

    Her er det mye jeg skjønner at jeg har oversett i lengre tider, fordi det "funker" på min skjerm. Spesielt bruken av korrekte units, og håndtering av bildestørrelse-skalering er noe jeg kommer til å få god bruk for fremover.

    Skal sørge for at jeg tar all feedback med i betraktning i neste prosjekt - igjen takk for hjelpen!

    1
  • T
    Phil Daum•50
    @PhillipDaumPosted 3 months ago

    Your code seems well organized. The preview looks good. I like how you included alt text for the image, I forgot that in mine. I also found it interesting how you applied the width of 288px to the qr-card class and it worked for everything. I'm going to research your use of rem and em a little bit because it seemed to work well. I don't completely understand the difference.

    1
    P
    Øystein Håberg•12,740
    @Islandstone89Posted 3 months ago

    @PhillipDaum rem relates to the root font size, which by default is 16px. If a user change their default font size in the browser, a font-size set in rem will scale, whereas it will not scale if it's set in px. This is why it's crucial to never use px for font-size.

    The em unit is relative to the font size of the element's parent. If no explicit font size is set on any of the element's ancestors, 1em is equal to the root font size, which as mentioned is 16px by default.

    Here's a a reason why I prefer rem over em for font sizes. Let's say you have the following HTML:

    <div class="parent">
  <p class="child">I'm a paragraph.</p>
</div>

    With these styles applied:

    .parent {
  font-size: 2rem;
}

.child {
  font-size: 1.5rem;
}

    What would the computed font size(font size always gets computed to a px value) be for each of the elements?

    Well, we haven't changed the font size on the root(html), so by default 1rem is equal to 16px. This means .parent has a computed font size of 16px * 2 = 32px.

    For the .child, we multiply 16px * 1.5, which gives us 24px.

    Now, let's look at the same style rules, using em:

    .parent {
  font-size: 2em;
}

.child {
  font-size: 1.5em;
}

    The .parent still gets a computed font size of 32px, since 1em equals 16px if no font size is set on any elements besides the root. But, in this example, .child does not get a font size of 24px. How come? Because its value is relative to its parent, 1.5 gets multiplied by 32px and not 16px. Hence, .child's final font size value is 32px * 1.5 , which is 48px.

    Hopefully this made some sort of sense :)

    1
    P
    Petter Torst Saatvedt•180
    @PetterTSaatvedtPosted 3 months ago

    @PhillipDaum Thanks for the feedback, Phil! Alt text is crucial for providing descriptions of an image/figure (and its function if it redirects somewhere) so that it is possible for impaired users using a screen reader to access the content! :-)

    For the width set on the qr-card, I did this purely to get as near the design of the component as possible, however as Øystein pointed out it would be better to not set a fixed size, but rather set a max-width, to make it possible for the component to shrink or grow according to screen sizes.

    2
    T
    Phil Daum•50
    @PhillipDaumPosted 3 months ago

    @Islandstone89 That made so much sense! Excellent. Thank you!

    1
    P
    Øystein Håberg•12,740
    @Islandstone89Posted 3 months ago

    @PhillipDaum No problem, glad to help! :)

    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