Frontend Mentor QR Code - HTML&CSS

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Delete the max-height: 470px; from the component's container, as it is not needed.

  • The Picture element is not needed for this challenge.

  • Change width to max-width: 100% in your image to make it responsive. You will also want to remove the height as it is unnecessary.

  • The Alt Tag description for the QR image needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🍂🦃

  Marked as helpful

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, @iulias17! 👋

  Congratulations on completing your second Frontend Mentor challenge! 🎉

  First, I recommend updating the URL for the GitHub repository to https://github.com/iulias17/qr-code-component-main. There's no need for the URL to be on the index.html file.

  Now, some suggestions for improvements.

  • meta charset should be the first child element of the head element. It is important to get discovered as soon as possible by the browser. I recommend reading <meta>: The metadata element - HTML: HyperText Markup Language | MDN #attr-charset
  • The same goes for the meta viewport, it should be discovered as soon as possible. Put this after the meta charset.
  • Like @vcarames has said earlier, there's no need for picture element. Only use it when there are multiple versions of the same image.
  • Put the main element inside the body element (not the other way around).

  I hope this helps! Happy coding!

  Marked as helpful

  0