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 for FrontEnd Mentor

@wendycheang

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found it hard to center the app but this was mostly fine. Just a beginner project

Community feedback

P
Jose Monge 340

@josemongedev

Posted

Well done Wendy! Don't worry, such is the path of the web developer🙏, we all felt annoyed at the start with those things like centering a div 😉 It takes time to learn all the details, but once you get used to it, It'll get much easier.

I'll give you just some little advice regarding the semantic tags use:

  • Usually main is used as the highest level container for all the other divs and containers, so it's the container that is unique and doesn't contain elements that are repeated across pages like navbars, sidebars, copyright, logos and such.
  • Instead of using main for the h3 and p elements, you could use an article or section tags. Article tags are supposed to be used for content that can be distributed independently from the rest of the site, like precisely this card component. Section is usually to contain a header and paragraph or such combos (title/text), and it's just the section of document. It could also be the section of an article, or of main.
  • For the attribution you could use a footer tag instead, since it's the end and it is supposed to be contain information about the authors, contact or copyright stuff.

Alright, I hope it was useful! Just keep practicing, you'll get better and better each day! 💪

Marked as helpful

1

@wendycheang

Posted

@josemongedev

Thanks for the response. Admittedly I'm new to learning about the different semantic HTML elements so getting feedback on using mains vs sections vs articles is very very helpful. I want to program in a way that is responsive and ADA compliant and develop those habits instead of using divs and spans so this is good feedback for me.

Thank you so much for the review!

1
P
Jose Monge 340

@josemongedev

Posted

@wendycheang Sounds like a good plan to learn that! You're welcome Wendy!🤗

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