html and css

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Oi Valmir Santana, tudo bem? Parabéns pelo desafio!

  A sua solução ficou muito boa, a estrutura html o design também, algo que você pode fazer para melhorar a imagem que precisa mudar entre mobile e desktop é usar <picture> ao invés de <img> dentro de uma div. Por motivos de SEO e mecanismos de pesquisa tipo Google e bing, não é uma boa prática importar esta imagem do produto com CSS, pois isso dificultará a localização da imagem no google. Você pode gerenciar ambas as imagens dentro da tag <picture> e usar o código html para definir quando as imagens devem mudar configurando o dispositivo max-width dependendo do dispositivo (mobile / desktop) Aqui está um guia sobre como usar picture: https://www.w3schools.com/tags/tag_picture.asp

  Para construir este componente com 2 colunas tudo o que você precisa fazer é criar um bloco principal para conter todo o conteúdo (você pode usar <main> para quebrar), defina seu width como max-width: 900px (é o tamanho do contêiner) e display: grid / grid-template-column: 1fr 1fr (isso significa que seu componente terá duas colunas com 50% da largura do contêiner cada uma é 450px)

  Para fazer a parte mobile basta aplicar grid-template-column: 1fr pra deixar o container mostrando apenas uma div por coluna.

  👋 Espero que essas dicas tenham sido úteis e continue codando!

  Marked as helpful

  0
• 

  Valmir Santana•80

  @valmirsantanepePosted about 2 years ago

  Excelente feedback meu amigo... Seguirei muito suas dicas... Obrigado por analisar meu código. É importante demais pra nós que estamos dando nossos primeiros passos no front, receber comentários de pessoas mais experiente, seja pra fazer um critica, seja para um fazer elogio. Quero desenvolver minhas habilidades para poder ajudar outras pessoas que estejam iniciado.

  0