Submitted 16 days ago

QR code with HTML and CSS

Shuaib Mursaleen• 10

@Saul077

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'm proud of my ability to replicate the given design as close as possible to it.

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

I had trouble getting curved edges with border-radius while having padding. To solve this I referred to stack overflow, in which a user suggested to add the padding value to the border-radius value to solve it

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

What do you guys think of my approach to center the QR image in the div element, and how differently would you have done it?

Community feedback

Teodor Jenkler• 3,720

@TedJenkler

Posted 14 days ago

Hi @Saul077,

Nice project! I have a couple of suggestions for improvement:

Centering a Div (Alternative Method): A fun technique to know is centering a div using position: relative for the parent and position: absolute for the child, with top: 50%, left: 50%, and transform: translate(-50%, -50%). Although the first method (using Flexbox) is better in most cases, this method is handy when you need to center content that overlaps.

Semantic HTML: Consider using semantic HTML to improve accessibility and SEO. For example, you could use a <main> tag and replace unnecessary divs. Flexbox can help you simplify your layout by using just one container for the entire page, with Flex on the body and a flex column for the card.

Heading Usage: For headings, consider using an <h2> tag for the title of your content, as this is the correct heading level for this project.

Keep up the good work!

Best, Teodor

Marked as helpful

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 16 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 abut min-height. You can use grid instead of flex too(with some changes). Hope you found this comment helpful :)

Marked as helpful

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