QR Code Component using HTML and CSS.

Community feedback

• 

  Bernardo Poggioni•5,390

  @R3ygoskiPosted about 1 month ago

  Olá Felipe, parabéns pela conclusão do projeto.

  Você citou ali que teve dificuldades em trabalhar com a sobreposição, mas nesse desafio, não era necessário utilizar posição, tanto que acredito que o problema esteja relacionado a parte branca do card, o fundo dele, correto? Bom, o problema que você está tendo é devido a estrutura do seu HTML estar levemente errada. O mais correto era você ter criado o card, e ter colocado os elementos como a imagem, os textos dentro dele, ou seja, você poderia utilizar sua div.container como o fundo do card.

  Eu fiz algumas alterações no seu projeto, como foram pequenas, eu posso passá-las aqui, mas se desejar, eu posso refazer seu projeto, fazer as correções, comentá-las e enviar no Github.

  As alterações que fiz foram as seguintes:

  .container {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white;
      width: auto;
      border-radius: 12px;
      padding: 0.75rem;
      gap: 1rem 0;
  }
  
  img {
      width: 200px;
  }
  

  Também deletei o div.rectangle-qrc e div.qr-code, pois não eram mais necessários.

  E é isso, novamente parabéns pela conclusão, continue praticando e se aprimorando, eu não dei algumas outras dicas pois quis focar na parte mais central do projeto, mas no próximo projeto que você fizer, tentarei ajudar com a parte de semântica HTML e acessibilidade. Caso tenha ficado qualquer dúvida, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  1

  ---

  

  Felipe J. Santos•10

  @FelipeJSantos-ProgrammerPosted about 1 month ago

  @R3ygoski Opa Bernardo! Obrigado pelo feedback! Sim exatamente referente ao fundo do card, mas poderia ser qualquer elemento que precise ficar sobreposto a outro. Fico um longo tempo tentando fazer funcionar.

  Quanto aos elementos como imagem, sempre fico na dúvida quando utilizar, pois uns falam que o design é somente para referência, que criar tudo no código deixa o projeto mais fluido e já outros dizem que pode utilizar, acabo nunca sabendo.

  Esta é a segunda versão deste projeto e foi a melhor que consegui fazer até agora. Agradeço muito pela correção, mas se puder mexer no projeto dentro do github vai me ajudar mais a compreender qual a melhor forma de preparar os códigos. Se possível deixe o meu "index.html" como arquivo readme guardado na pasta md para eu comparar, já existe até um "oldindex" lá que é a primeira versão do meu código que deixei pra ver minha evolução.

  Mais uma vez obrigado!

  1

  

  Bernardo Poggioni•5,390

  @R3ygoskiPosted about 1 month ago

  Olá novamente Felipe, não há de que, sempre feliz em ajudar outros dev's.

  Sobre sua dúvida quanto ao position, ele é relativamente simples. Você vai utiliza-lo quando você quer posicionar um elemento de uma forma mais "livre" sem seguir o caminho natural do HTML que seria de cima pra baixo. Bom, se eu for explicar aqui vai ficar muito longo, então deixarei um vídeo que talvez ajude bastante a esclarecer sobre position. Serliv - Position.

  Sobre isso que você falou da imagem, eu não entendi muito bem, então vou supor que você esteja falando das imagens dentro da pasta "Design", elas servem para referência, você pode fazer de forma 100% idêntica ao design, mas não é obrigatório, eu por exemplo, tento alterar algo nas cores para deixar com um aspecto que mais me agrada, você pode ver isso nesse meu projeto: Contact Form.

  Eu fiz de uma forma que eu achei que era mais agradável, mas ainda mantive a mesma estrutura. E recomendo fortemente que tente sempre criar coisas novas, mas manter a estrutura proposta.

  Caso você utilize o VSCode, você não precisa comparar no olho, pode utilizar uma extensão chamada Select Compare Tabs, ela é ótima para ver alterações entre arquivos. Mas mesmo assim, deixarei o index.html original no oldindex.md.

  E é isso, acabei de postar um Issues no seu Github, você pode acessá-lo aqui, nele contêm o projeto corrigido. Projeto Corrigido

  Marked as helpful

  1

  

  Felipe J. Santos•10

  @FelipeJSantos-ProgrammerPosted about 1 month ago

  Obrigado meu amigo, vou conferir tudo com calma! Essa extensão vai me ajudar muito também!

  1