QR code component using HTML, CSS , also some Css variables

Hello there, Nice effort on this challenge!

I tried viewing your code to give you specific feedback but unfortunately, the link doesn't work. Hence, I decided to drop some general styling tips.

• Having all of the common styling first in the stylesheet is a good idea. This means all the styles which will generally apply unless you do something special with that element. You will typically have default rules set up for: body p h1, h2, h3, h4, h5 ul, ol table and links

• We could define a few utility classes. If you have a few styling choices you know you will want to apply to lots of different elements, they can be put in this section. For example, a class that removes the default list style for lists we're going to display.

/* || UTILITIES */

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* … */

• Include CSS for specific things, broken down by the context, page, or even component in which they are used. Example :

/* || STORE PAGES */

.product-listing {
  /* … */
}

.product-box {
  /* … */
}

By ordering things in this way, we at least have an idea of which part of the stylesheet we are looking at.

• Avoid overly-specific selectors If you create very specific selectors, you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. Example :

article.main p.box {
  border: 1px solid #ccc;
}

If you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. Instead if you use below,

.box {
  border: 1px solid #ccc;
}

This will apply your rule to any element that has the class box. But, remember there will be times when making something more specific makes sense; however, this will generally be an exception rather than usual practice.

You can read more about this here

I hope you find this useful!

Happy coding!