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

P

@theoscript

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Steven Stroud 4,120

@Stroudy

Posted

Amazing job with this, You have done so many things correct! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

  • On your .qr consider also putting the max-width: 320px; to max-width: 32rem;

  • This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="" />

  • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

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! 🌟

Marked as helpful

1

P

@theoscript

Posted

@Stroudy Hey man, thanks for the encouraging words and helpful suggestions. I've shared some of my thought process below if you are interested in having a read.

As for the max-width, I initially went with px instead of rem because I wasn't considering any scaling for the base typography - just wanted to keep things simple and get the project done quickly. I agree that rem does make a lot of sense for flexibility, especially if scaling in the future was a factor.

As for the <main> tag, I see where you're coming from, but since this is a small component, I was thinking more about how it would fit into a larger website. It didn't feel like it would be the "main" content in a full project, so I opted for <article> instead. But I totally get the accessibility and SEO benefits of using <main> and will keep that in mind when working on more complete pages.

And yeah you're right about the meta descriptions 😄 I didn't prioritize SEO here since it's just a small component challenge, but I'll remember to include it in large projects where it really matters.

Once again thanks for the encouragement and your active engagement on the platform.

0
P
Steven Stroud 4,120

@Stroudy

Posted

Hey @theoscript,

First, I want to acknowledge that everything you've done so far is spot on! Your work demonstrates a solid understanding and application of what was asked. The feedback I'm providing is not because you made any mistakes—quite the opposite, in fact. You've completed the challenge successfully and have shown great skills.

That said, I believe it's important to develop strong habits early on and hold ourselves to a higher standard, even with stand-alone projects like this one. It's about getting into the mindset of treating every project with the same level of detail and attention, whether it's a simpler task or a more complex one with multiple components. For example, highlighting the <main> sections of pages is a small detail that can have a big impact on the overall structure and clarity of your work.

Please don't take any of this the wrong way; you've been doing fantastic work and are clearly making huge strides! I just want to encourage you to keep pushing yourself to achieve even more. I'm excited to see what you'll create next! 😁

Keep up the great work!

0
P

@theoscript

Posted

@Stroudy Thanks man I appreciate that.

P.S. I didn't take any offence to the feedback you have given I'm hoping that my response didn't come out in a bad way either. You made perfectly valid points that are factually correct, I was just trying to give like an insight as to why I made it the way I made it in context with the suggestions you provided.

I'm hoping what I said above makes sense, English isn't my first language so structuring sentences tend to be difficult lol 😂

0
P
Steven Stroud 4,120

@Stroudy

Posted

@theoscript, If you found this helpful, Would appreciate if you marked it as helpful, I'm trying to get mentor of the week ❤ See you around.

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