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 - native html and css

Sicro01 60

@Sicro01

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


1st challenge and new to CSS so took me a while. Plenty of YouTube (Kevin Powell!)

Community feedback

@KoiHast

Posted

Hey, great job on your first project! If you want, here are just a couple of tips to improve your code a bit ^_^

  • You want to wrap the main part of your HTML in a <main> element, just to improve semantics and readability.
  • This one is more for FrontEndMentor itself, but to avoid getting the "Pages should contain a level-one heading" error message in your accessibility report, you can just add a <h1> at the top of your page and hide it using CSS. It's kind of a cheatsy way, but since FEM doesn't recognize that these are only components and not entire web pages, it judges them as if they are, so you have to kinda work around it.
  • Instead of using classes for the different stylings that you did on your <h3> and <p> elements, you can just use a combinator selector like h3, p { } to style your text. For instance, your text-padding and text-center styles could've just as easily been put under a selector for h3 and p, and you wouldn't have had to make so many classes. It just makes for an easier time for you and keeps you from having a million classes on everything. You don't want to depend on classes as your only method of styling. If you can get your styles across using element selectors, then that's usually a better way to go.

I'd analyze your CSS, but I'm still learning a lot of those rules myself, so I don't want to steer you wrong. I hope the HTML tips help you out, though! 🌺✌

Marked as helpful

1

Sicro01 60

@Sicro01

Posted

@KoiHast many thanks for the feedback - much appreciated!

1

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