Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component

@manosanti

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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-jaw

Posted

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
Discord logo

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