Skip to content
Submitted almost 2 years ago

QR Code Component - HTML, CSS only

CalvinSales•40
@NoobKelvin
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

Please let me know if there's any better practices in the structure of my code. I find it difficult to find the exact measurements but Youtube helped me tbh.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, CalvinSales!

    Alternative text should not be hyphenated ("frontendmentor.io-qr-code"). Alternative text is not a code (like a class name). It should be human-readable. So, the better alternative text is the one that @MelvinAguilar has suggested.

    Use <body> element as the container of the card. Then, use the <main> element as the card element. This way, you don't need any <div> elements.

    Also, for the <div class="text">, you want to do these instead:

    • Add margin-top to the heading to give some whitespace between the image the heading, and
    • Use the padding of the card to control the width of the text.

    I hope this helps.

    Marked as helpful
    2
  • Melvin Aguilar 🧑🏻‍💻•61,160
    @MelvinAguilarPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.
    • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.
    • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

    • To center the content horizontally, use justify-content: center; to the container and you can remove the margin: 0 auto;

      .container {
    /* margin: 0 auto; */
    /* max-width: 360px; */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    max-width: 360px; /* Use the max-width here, this is your component not the "div.container" */
}

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    2
    CalvinSales•40
    @NoobKelvinPosted almost 2 years ago

    @MelvinAguilar Thank you so much for the suggestions. I really appreciate it a lot <3

    1
  • CalvinSales•40
    @NoobKelvinPosted almost 2 years ago

    I made some changes to the code based on your suggestions just need to tweak the paddings and margins a little. I did what @vanzasetia suggested had a little problem with the footer so I put it in position: absolute; so it will be excluded in justify-content:center; from the <body> tag. I've also changed the alt to make it more human-readable based on the suggestions of @MelvinAguilar. Massive thanks to the both of you, Please let me know if there something that I've missed or needs to work on. Hope you're all having a great day :D

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @NoobKelvin

    Good to hear that, CalvinSales!

    For the footer positioning, I recommend setting the flex-direction: column to the <body> element. After that, add some margin-top to the .attribution. This way, you don't need to use absolute positioning.

    I recommend fixing the issues that have been reported.

    Keep up the good work!

    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