qr-code-component using HTML and CSS.

Community feedback

• 

  P

  Ryan Cahela•220

  @RyanCahelaPosted almost 3 years ago

  Hello Hari, This is a good first try.

  With most things in web development, there aren't 100% correct or 100% wrong solutions, there are some things I would have done differently.

  1. Move the CSS in the head of the HTML to the external stylesheet you created.

  2. I would remove the padding from the qr-code image and put it on the .middle-container class. that way anything inside the .middle-container will be pushed away from the edge instead of just the image.

  3. change the .middle-container class name to something more specific like "qr-card" or "qr-container" or something like that.

  4. It works for this small project but usually you want to stay away from using element selectors to target a single element on the page (the h3 and p rules). it can get confusing once you have more than one <p> or <h3> on the page. unless you want them to look exactly the same, which in some cases you might.

  like I said, these are just suggestions. There are 1000 different ways to do the same thing.

  Marked as helpful

  0

  ---

  

  Hari Kishan•10

  @KishanHKPosted almost 3 years ago

  @RyanCahela thanks man, really helpful.

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Good Job Hari Kishan

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container

  -> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

  -> But use header tag only once in main heading element.

  Keep up the good work!

  Marked as helpful

  0
• 

  Kacper Kwinta•1,405

  @kacperkwintaPosted almost 3 years ago

  Some tips:

  • entire box is not correctly centered, here is simple example how to do this, and here short film about this too
  • create <main> tag and wrap all other into this (semantic and accessibility), more about this here
  • Page should contain a level-one heading
  • don't use px for font-size, here's why
  • try to avoid static height in px, use more paddings and margins (:

  Marked as helpful

  0

  ---

  

  Hari Kishan•10

  @KishanHKPosted almost 3 years ago

  @kacperkwinta Thanks bro, will follow.

  0