Skip to content
Submitted over 1 year ago

QR Code with simple HTML/CSS

KoliaK•160
@KoliaK
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

Is there any errors in my code?

Community feedback

  • Eugenia•950
    @JaneMorozPosted over 1 year ago

    Hey! Your solution is great 🤩

    The only things I've noticed are some accessibility issues:

    • You can wrap the main content (which is QR Code in this case) into the main tag or replace existing div tag with main.
    • Also usually the page should have h1 tag. You have h2, I guess you decided to use it because it has desirable font-size but you can style h1.

    Overall everything is great and I like that it is responsive ☺️

    Keep it up! And good luck 🍀

    Marked as helpful
    1
    KoliaK•160
    @KoliaKPosted over 1 year ago

    @JaneMoroz thanks in advance for your reply. Would you give me more details regarding wrapping the QR in the main tag? I mean, what would improve by replacing div with main?

    1
    Eugenia•950
    @JaneMorozPosted over 1 year ago

    @KoliaK

    Something like this:

    <body>
  <div class="container">
    <main class="card">
      <img src="images/image-qr-code.png" alt="image-qr-code" />
      <div class="text">
        <h1>Improve your front-end skills by building projects</h2>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </div>
    </main>
  </div> 

</body>

    Usually your page must have header, main and footer. But in this challenge there's only QR code, so only having main makes sense.

    main is for the main content of the page, it's some sort of unique content, you can read more here. Remember there could be only one main tag per page.

    header can represent banner landmark of the web page. This is usually placed at the top of the page and in most cases you'll have logo and navigation inside. You can usually see it on every page.

    If you have article elements, you can have header in each as well because header represents a container for introductory content.

    footer element typically contains: copyright information, contact information, etc. And you can usually see it on every page as well. As like with header you can also use footer inside the article element too.

    All this tags are semantic HTML tags. Using semantic HTML tags improves accessibility of the web page, which is important for being use-friendly for screen-readers and indexing bots.

    Marked as helpful
    0
    KoliaK•160
    @KoliaKPosted over 1 year ago

    @JaneMoroz got it! Thank you so much for these details! I couldn't realize what you meant without the code. I haven't code anything in many years and now I'm trying to retrieve the skills.

    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