Skip to content
Submitted almost 2 years ago

fem-qrcode | Challenge 1

Aureo•40
@aureodark
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

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

    Hi, Aureo! 👋

    There are a few changes you can do to make this solution better.

    • Put the <div class="attribution"> outside the <main> landmark. It is not the main content of the page.
    • Swap <div class="attribution"> with <footer>.
    • The QR code should have alternative text. It is not a decorative image.
    • Make sure the alternative text of the QR code describes the purpose of the QR code.
    • Remove all <div> elements. You should use the <main> element for the card and set the text alignment on the <main> element instead. For the image, you should make the <img> as a block element and set max-width: 100%.
    • The card only needs a max-width to be responsive. There is no need to set width: 100%. It is already the default styling.
    • Make the <body> element as the flex container of the card to place the card in the middle of the page. No need to do margin: 0 auto; on the <main> element. Instead, set justify-content: center on the <body> element.
    • Remove overflow: hidden and height: 90vh form the <body> because:
      • overflow: hidden makes the users can't scroll the page,
      • Set min-height: 100vh instead of height: 90vh to allow the <body> element to grow if the content needs more height.

    I hope this helps. Happy coding! 😄

    Marked as helpful
    1
    Aureo•40
    @aureodarkPosted almost 2 years ago

    @vanzasetia Thank you, I applied all the changes you suggested, the code really got cleaner, I really appreciate it!

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

    @aureodark

    You are welcome. That's good to know! 😄

    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