Skip to content
Submitted almost 2 years ago

QR code using HTML and CSS

Nourallah•50
@nourallah28
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 there 👋. Good job on completing the challenge !

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

    Metadata 🗃️:

    • The lang attribute is used to declare the language of the webpage. Add the lang attribute to the <html> tag with the value en.
    • 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">
    • Add a title of the page. The <title> tag is used to specify the title of a web page, which is displayed in the browser's title bar or tab, and is also used by search engines as the title of a page in search results.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.
    • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘
    • 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 🎨:

    • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.
    • The width: 100vw property in the body tag is not necessary. This will create a horizontal scrollbar on some devices.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    0
    Nourallah•50
    @nourallah28Posted almost 2 years ago

    @MelvinAguilar Thank you for the feedback! I will surely take that into account next time I code. 😊

    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