QR code component using Html and CSS | Mobile first design

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Piyush jain,

  Congratulation on completing this challenge. I have some suggestions regarding your solution:

  • Use the <main> landmark to wrap the body content as HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  To tackle the accessibility issues:

  • Page should contain <h1> . In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-only class hidden visually and present for assistive tech users. And use <h2> instead of <h1>

  • The alternate text should be present in that image as it’s an important content (informative image)

  CSS:

  • Consider using min-height: 100vh instead of height: 100vh to the body , that let the body grows taller if the content of the page outgrows the visible page.

  • width: 300px;an explicit width is not a good way. consider using max-width to the card instead

  • To keep the specificity as low/flat as possible, the better way to style your HTML elements is using single class selector, so that it could be more manageable and reusable.

  • Consider using rem and em as they are flexible units, instead of absolute units px, specially for font size.

  If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • Using percentages for widths, using max-width and avoiding to set heights for the components , with these things is the key to mastering responsive layouts.

  Aside from these , great job on this one. Hopefully this feedback helps

  Marked as helpful

  0

  ---

  

  Piyush jain•220

  @PiyushJain01Posted over 2 years ago

  @PhoenixDev22 Thanks for your suggestions. I'll fix all these mistakes 👍

  1