QR Code Component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello dan,

  Congratulation on completing your first frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

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

  • It should indicate where the Qr code navigate the user : like QR code to frontend mentor. It should not include the word image or photo as It’s going to be obvious to either a person or a machine when something they're accessing is alt text.

  • There are some extra div’s need to be removed.

  CSS:

  • To center the component on the middle of the page you may use the flex/grid properties with min-height 100vh; to the body. Also you can add a little padding to the body to prevent the card from hitting. Remove the .container is unneeded
  • Consider using rem 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.

  • height: 500px; It's not recommended to set height to component, let the content of the component define the height.

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

  • 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 these , Good work! Hopefully this feedback helps

  0

  ---

  

  Dan•30

  @txhawgPosted over 2 years ago

  @PhoenixDev22

  Thanks very much for the feedback. It's now obvious to me I misunderstood some of the requirements. I thought the idea was to replicate EXACTLY the challenge output, therefore I used explicit sizing. I also had some sloppy editing for the code because I lost some of my work when I experienced a system crash.

  0