Solução responsiva, mobile first, com flex e grid
Design comparison
Solution retrospective
Esse foi o primeiro projeto que fiz a estilização do mobile primeiro, foi diferente, vou tentar fazer o mobile primeiro mais vezes. Também foi a primeira vez que eu tive que trocar de imagem de acordo com a largura da tela.
What challenges did you encounter, and how did you overcome them?Foi um pouco difícil fazer a parte de adicionar ao carrinho, tive que muda-lá várias vezes antes de obter o resultado final que ficasse o mais próximo possível do design.
What specific areas of your project would you like help with?Eu gostaria de feedbacks sobre:
- A semântica do HTML, principalmente na parte que corresponde ao adicionar carrinho, que eu acho que existe um jeito melhor de fazer;
- A estilização para desktop (arquivo responsive.css);
- Sobre qualquer outro ponto que possa melhorar.
Community feedback
- @R3ygoskiPosted 5 months ago
Olá Isabela, bom, mais um projeto bem feito, e esse ficou extremamente semelhante ao design proposto, parabéns.
Sobre suas duvidas, eu tenho algumas coisas a pontuar.
1 . A semântica está em grande parte correta, mas a
<div class="info">
seria uma<article>
, pois o conteúdo ali presente é autoexplicativo e independente. Agora sobre a parte do carrinho, a estrutura está perfeitamente correta, você também poderia fazer isso de uma forma diferente, que é utilizando obackground-image
, mas sendo bem sincero eu não acho que tenha motivos para isso. Ainda sobre o botão de carrinho, nas<img/>
de ícones, nos utilizamos umalt
vazio, ou sejaalt=""
, isso porque não tem pra que um leitor de tela ler esse ícone, então deixamos em branco (sem espaços). E para finalizar, esse botão que na verdade é uma tag de âncora, poderia ser alterada para um<button>
por dois motivos, o primeiro sendo semântico e o segundo sendo de funcionalidade. Usamos a<a>
quando queremos navegar entre páginas, mas quando queremos criar uma utilidade, como a de adicionar um item ao carrinho, nós utilizamos<button>
.2 . Você fez da forma correta, que foi utilizando
min-width
, sempre quando vamos trabalhar com mobile-first, nós temos que fazer dessa exata mesma forma, mas uma sugestão seria a de que ao invés de colocar omin-width
para 1440px, colocar ele para 1024px, pois 1024px já pode ser considerado tela de desktop.3 . Sinceramente, não acho que tenha algum ponto a melhorar, parabéns.
Uma sugestão, quando for usar o
transition
, coloque ele no elemento sem efeito, por exemplo, na suaa
você colocou ele no:hover
, isso faz com que quando o mouse for retirado do elemento, ele abruptamente mude de estilo, o mais interessante talvez fosse deixar maias fluido. Daí caso esteja aplicando otransition
em lugares onde você não queira, daí você pode adicionar outro valor a propriedade, ficando algo assim:div { width: 100%; height: 20px; background-color: red; transition: 0.5s background-color; /* Apenas o background irá ter efeito de transição */ }
Agora uma dica, seu projeto está bom, mas gostaria de trazer uma nova ideia, você pode fazer CSS aninhado, isso é uma coisa super comum em Sass, Less, então se você pretende algum dia aprender sobre isso, aqui como você pode fazer.
Ao invés de fazer isso:
a { color: red; font-size: 1rem; } a:hover { color: blue; font-size: 2rem; }
você pode fazer estilização aninhada (CSS Nesting), por exemplo:
a { color: red; font-size: 1rem; &:hover { color: blue; font-size: 2rem; } }
E é isso, parabéns pela conclusão do seu projeto, e como eu disse no meu último comentário, você está indo muito bem, continue assim. Caso tenha ficado alguma duvida, já sabe, só perguntar abaixo.
Marked as helpful0
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