QR Code Component

Community feedback

• 

  Alamin•1,980

  @CodeWithAlamin

  Posted over 2 years ago

  Hi Muhammad Abdullah👋 Great job on completing this challenge! 🥳

  I would like to share a few suggestions on this solution if you don't mind.

  HTML:

  • Use semantic elements to clearly structure the content of your webpage. For example, instead of using a div element to contain the main content, you could use a main element. This will make it easier for other developers to understand the structure of your webpage and for search engines to understand the content of your webpage.
  • Consider using the alt attribute for images to provide a text alternative for users who cannot see the image. This is especially important for users with visual impairments who use screen readers to access web content.

  CSS:

  • Use class names that are descriptive and specific to the purpose of the element. For example, instead of using a class name like container, you could use a name like product-description-container that clearly indicates the purpose of the element. This will make it easier to understand the purpose of the element and to maintain your stylesheet in the long term.
  • Use the box-sizing property to control the size and dimensions of elements. By setting the box-sizing property to border-box, you can ensure that the width and height of an element includes the padding and border, rather than just the content. This can be helpful when you are trying to size elements precisely.
  • Use the font-weight property in combination with font families to give your text a clear hierarchy and improve readability. For example, you could use a font-weight of 700 or bold for headings and a font-weight of 400 or normal for body text. This will help users to quickly scan and understand the content of your webpage.
  • Use the rem unit for font sizes to create a consistent and responsive typography system. The rem unit is relative to the root font-size, which means that you can adjust the font size of the entire webpage by changing the root font-size in one place. This can be helpful when you want to create a consistent and responsive typography system that adapts to different screen sizes.

  Overall, this is a very well done solution to the challenge. Great job!

  I hope this feedback was helpful. 😊 Keep up the good work!👍

  10

  Marked as helpful
• Account deletedPosted over 2 years ago

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

  • The only heading ⚠️ in this component is "Improve your front-end skill by building projects" , everything else should be wrapped in an paragraph element.

  • 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.

  • Change ⚠️ width to max-width in your component’s container to make it responsive.

  • Change ⚠️ width to max-width: 100% in your image to make it responsive.

  • A media query is not needed ❌ for this challenge. Using responsive properties will do in making your content responsive.

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

  Happy Coding! 🎆🎊🪅

  10

  Marked as helpful