QR Code challenge solution HTML and CSS only

Hi Jerico Jones B. Edic, Congratulations with finishing this project. You did a great job in coping the design. It has still some differences but that is difficult to copy if you have only the screenshot files.

Maybe the Pixel Perfect Pro extension for the Crome browser could make it a little more easy. In case you use Crome it can create an overlay of the screenshot design so you could easier copy the design with your code. You can find more info about that on this page: https://chromewebstore.google.com/detail/pixel-perfect-pro/nnhifpoojdlddpnhjbhiagddgckpmpfb?pli=1

You could use the min-width in cases were you need a minimum width and the element will grow further. The max-width is useful to set a maximum to the width of an element.

.container { width: 100%; min-width: 100px; max-width: 300px; }

In this example the .container will at least be 100px and not smaller. The .container will grow until it reaches the 300px. This could be written in one line using clamp:

.container { width: clamp(100px, 100%, 300px); }

I hope my feedback is useful ;)

hI @0653Jerico. Good job, looks great. Regarding your comments about minimizing CSS, you can try using some CSS frameworks like Bootstrap or Tailwind. I have used both but in my recent projects I used Tailwind mainly because it renders the CSS classes and removes the ones you are not using which makes the code more solid and less heavy. Give it a try and that will help you a lot and save you some time, mainly on the responsive things. It could be hard at the beginning but once you understand it, it's very useful. There are lots of YouTube tutorials to begin with.

Good job!