Jean Gabriel Rodrigues

Latest comments

• 

  Nerea•80

  @nereahmSubmitted about 2 months ago

  

  Solución para dispositivos móviles que utiliza CSS Grid

  2

  10
  

  Jean Gabriel Rodrigues•330

  @theJRodriguesPosted about 2 months ago

  Um bom trabalho, porém eu mudaria algumas coisas por questões de responsividade.

  HTML Em html eu apenas adicionaria o atributo alt na tag imagem, por conta de acessibilidade, e utilizaria a tag article para fazer o container do card e utilizando a tag figure para a imagem, ao invés de divs, fazendo mais sentido em questões de semântica.

  CSS Utilizaria a seguinte estilização para o card e a imgem do QR Code. Na classe .qrCard eu utilizaria um width de 100% para ficar responsivo com o redimensionamento da tela e utilizaria o max-width para limitar o tamanho. Com isso não é necessário o display grid para controlar o tamanho da imagem, pois a imagem redimensionará junto com a largura do card.

  Seu código

  .qrCard{
      background-color: white;
      width: 18rem;
      height: 29rem;
      display: grid;
      grid-template-rows: 60% 40%;
      justify-content: center;
      align-items: center;
      text-align: center;
      border-radius: 15px;
      padding: 12px;
  }
  
  .imagen{
      display: flex;
      justify-content: center; 
      width: 100%; 
      height: 100%;
      margin: 0; 
  }
  .imgQr{
      margin: 0;
      height: 100%;
      max-width: 100%;
      border-radius: 15px;
  }
  

  Como eu faria

  .qrCard{
      background-color: white;
      width: 100%;
      max-width: 18rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border-radius: 15px;
      padding: 12px;
  }
  .imagen{
      width: 100%;
  }
  .imgQr{
      width: 100%;
  }
  

  Não foi necessário usar height na classe .qrCard pois a altura se adequará ao conteudo.

  Espero ter ajudado!!

  Marked as helpful

  0
• 

  Adriano•330

  @adriano-wbSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud of having done this form so accurately, of course it is not one of the best, but I can see the difference in my ability between today and two years ago. I feel that I need to learn new technologies to benefit from the time spent developing projects and the quality of my code for other developers.

  What challenges did you encounter, and how did you overcome them?

  The only challenges were sending the form, as I am a perfectionist, I thought about sending it for real, however, I had to improvise using fetch to display the success message.

  What specific areas of your project would you like help with?

  I would like to know which technologies could help me even more in this type of project. What are the current trends?

  

  Responsive contact form with HTML, CSS, and JS

  #fetch

  2

  30
  

  Jean Gabriel Rodrigues•330

  @theJRodriguesPosted about 2 months ago

  Um bom código man, parabéns, só teria algumas coisas que eu mudaria no html e css.

  HTML

  1- Inputs dentro das labels: Para um bom link entre a label e o input, podemos utilizar o input já dentro da label, isso faz com que ao clicar em cima do texto da label, ele selecione o input, vou dar um exemplo no seu código.

  Seu código:

  <div class="nomes-flex__item">
     <label for="sobreNome">Last Name <span class="prefixo">*</span></label>
     <input type="text" id="sobreNome" name="ultimoNome" maxlength="15" required>
     <span class="atencao-sobreNome-vazio">This field is required</span>
  </div>
  

  Melhor:

  <label>
   <h2>Titulo da label</h2> 
   <input type="text" name="ultimoNome" maxlength="15" required>
   <span class="">This field is required</span>
  </label>
  

  Quando você utiliza o input dentro da label, não é necessário utilizar o atributo "for" nem o "id" no input para que o link funcione.

  2- Fieldset: O fieldset serve para agrupar elementos realcionados em um formulário. Como no caso dos inputs de first name e last name, onde você pode utilizar um fieldset para eles dois e depois um fieldset para o input de e-mail, conforme o código a seguir:

  <fieldset>
   <label >
  	<h2>First Name *</h2>
  	<input type="text" name="primeiroNome" maxlength="15" required>
  	<span class="atencao-nome-vazio">This field is required</span>
   </label>
  
   <label >
  	<h2>Last Name *</h2>
  	<input type="text" name="ultimoNome" maxlength="15" required>
      <span class="atencao-sobreNome-vazio">This field is required</span>
   </label>
  </fieldset>
  

  Teria mais algumas coisas para falar, mas acredito que esses são os principais pontos da parte de HTML.

  CSS

  Para o css, seria bom em pensar uma maneira de diminuir a complexidade da escrita do css, fazer em ordem, conforme no html.

  Um bom ponto também seria dar nomes as classes e inglês e ao invés de estilizar os inputs utilizando input[type=...] criar uma classe, e incluir dentro do HTML, pois ao bater o olho no HTML da pra ver que ele possuí um estilo, não sendo necessário procurar em outro arquivo.

  Um exemplo bom seria esse:

  Seu código:

  input[name=primeiroNome],
  input[name=ultimoNome],
  input[name=email] {
  ...
  }
  

  Melhor:

  .inputText{
  ...}
  

  E incluir essa classe nos inputs necessário

  Vi que você utilizou e-mails para os radio button e checkbox por conta das cores. Nesse caso não é necessário, basta apenas estilizar com accent-color: 'cor'

  Não consegui olhar seu script, portanto não conseguirei opinar. Enfim, sempre desenvolva pensando se uma pessoa leiga iria entender o seu código, não precisa ser o mais rápido, pois as vezes você pode ser rápido para escrever, mas irá perder todo o tempo que ganhou, tentando dar manutenção no código.

  Espero ter ajudado! Tmjj!

  Marked as helpful

  0