QR Code Component

Community feedback

• 

  

  Gwenaël Magnenat•1,540

  @gmagnenat

  Posted about 1 year ago

  Hi, congrats on completing the challenge ! Your solution looks great and close to the design. However there are some issues you should check and fix before moving to other challenges. I hope this list will help you improve this solution and your future ones.

  Does the solution include semantic HTML?

  • a <main> landmark is missing. You should always add one. The main element represents the main content of the body of a document or application. -w3c
  • instead of just indicating a QR Code in the alt attribute you can also indicate where this QR Code will lead to.

  Is it accessible, and what improvements could be made?

  • Currently the layout is breaking if the user is changing the default browser font-size.
  • You should set a max-width in rem on the card. Remove the fixed width in pixel.
  • You need to remove the height you have set in pixel. Let the card scale with its content. If the font size is increased having a fixed height will make the text overflow out of the card.
  • Don't use pixels for your font size. it's the same issue as above. Using pixel force the sizes to stay at that value. It will not scale and not respect user preferences. Why font-size must NEVER be in pixels
  • Many user update these settings to increase the size of the text on websites so its something to take in consideration and to understand.

  Does the layout look good on a range of screen sizes? yes

  Is the code well-structured, readable, and reusable?

  • You should add a modern css reset at the beginning of your stylesheet to have consistency over browser default settings. Check Josh Comeau or Andy Bell they both are great.
  • try to use low specificity first in your css before increasing only if necessary. You can add classes on your different elements to target them directly with a specificity of 10. Try not to style html element directly other then resets or if you are sure its a global style you want to apply on the whole website. It will improve the readability and maintainability of your code.

  /** examples **/
  [x] .card img <--- specificity of 11
  [✓] .card__image <--- specificity of 10
  

  Does the solution differ considerably from the design?

  • it looks close to the original. You can reduce the text width using ch unit if you want to have it on one extra line. the text in your solution looks wider.

  I hope you find these comments helpful. This challenge seems easy at first but it's the perfect place to fix some common issues before having more complex solutions to debug.

  Happy coding !

  10

  Marked as helpful