@MelvinAguilar
Posted
Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !
I have some recommendations regarding your code that I believe will be of great interest to you.
- Delete the current "index.html" and change the name of the file
qr-code.htmltoindex.htmlto access the solution only using https://saifhazem-code.github.io/FrontendMentor/qr-code-project/.
Background 🌆:
-
You should not recreate the background, you used the image
desktop-preview.jpgto create your solution, but that image is for decoration and is a nice way to present the challenge, for example, you can use it in your github README.You must use the images
desktop-design.jpgandmobile-design.jpgto create your solution.Although I must admit that I like the background image, it is not necessary for your next challenge.
Metadata 🗃️:
-
The
viewportmeta tag is missing. theviewportmeta tag is used to control the layout of the page on mobile devices. Add theviewportmeta tag to the<head>tag:<meta name="viewport" content="width=device-width, initial-scale=1.0">.You can check your solution on a mobile device to see how your solution is distorted by not using this tag. ⚠️
HTML 🏷️:
- Wrap the page's whole main content in the
<main>tag.
- For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.
- Since this component involves scanning the QR code, the image is not a decoration. You must not use the background-image property to add the QR code image. Instead, use the
<img>tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
