QR code component using HTML and CSS

Community feedback

• 

  Tsiangana Zau•300

  @TsianganaPosted 12 months ago

  Congratulations on your first project, but I can tell you that we can improve it much more in order to gain more experience. When analyzing your code I could see that you used the margin: auto property in the section in order to center it, nice idea to use, but instead of using the margin property you can center it with flex, which is much more advisable to use It is simpler to use in all cases, I will leave an example of how it would be applied in your case, and I will leave the rest to your investigations:

  -- body { background-color: hsla(207, 44%, 81%, 0.5); display: flex; align-items: center; juststify-content: center; }

  section { background: white; width: 260px; border-radius: 10px; padding: 13px 10px; font-family: var(--font); text-align: center; }

  Marked as helpful

  1

  ---

  

  Rebeca Nepomuceno•30

  @rebecanepomPosted 12 months ago

  @Tsiangana Thanks so much for the suggestion!

  0
• 

  Renan Rodrigues•960

  @irenanrodriguesPosted 12 months ago

  Oi Rebeca, tudo bem? Parabéns por conseguir concluir o desafio, também estou estudando JavaScript, com o Profº Guanabara hahaha. Tenho algumas dicas que você pode usar.

  Recomendo para esse desafio, você estruturar seu HTML assim:

  <main>
    <img>
    <h1>
    <p>
  </main> 
  

  Na sua imagem defina o tamanho para width: 100%, assim ela acompanha sempre o tamanho do seu card e fica responsiva.

  Para centralizar o card no centro, você pode utilizar o flexbox ou Css Grid. Como o Guanabara ainda não ensinou sobre o assunto, recomendo esses vídeos Css Grid e Flexbox da Origamid.

  Marked as helpful

  0

  ---

  

  Rebeca Nepomuceno•30

  @rebecanepomPosted 12 months ago

  @irenanrodrigues Oi, que legal ksksks. Muito obrigada pelas sugestões e vídeos recomendados :)

  0
• 

  Camoralesh27•90

  @Camoralesh27Posted 12 months ago

  Hey, you do it great!

  Just some feedback: In your style.css, line 11, you have a margin for the body. Use this

  body { background-color: hsla(207, 44%, 81%, 0.5); margin: 70px auto;
  }

  instead of this: body { background-color: hsla(207, 44%, 81%, 0.5); margin: 70px; }

  Auto will center your content in horizontal axe.

  ---

  Next. If you want to improve your HTML, you can change the section for main because is your main content. And the p class= "p1" for h1 class="p1". This'll make your site more accessibility for people that use other equipment to read your site.

  You can read more about this here: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

  ---

  I hope helped you. Greetings.

  Marked as helpful

  0

  ---

  

  Rebeca Nepomuceno•30

  @rebecanepomPosted 12 months ago

  @Camoralesh27 Thanks so much for the suggestion!

  1