Skip to content
Submitted almost 2 years ago

QR Code Component

Lucas Santiago•20
@manosanti
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

What did you find difficult while building the project?

  • Well, I felt a bit of difficulty in horizontally centering the image, vertically I could do it, but the image would stick to the top of the page and I didn't want to create spacing through "margin", so I ended up researching a way to center it with "min-height: 100vh" and it worked.

Which areas of your code are you unsure of?

  • I have some question about how "min-width" and "max-width" works and how to use them for the div framing, I believe they are easy topics that with a little reading and practice I will be able to master.

Do you have any questions about best practices?

  • Yes, I do. I would like my code to be reviewed and for feedback to be given to me, perhaps regarding class names or if there is any room for improvement in my code. All constructive criticism is welcome.

Community feedback

  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello there 👋

    Congratulation on completing the challenge

    HTML 📄

    • replace <div class="container"> with the <main> to fix accessibility issues.

    • Always provide the <img> tag with meaningful and humanly understandable text about what the image is about in the alt attribute. to improve accessibility.

    CSS 🎨

    • Use relative units such as em or rem for margin, padding, width, and height. most preferably rem for font size. avoid using px since it is an absolute unit.

    • It is a good practice to use CSS custom properties. learn more about it here

    • here is a good answer to your question about min-width and max-width. click here

    I hope this was useful 😊

    HAPPY CODING

    Marked as helpful
    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