Product preview card component (html + css)
Design comparison
Solution retrospective
English: I'm totally open to criticism and suggestions about the code! Português: Estou totalmente aberto a criticas e sugestões sobre o código!
Community feedback
- @correlucasPosted over 2 years ago
👾Oi Luciano, beleza? Parabéns pela sua nova solução.
Como o Felipe falou no comentário anterior realmente ficou faltando o alinhamento, vou te dar algumas dicas em relação ao seu código.
Sempre que você for fazer um desafio tipo esse, tenta pensar em quais são os elementos extremamente necessários afim de evitar colocar aquela div a mais e deixar seu html muito longo, por exemplo, nesse desafio tudo que você precisa são uma
<main>
pra segurar as duas colunas e uma<section>
pra cada coluna, na coluna de text pode deixar tudo solto exceto a parte do botão que precisa de uma div.Ao invés de puxar as imagens pelo css você pode usar
picture
pra segurar as imagens desktop e mobile dentro de um mesmo elemento e ainda definir quando elas devem ser trocadas de acordo com o tamanho de tela e dispositivo.Caso você não conheça ainda a tag picture, aqui um guia de como usá-la:
https://www.w3schools.com/tags/tag_picture.asp
Espero ter ajudado e continue no foco!
Marked as helpful1@LucianoOliveira1Posted about 2 years ago@correlucas Valeu Lucas!! Eu tenho tido um pouco de dificuldade na hora manipular as imagens e pra organizar o código mesmo, com isso acabo colocando coisa demais. Mas com as suas dicas e do Felipe tenho certeza pros próximos desafios eu já consigo melhorar nesses pontos. Obrigado pelo feedback!!
0 - @loopchavesPosted over 2 years ago
Como vai, Luciano! Seu layout ficou muito bom.
Em relação ao seu código, você pode usar o
flex
nobody
pra centralizar todo o conteúdo na tela. Precisa definir o tamanho do elemento pai (nesse caso obody
) porque o flex vai centralizar de acordo com esse valor.body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
Nesse exemplo 100vw e 100vh vai ocupar todo o espaço da tela, "vw" e "vh" siginifiam "view width" e "view height" respectivamente.
Outra dica é usar a tag
<main>
invés de<section>
. Isso optimiza seu site para recursos de acessibilidade.Por último, evite usar
<br>
para espaçar os elementos. Você pode substituir isso pormargin
oupadding
no CSS.Marked as helpful1@LucianoOliveira1Posted about 2 years ago@loopchaves Fala Felipe, muito obrigado pelas dicas! Inclusive já até as usei no outro desafio!!
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