Skip to content
Submitted over 1 year ago

Responsive QR Code Component

Koen Oosterhuis•80
@koeno100
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 tried a different challenge earlier, but that one proved to be too difficult, so I decided to do this one since it seemed a good entry point.

What I found a little difficult was figuring out how to get the card centered. However, after figuring out how flexbox works and playing around with it, I managed to get to a decent solution!

A few questions I have:

  • In regards to my HTML layout, is this a good workflow, having the <main> and <footer> tags and putting the actual content in <div>'s within these semantic tags? Or is it better to use the <main> and <footer> elements as the structural objects instead?
  • Is the way I worked out the CSS good or could it be more concise/ordered differently?
  • Is it better to use the <img> element, or a <div> and add the image to it using background-image in CSS?

Community feedback

  • Arne•1,110
    @DudeldupsPosted over 1 year ago

    Heya 👋

    Your html looks good except for the huge indentation. You should use 2 spaces or maybe 4 or else it will look weird when you have to do further nesting.

    Some general advice I can give you:

    • Do not declare font-sizes with px, use rem or rarely em instead

    https://joshcollinsworth.com/blog/never-use-px-for-font-size

    • Do not use id-selectors #qr-code in your CSS. They have a higher specificity and you could end up overwriting a style that you didn't intend to. Keep it all to classnames .class or element selectors.

    When looking at such a small component, it's hard to talk about the semantic HTML part. Generally, you would have a header on a site with a nav inside, then in the main content somewhere you'd find this component wrapped inside a div like yours. So just like the h1 you used here is normally not correct, because the h1 is the main title/heading of a site. This component would probably have an h3 or something, depending on the structure of the website (headings should be used in descending order).

    But to be honest, this is nothing to worry about in this small challenge, great work and keep those solutions coming 🤠

    1

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