QR code component

Community feedback

• 

  Jenna•230

  @NandiniCooppenPosted over 1 year ago

  Hello RosvaldasB,

  Congrats on completing the QR- code challenge 👏

  Here are some improvements that I would like to suggest :

  1. Using Semantic HTML5

  You may use semantic HTML, instead of <div>. some examples of semantic HTML : <main> , <section> , <header>,<nav>, <footer>

  You have skipped a heading level by using the h2 tag, this will cause an accessibility issue. Your document should have an h1 heading.

  You may read more about semantics here

  You may read more about accessibility here

  2. Using CSS variables For example, using the style guide provided, you may create your CSS colors variables as follow :

  root {
  --white: hsl(0, 0%, 100%);
  --light-gray: hsl(212, 45%, 89%);
  }
  

  Read more about CSS custom properties here

  3. Centering the card

  I will suggest adding the following lines of CSS to the body, just below the justify-content: center;

  body {
  align-items: center;
  min-height: 100vh;
  }
  

  This will center the card vertically on the page as needed. You may then remove the following lines of code from .wrapper

  position: absolute;

  top: 50%;

  transform: translate(0, -50%);

  I hope these will be helpful to you 😉

  Good luck going forward. and happy coding 🙂

  Marked as helpful

  0