Design comparison
Solution retrospective
Estou iniciando meus passos no front end e confesso que pra concluir boa parte da estrutura do css necessitei recorrer a soluções do Youtube. No entanto, estou bastante empolgado para iniciar novos projetos e também realizar minhas próprias modificações no design deste para que, aos poucos, eu possa "caminhar com minhas próprias pernas" no universo "Web developer". Agradeço aos responsáveis pela iniciativa "FrontendMentor' que, sem sombra de dúvidas, tem muito a acrescentar na vida profissional de todos que utilizam esta excelente plataforma.
Community feedback
- @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 dispositivomax-width
dependendo do dispositivo (mobile / desktop) Aqui está um guia sobre como usarpicture
: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 seuwidth
comomax-width: 900px
(é o tamanho do contêiner) edisplay: 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 helpful0 - @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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord