QR Code Component - native html and css

Community feedback

• 

  Koi Hastilow•90

  @KoiHastPosted almost 2 years ago

  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

  @Sicro01Posted almost 2 years ago

  @KoiHast many thanks for the feedback - much appreciated!

  1