Skip to content
Submitted over 1 year ago

QR code component-Challenge

Sontory22•40
@Sontory22
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 over 1 year ago

    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 <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements like <p> to better describe the type of content. e.g.: <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>.

      • The text Improve Your Front-End Skills by Building Projects is considered a heading element (h1).
    • 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 🎨:

    • Remove the width of the body element, let it occupy 100% of the screen width. When you set a fixed width to the <body> element, it will only work well when the viewport has the same width, this means that the website will not adapt to the different screen sizes, and will look bad when it is accessed on a smaller device.
    • Avoid using position: absolute or fixed to center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here 📘.

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

    Happy coding!

    Marked as helpful
    1
    Sontory22•40
    @Sontory22Posted over 1 year ago

    @MelvinAguilar Your advice was very useful and I'm so appreciative of your willingness to share your expertise with me. Thank you!

    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