Responsive QR component design using HTML and CSS

Hello David !

Congratulation for finishing the challenge

1. I would recommend you to use CSS variable to easily use them back, and if you need to change them, you modify only once and all your document will get the update !

In your case, it could be :

:root{
  --name-variable1: hsl(212, 45%, 89%);
  --name-variable2: hsl(0, 0%, 100%);
  --name-variable3: hsl(218, 44%, 22%);
}

Then to use your variable in your code, use the var() keyword :

body
{
    font-size: 15px;
    background-color:  var(--name-variable1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Outfit', sans-serif;
    margin: 1rem 1.5rem;
    min-height: calc(100vh - 0.1px);
}

1. I see you're using rem units in your code, which is a good thing, but be careful where you use it. For example :

img 
{
    padding: 1rem ;
    max-width: 100%;
    border-radius: 1.5rem;
}

The border-radius usually use px instead of rem, I give you a little link about best units pratices, it surely will give you some ideas : https://gist.github.com/basham/2175a16ab7c60ce8e001

1. In your HTML file, it is not a good practice to use an "h3" tag without an "h1" tag or even an "h2" tag to start with, you should replace :

<h1>
      Improve your front-end skills by building projects
</h1>

Then if the style of the "h1" is not okay for you, you can change it with your css !

Good job, keep goind and I hope my comment will be useful !

Personally, I would have used an <h2> instead of <h3> and try not to tinker with the font-sizes of the headings but other than that, yours was on point. Great job!