Melvin Aguilar 🧑🏻💻• 61,220
@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML 🏷️:
- Use semantic elements such as
<main>and<footer>to improve accessibility and organization of your page.
-
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>.- The text
Improve Your Front-End Skills by Building Projectsis considered a heading element (h1).
- The text
- Since this component involves scanning the QR code, the image is not a decoration, so it must have an
altattribute. Thealtattribute should explain its purpose. e.g.QR code to frontendmentor.io
CSS 🎨:
- Remove the width of the body element, let it occupy 100% of the screen width. When you set a fixed width to the <body> element, it will only work well when the viewport has the same width, this means that the website will not adapt to the different screen sizes, and will look bad when it is accessed on a smaller device.
- Avoid using
position: absoluteorfixedto center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here 📘.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
1
Sontory22• 40
@Sontory22
Posted
@MelvinAguilar Your advice was very useful and I'm so appreciative of your willingness to share your expertise with me. Thank you!
0
