@MelvinAguilar
Posted
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML π·οΈ:
- Wrap the page's whole main content in the
<main>
tag.
- The <div> tag can be useful for styling and positioning, but it doesn't convey any semantic meaning. Instead, consider using more semantic elements like <p> to better describe the type of content. e.g.:
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
.
- You should not use inline-CSS because it is not a good practice. Instead, you should use an external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.
CSS π¨:
-
Use
min-height: 100vh
on the "#qr" element instead ofheight: 800px
. By using 100vh, you ensure that it spans 100% of the viewport height and allows for resizing, ensuring correct vertical centering. -
You should use the
box-sizing: border-box
property to make thewidth
andheight
properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here π.
I hope you find it useful! π
Happy coding!
Marked as helpful