Submitted over 2 years ago

QR Code Project using HTML and CSS

saifhazem-code•20

@saifhazem-code

A solution to the QR code component challenge

Preview Code

Solution retrospective

How do I optimize the webpage to look better on mobile devices ?

Code

Please log in to post a comment

Community feedback

Melvin Aguilar 🧑🏻‍💻•61,040
@MelvinAguilar
Posted over 2 years ago
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.html to index.html to 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.jpg to 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.jpg and mobile-design.jpg to create your solution.
  
  Although I must admit that I like the background image, it is not necessary for your next challenge.
Metadata 🗃️:
- The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta 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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord