QR code component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Fala César, tudo bem? Parabéns pelo desafio!

  O seu componente já está com o design prontoum bom exercício pra melhorar seu código, seria criar a estrutura mais limpa o possível e reduzir seu código ao máximo. Por exemplo, você poode segurar todo conteúdo em um bloco só usando (<maain> ou <div>) nesse caso vamos usar <main> por que é uma tag semântica. Outra coisa é colocar o h3 como h1 já que se trata do título principal da pagina. Se você notar, nem precisa adicionar nenhum div além da principal pra segurar o conteúdo (img, h1 e p).

  👋 Espero ter ajudado e continue no foco!

  00
• 

  Felipe de Jesus Campos•70

  @felipejesus-front

  Posted almost 3 years ago

  Fala Cesar! blz? Muito legal seu código! Cara, tenho uma dica bem simples, porém muito importante pra te dar. Sua pagina começa a quebrar quando fica abaixo do tamanho do container com classe "principal", nela vc esta usando um "width: 300px", quando vc define um width ele vai seguir esse width até o fim do mundo, pelo componente ser pequeno acaba passando despercebido, porém num componente maior você veria isso com mais facilidade. Aconselho, sempre que possível usar "max-width" ao invés de width, pois como vc está definindo uma "largura máxima" o seu componente sempre vai ser mais responsivo conforme a tela diminui.

  Outra coisa importante no html é a semântica das tags. As tags html tem seus significados, normalmente interpretado por motores de busca como o google, ou por softwares de leitura de tela, usado por deficientes visuais, então usar as tags corretas ajuda demais na acessibilidade do seu codigo, fazendo por exemplo que seu site/conteudo seja encontrado pelo google mais facilmente.

  como corrigir isso? No seu conteúdo principal, ao invés de usar uma div, tente usar a tag <main>, pois ela indica que aquele é seu conteúdo principal nesta pagina.

  Colocar o titulo da pagina em um <h1> também ajuda nisso.

  Vou deixar um link para o caso de você querer entender melhor sobre isso: https://www.devmedia.com.br/html-semantico-conheca-os-elementos-semanticos-da-html5/38065

  lembre-se não é preciso gravar tudo isso, só entender já basta, na hora de codar, quando esquecer é só pesquisar no google que ta de boa! abração, meu mano! tbm estou iniciando! então tenhamos um bom aprendizado!

  00