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 Challenge, used basic html and css

LeeLee 30

@karleenmsrichards

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


It was aa bit difficult figuring out how much padding was necessary to match the wireframe's appearance.

What is the best practice in terms of the width of a component or section. Is it preferably in percentages?

Community feedback

@RabicaTahir

Posted

Hello Karleen 👋. Congratulations on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 🏷️: Wrap the page's whole main content in the <main> tag. or use sections for dividing the content.It would be easier for you to find the main content in future.

CSS 🎨:

Instead of using pixels you should use **(%) ** and (vw) for setting width of the page and for centering content firstly use min-height property . I hope you find it useful! 😄

Once again you did a good job.

Happy coding!

0

LeeLee 30

@karleenmsrichards

Posted

@RabicaTahir I love your feedback thank you. Please explain further if you can the use of percentages instead of pixels. Also can you describe the use of the min-height property for centering? Many thanks...

0

@RabicaTahir

Posted

@karleenmsrichards , Okkay so here it is.

CSS🎨:

-In using “height” in paddings or margins, you should use % instead of px, in case your website is responsive.

also

-The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size.

-To center the content on the page, add eg:{min-height: 100vh} to the body for the 100% of the viewport height.

I hope it clears now if not ask me anytime.

Happy Coding & Stay Safe.🤞

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