Projeto Cartão de Crédito: Estilização Responsiva e Interativa

Community feedback

• 

  P. Ricardo•2,370

  @pRicard0Posted 6 months ago

  Você pensou certo. Eu pelo menos acho melhor começar mobile-first mesmo. Quando tu pega um Framework CSS como o Tailwind CSS... as medias queries, as classes, tudo é pensado com você começando mobile first. O livro deles... o Refactoring UI, é pensando nessa abordagem também.

  Eu vou dizer algumas coisas que é bom não deixar passar em branco.

  • Dentro do <form> é bom englobar tudo em um <fieldset> embora seu formulário não exija outras seções.
  • Dentro do <fieldset>, é bom que tenha uma <legend> que é basicamente a label para o fieldset. É na legend que você diz o que toda aquela seção se trata. Geralmente isso é para acessibilidade. Você deixa a legend invisível por questões de design para que apenas possa ser lida por leitores de tela para auxiliar pessoas com deficiências visuais.
  • Existe algo que eu acho que você não está ciente. No botão "confirm"... você fez certo porque quando você não especifica o type do botão ele vem com type="submit" por padrão. As vezes é bom deixar especificado. No outro botão "continue", aquele botão não é associado a formulários então você não pode deixar ele com o padrão submit. Você tem que botar type="button". Isso é apenas boa prática

  Marked as helpful

  1

  ---

  

  Ravel Silva•80

  @ravelsilvaPosted 6 months ago

  @pRicard0 Muito obrigado pela ajuda. Vou revisar o livro Refactoring UI, nunca tinha escutado sobre ele.

  Quanto <form> e o <fieldset> vou procurar entender um pouco mais, até então não tinha utilizado em nenhum projeto, mas parece ser bem interessante.

  Sobre o type="button", vou modificar no projeto, obrigado pela informação.

  0
• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 6 months ago

  Olá Ravel, parabéns pela conclusão do seu projeto, ele ficou muito bom, e gostei desse toque mais original que você deu pra ele.

  Sobre o problema que você mencionou está relacionado ao seu <div class="name-date">, ele estava com o width: 400px e como essa é uma medida absoluta, ele acabou não se adaptando ao tamanho da tela, mudar para width: 100%; irá resolver o problema, e pode mudar sem ser pelo @media, que isso não irá quebrar o Layout ou deixar algo diferente.

  Agora sobre a parte da responsividade, fiz alguns testes para ver como poderia deixar algo mais confortável entre o 375px até o 1440px, então optei por mudar a @media para 1110px, e no main eu alterei o width e heigth para 100%, que daí ficou responsivo em várias telas. Exceto para 320px, e é importante ficar para todas acima de 320px.

  Se você quiser que fique esse fundo roxo (que eu sinceramente acho interessante) você pode mudar o width e height para 90% por aí, mas lembre-se de mudar o @media para se adaptar melhor.

  Edit: Uma sugestão, você pode mudar para que a função de preencher o cartão seja acionada a cada tecla pressionada ou seja utilizando o input em um listener, dessa forma fica mais dinâmico. Mas aí você teria que modificar o seu JS, mas bom é só uma sugestão, do jeito que está, já está ótimo.

  E novamente, meus parabéns, seu projeto ficou muito bom, se precisar de mais alguma ajuda, por favor, só comentar abaixo que tentarei ajudar da melhor forma possível.

  Marked as helpful

  1

  ---

  

  Ravel Silva•80

  @ravelsilvaPosted 6 months ago

  @R3ygoski Muito obrigado pelo reconhecimento e pela ajuda. Gostei das dicas, vou realizar os testes.

  1