@R3ygoski
Posted
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 o background-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 um alt vazio, ou seja alt="", 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 o min-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 sua a 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 o transition 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 helpful
