Skip to content
Submitted over 2 years ago

QR Code layout using vanilla CSS and HTML

Branley J Aybar•10
@Baybar1
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there any part of the code that you feel can be improved upon. Why and how?

Code

Please log in to post a comment

Log in

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    Hello there 👋. Good job on completing the challenge !

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

    HTML 🏷️:

    • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
    • The text Improve Your Front-End Skills by Building Projects is considered a heading element (h1).

    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. 📘.

    CSS 🎨:

    • Instead of using a defined height (height: 1000px;), you can use min-height with a value of 100vh to make the section take up the full height of the viewport, while still allowing it to expand if the content inside it grows larger.

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

    Happy coding!

    Marked as helpful

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