QR code component

Community feedback

• 

  P

  Kamran Kiani•2,700

  @kaamiikPosted 25 days ago

  Congratulation for doing this challenge. Some notes for your code:

  HTML Structure & Semantics

  • Image descriptions should be meaningful and descriptive:

    • Use alt text that explains the purpose: alt="QR code to Frontend Mentor website"
    • Avoid generic descriptions like "image" or "picture"

  • Follow proper heading hierarchy:

    • Each page should have one <h1>
    • For components that are part of a larger page, use <h2> instead
    • This maintains proper document structure while reflecting component hierarchy

  • Keep HTML and CSS in separate files

  ---

  CSS Best Practices

  Reset & Base Styles

  • Start with a proper CSS reset (Andy Bell or Josh Comeau recommended)
  • This ensures consistent styling across browsers

  CSS Units Best Practices

  • Use relative units for better accessibility and scaling:
    • Convert font-size and max-width values from px to rem
    • This allows text and layout to scale with user preferences
    • Read more about unit best practices here

  Height Units Best Practices

  • Use min-height=: 100vh instead of fixed height for viewport-height elements:

  Image Handling

  • Keep image styling minimal and responsive:

  img {
    max-width: 100%;
    display: block;
  }
  

  This ensures:

  • Images scale properly
  • No unwanted whitespace below images
  • Content adapts to different screen sizes

  ---

  • No need to wrap image in a div.

  Marked as helpful

  1

  ---

  

  Khanh Tran•70

  @big-hero-devPosted 24 days ago

  @kaamiik Thanks a lot for your help! It's been really useful for me.

  1

  

  P

  Kamran Kiani•2,700

  @kaamiikPosted 24 days ago

  @big-hero-dev Thanks. Your code is more organize now. Just two issue I see:

  • max-width unit should be in rem.

  ---

  • Never change html font size like what you did font-size: 62.5%. You never need to change html font size and If you do may cause serious problems in your page. Read this article about this hack: https://fedmentor.dev/posts/rem-html-font-size-hack/

  Marked as helpful

  1

  

  Khanh Tran•70

  @big-hero-devPosted 24 days ago

  Thanks @kaamiik! I've updated the rem calculation based on your feedback.

  1