Html5 Css3 Flexbox Media Queries

Community feedback

• 

  Renan Rodrigues•960

  @irenanrodriguesPosted about 1 year ago

  Oi Pamella, tudo bem? Parabéns por completar o desafio. Tenho algumas dicas que você pode estar usando no seu código.

  No lugar da sua div.verde, para a imagem do produto, você pode usar a tag semântica <picture>. Melhorando a acessibilidade, pro pessoal que usa leitores de tela.

  Comece a desenvolver seus projetos usado HTML semântico. Assim você melhorar a acessibilidade e a organização da sua página, deixando ele um pouco mais limpo, sem o uso de muitas tags divs.

  0

  ---

  

  Pamella•20

  @PamellaMoraesPosted 11 months ago

  Oi, @irenanrodrigues! Obrigada por suas dicas. Isso me ajuda muito a evoluir nos estudos!

  0
• 

  Luan Barcaça•500

  @barcacaPosted about 1 year ago

  Parabéns por concluir o desafio!

  Aqui estão algumas sugestões:

  • Você tem código repetido no responsive.css para a regra de media query (max-width: 768px) . O bloco de estilo dentro desse bloco de mídia está repetido duas vezes.

  • Considere escolher nomes de classes mais descritivos. Por exemplo, em vez de verde e branco, use nomes que descrevam o conteúdo ou a finalidade desses elementos. Por exemplo, você poderia usar algo como imagem-fundo e conteudo.

  • Considere evitar o uso do caractere "ç" em classes e IDs no CSS e HTML. Embora seja tecnicamente possível, é uma prática comum evitar caracteres especiais, como acentos.

  • Seu uso de media query parece estar correto, mas há redundâncias nas regras. Concentre-se em modificar apenas o necessário para a adaptação do layout, evitando duplicações de código. Aqui está um exemplo para simplificar:

  @media screen and (max-width: 768px) {
      #container {
          flex-direction: column;
      }
  
      .verde, .branco {
          width: 100%;
          border-radius: 10px;
      }
  
      .verde {
          height: 250px;
      }
  
      .branco {
          height: 400px;
      }
  
      .btn-compras {
          margin-top: 5px;
      }
  }
  

  Essa abordagem reduz a duplicação de código, mantendo a adaptabilidade do layout para telas menores.

  Mandou bem, continue assim!

  0

  ---

  

  Pamella•20

  @PamellaMoraesPosted 11 months ago

  Oi,@Barcaca ! Muito obrigada por suas dicas. Isso me ajuda muito a evoluir nos estudos!

  0