Skip to content
Submitted almost 2 years ago

QR Code Component ( CSS Flexbox )

Shahzaman Abbasi•170
@Shazee17
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

Feel free to give any feedback!

Community feedback

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

    Hi, Shazee17!

    Here are some suggestions for improvements.

    • The QR code is the main content of the website. It should have alternative text that describes the purpose of the QR code. As a side note, <img> must have alt attribute.
    • Replace <h2> with <h1>. Each page should have one <h1> as the main title of the page.
    • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset
    • Remove <div> elements that wrap <img>, heading tag, and <p>. Control the width of the children element with padding of the parent element.
    • Fix all the issues that have been reported.
    • Make the <img> as a block element and set max-width: 100%. It makes working with <img> easier.
    • Remove width: 100%; from the <body> styling. It's already the default styling.

    I hope this helps. Happy coding!

    0
    Shahzaman Abbasi•170
    @Shazee17Posted almost 2 years ago

    @vanzasetia Thank you for the feedback, i'll work on that!

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

    @Shazee17

    You are welcome! 👍

    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