Submitted 17 days ago

QR code component

Eddie Bones• 120

@EddieBones1

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?

One thing that I was proud of during this project was my persistence. There was times in which I was stuck on how to style the webpage, but I took a step back for a day or two, and watch tutorial videos in the meantime. And when I came back to coding the webpage, I knew exactly what was missing in the code.

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

One particular challenge that I encounter was centering the QR code in the middle of the page. I overcame this challenge by watching one of Kevin Powell's Youtube video in which he talked about the different position properties, and he gave examples of each one.

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

Specific areas in my project that I would like help with is understand the difference between "::root {}" and "*{}" selectors in CSS and what properties to put in those selectors.

Community feedback

Teodor Jenkler• 3,720

@TedJenkler

Posted 17 days ago

Hi @EddieBones1,

Nice project! Here are a couple of additional suggestions:

Centering Elements: Another way to center an element is to set the parent to position: relative, and the child to position: absolute. Then, use top: 50%, left: 50%, and transform: translate(-50%, -50%) to center it perfectly. While using flex is the recommended approach in most scenarios due to its flexibility, it's good to be aware of different centering methods.

OG Meta Tags: Given the shareable nature of your project, consider adding OG (Open Graph) meta tags. These tags will enhance the appearance of shared links and improve SEO.

Keep up the great work!

Best, Teodor

Marked as helpful

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

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

Marked as helpful

Eddie Bones• 120

@EddieBones1

Posted 17 days ago

I updated the code, thank you so much 😁 but if you don't mind me asking, what's the difference between vhand % when it comes to the min-height property? @SvitlanaSuslenkova

Svitlana Suslenkova• 3,490

@SvitlanaSuslenkova

Posted 17 days ago

@EddieBones1 100% height of body is just the height of your content in it. As body doesn't have any parent component it can't get 100% of parent component (as it works with divs).

Marked as helpful

RMDBIG• 10

@RMDBIG

Posted 17 days ago

yes yes more css styles yes yes no

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