QR Code component solution using HTML and CSS

Community feedback

• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 10 months ago

  Oi Camila!

  Seu projeto ficou excelente! Parabéns!

  Tenho apenas uma sugestão:

  • Pra tornar seu código HTML mais semântico, use main pro conteúdo principal ao invés de uma div.

  Essa mudança de tag não gera nenhum impacto visual mas torna o seu código HTML mais semântico e melhora a otimização SEO e accessibilidade do projeto.

  Espero que ajude!

  Fora isso, ótimo trabalho!

  Marked as helpful

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • In this type of challenge, a media query is not necessary since the mobile and desktop designs are exactly the same. If you need a resizable component, all you have to do is limit the width using max-width, removing max-height: 70%; and min-width: 200px; as they may cause issues. Also, consider making the text slightly larger for better readability.
  • Never use overflow: hidden; on the body element; it prevents users from scrolling on any device. Even on mobile devices where the content is large, scrolling is necessary.
  • Use min-height: 100dvh; instead of height: 100vh;. height prevents resizing and can cause content overflow if it grows too much.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Camila Kersten•20

  @camilakerstenPosted 10 months ago

  Thanks @MelvinAguilar! Those are very thoughtful considerations, I will implement them in my future projects.

  0
• 

  Lekka Audisy•60

  @lekkaaudisyPosted 10 months ago

  For me as a beginner, starting with the desktop version and then using media queries for mobile is a recommended approach. This allows you to establish a strong foundation and prioritize content for different screen sizes.

  Mobile-first development can indeed be a beneficial approach. It allows you to focus on essential features and optimize the performance for mobile devices. However, it's crucial to assess your project requirements and target audience to determine the most suitable approach.

  Marked as helpful

  1