Submitted 11 days ago

QR-Code solution using basic HTML and CSS

sc0006• 10

@sc0006

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I most proud of how I was able to get a better understanding of media queries since I have never used them before. I hope to have more practice using them.

What challenges did you encounter, and how did you overcome them?

I struggled with centering the QR code inside of the container. I had to play with padding and width to really get it to how I wanted it to look.

What specific areas of your project would you like help with?

Simpler ways to center divs within a container. It took a lot more trial and error to figure out how to get the qr code image within the container perfectly centered and I'm sure there are easier ways to get that accomplished.

Community feedback

Svitlana Suslenkova• 4,750

@SvitlanaSuslenkova

Posted 11 days ago

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

To center you can use 1. flex 2. grid 3.parent element-padding+child element width:100%. Depends on situation.

Marked as helpful

sc0006• 10

@sc0006

Posted 10 days ago

@SvitlanaSuslenkova I knew there would be a way to do it using flexbox. Just tried it and so much easier and required a lot less effort. Cool know i can use flex, grid or that third suggestion you gave. I will have to try that one as well! Quick question. Im still brand new and haven't learned vh yet. What is the purpose/use of that element. Thank you again so much for your input as well!

Steven Stroud• 9,380

@Stroudy

Posted 11 days ago

Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

Setting the width and height for an <img> helps the page load faster and prevents content from jumping around as the image loads. This is good for performance and improves user experience. However, if your image needs to keep a consistent shape (aspect ratio) across different screen sizes, it's better to use the CSS aspect-ratio property instead.
For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts
I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

sc0006• 10

@sc0006

Posted 10 days ago

@Stroudy Thank you for helpful reply. I will remember to set the width and height of <img> for future reference. Im still a newbie and have never used aspect-ratio so I guess I have some later research to do there. I just looked up BEM naming and I definitely can see how that can make things more readable as well as useful. Will look to try and start doing that practice if it can help make my code more readable. Thanks again!

Please log in to post a comment

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