Responsive QR Code Component with Plain CSS

Hi Jhon, congrats for finishing this one ✨.

Lets talk about relative units.

vh - view height - It is the height of your view port means screen. 100vh is equal to 100% of screen height similarly 50vh is 50% screen height.

vw - view width - It is same as vh but instead of height here width is referred.

rem - rem means relative to the root font size. By default 1rem is 16px. But if you increase the font size in root rem also incrases.

em - similar to rem, but instead of relative to root in em it is relative to the nearest parent with fixed font size. Let's look at an example

<div class="grand-parent">
  <div class="parent">
       <div class=child />
  </div>
</div>

:root{
   font-size:14px; //16px by default
}

.grand-parent{
  font-size:1rem;   //1 * root font size = 1 * 14px = 14px
  font-size:2rem;  // 2 * 14px = 28px
  font-size:1em;  // first check whether there is a parent with fixed font size. no such parent 
  except root , so 1em = 1 * 14px
}

.parent{
  font-size:2rem; // 28px
}

.child{
  font-size:2em; // parent has a font size of 28px so 2em = 2 * 28px = 56px
  font-size:2rem  //2 * 14px = 28px;

Hope you understood the concept

Hay ! Good Job Jhon

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!