Simple QR code design using bootstrap card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 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.

  • The solution is not displaying correctly because all of its files are inside a folder, the URL needs to include the name of the folder in order to access it. It is important to double-check the file structure of your repository and make sure the demo live link is pointing to the correct location. In order to fix this issue, simply add the name of the folder that contains the index.html to the URL and it should work as intended.

    Demo live: https://dilawaizmehwish.github.io/QR-code-component/QR%20Code/

  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.

  HTML 🏷️:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

  Alt text 📷:

  • To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Instead, try to make the description as human-readable and understandable as possible.

    The alt attribute should explain the purpose of the image, for example, in the case of a QR code, a description like "qr code to frontendmentor.io" would be more appropriate.

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • In this specific challenge it is not necessary to use a media query, the component can be adjusted for mobile devices using only max-width.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0

  ---

  

  Dilawaiz Mehwish•30

  @dilawaizmehwishPosted almost 2 years ago

  @MelvinAguilar Thank you so much for explaining everything and all the resources :)

  0