QR Codes - HTML CSS

Hi! 👋

It's important for a responsive website to have meta viewport tag. Otherwise, on mobile view, everything is zoomed out. Also, add meta charset to it.

It's important to know that not all browsers default to UTF-8 character encoding. So, it's best to specify it.

Make sure you make the meta charset as the first child of the head tag. The next element after the meta charset should be the meta viewport. As the spec has said that meta element with charset attribute should fit completely within the first 1024 bytes at the start of the file.

Reference: https://www.w3.org/International/questions/qa-html-encoding-declarations

After that, do the following.

• Remove all br elements. Let lines wrap where they need to. I suggest controlling it by setting the padding on the parent element. You can't accommodate every screen size, so it's rare you'll ever need to use them.
• The .contenedor element should only need a max-width to prevent the card from becoming too large while still allowing it to shrink if needed. For the height, let the element inside it control it.
• Use rem for the padding instead of the percentage unit. It's going to make sure that it has the expected value. A percentage unit is a relative unit that may have a different value on each screen size.

Hope this helps.

You have done good work. It seems nice. But for code, you have to do best practices for writing code.

1. <img src="../img/image-qr-code.png"> in this line you have miss alt attribute this is used for details, consult guidance on providing text alternatives for images.
2. <article class="contenedor"></article> You should use <main> attribute instead of <article> You make the webpage more robust and functional no matter what screen reader technology is used.