Skip to content
Submitted almost 2 years ago

QR code component challenge from frontendmentor.io

Yiftach-Yaakov•40
@Yiftach-Yaakov
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

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

    I have some recommendations regarding your code that I believe will be of great interest to you.

    Metadata 🗃️:

    • The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">

      You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️

    • The <link rel="stylesheet" href="./assets/css/style.css"> tag should be inside the <head> tag.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.

    Alt text 📷:

    • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

      If you want to learn more about the alt attribute, you can read this article. 📘.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    0
  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <div class="card"> with the main tag and <h2> with <h1> to fix the accessibilty issues. click here for more on web-accessibility and semantic html

    There is no need to give .card a height value.

    Give h1 and p the same font-size of 15px, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

    To center .card on the page using flexbox instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.

    To center .card on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    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