Solução responsiva, mobile first, com flex e grid

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 6 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 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

  0