Submitted 21 days ago

QR Code Solution

Chris•115

@CKHarrison

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I have been primarily working on back-end hardware facing development using C# and other technologies in my day job for the past two years, so I'm a bit rusty on my fullstack skills, especially my Front-End CSS development. I plan on using Front End Mentor as a way to sharpen my skills back up to the level they were at around two years ago. I used this challenge as a way to work on mobile-first development. Funnily enough, I encountered the same problem I always used to have, how to center the content in the middle of the page! Please let me know about anything you think that could be improved, I'm here to get better, so your feedback is welcome!

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

Centering the content within the body, I once again had forgotten exactly how to do that, and had to do some research on how to do it. Centering content has always been my nemesis!

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

Like I have said previously, I'm coming back to Front End Development after a while and am a bit rusty. Any feedback on the problems with the CSS that you see, or any better ways to structure my CSS or content would be greatly appreciated.

Community feedback

P
Vladimir Damnjanovic•160
@dovlicioPosted 21 days ago
Hi there, great work! A few things I would suggest: your card container should not be <main> because the <main> should contain the main content of the page. Since we are building just a card component, you could use <main><div class="card-container"></div></main>. That means your card component should be inside the main area of the page.

Also, you did a great job centering the items in the body—that's exactly how you do it! Setting the height to 100vh and aligning items horizontally and vertically using display: flex is the right approach.

One property that isn’t necessary is flex-direction because you only have one element in your <body>, which is the <main> element. :)
Marked as helpful
1
P
Chris•115
@CKHarrisonPosted 21 days ago
@dovlicio Thank you so much for your feedback, I really appreciate it! I went ahead and implemented your suggested changes!
0

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