QR code responsive project

Community feedback

• 

  P

  Austin•430

  @astnioPosted 3 months ago

  This looks great, seems like you did a really good job. Maybe just a nitpick, but the design had 3 lines for the paragraph, while yours only has 2. I was able to achieve that for mine by setting a max-width on the paragraph's container.

  Marked as helpful

  1

  ---

  

  Anderson Moreira Silva•70

  @anderjackiePosted 3 months ago

  Thank you @austinh-io

  I'm sorry I didn't reply earlier, I'm still getting used to the platform.

  I fixed only adjusting the container lateral padding.

  0
• 

  T

  Grace•31,270

  @grace-snowPosted 3 months ago

  You won't have benefitted from the reports because the code for this challenge is buried in the repo where it shouldn't be. Again, I recommend you move this out into it's own repo as it should be and get a clean git history. This will become increasingly important on larger projects.

  But just looking at the QR code solution here are things I noticed that can be improved, I hope these are helpful:

  1. You don't need a role of main on the main landmark. Don't add unnecessary roles.
  2. Ideally this component should sit within main not be main. When we build components like this try to follow that component architecture — the component should be able to have its code lifted out and dropped into a website. It would never be the main landmark on a real site.
  3. Similar, think about how and where this component would be used. It would never act as the main heading on a page so should not have a h1. Use a heading level with a lower importance.
  4. Look up how to write good alt text on images. It should never include words like "image" or "picture" because it's an element that already has an image role. Instead what is important is being clear about what this image is (QR code) and in this case where it goes (to FrontendMentor.io).
  5. Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  6. Font size must never be in px. Use rem instead.
  7. The component must not have a max height or min-width. By doing that you will be breaking the component for some users. We must build components to be robust, able to adapt to the device, user settings or author content provided. It is the browsers job to decide what height this component needs to be. All this card needs is a max-width in rem, optionally a width 100% as well.

  Marked as helpful

  0