cartão de produto responsivo usando grid e flexbox

Community feedback

• 

  Thomas Brito•240

  @Thomas-BritoPosted 18 days ago

  Luiz, parabéns pelo bom trabalho! Você se desenvolveu bem nesse desafio. Gostaria de te dar apenas algumas dicas, que também me ajudam a resolver esses desafios:

  1. Flex e Grid: É bom entender bem a diferença entre essas duas formas de visualização. De acordo com o site W3Schools, o display: flex; é útil para layouts unidirecionais, ou seja, com linhas ou colunas. Neste desafio por exemplo, essa visualização serviria bem, porque na versão desktop o design é em linha e na versão mobile é em coluna. Já o display: grid; é próprio para layouts bidirecionais, com linhas e colunas, como em outros desafios aqui do Frontend Mentor. E é claro que o grid é mais difícil de desenvolver do que o flex. Então, entender essa diferença ajuda na hora de escolher qual usar, e poupa tempo e trabalho em projetos mais simples.

  2. Unidades de medida absolutas vs relativas: Percebi que você costuma usar unidades de medidas absolutas, como px. Mas por questões de acessibilidade, é melhor usar unidades relativas, como rem. Se você usa o VS Code para escrever os códigos, pode baixar uma extensão que converte mais facilmente os valores entre as unidades de medidas. Se esse não for o caso, esta página do W3Schools pode ser de ajuda.

  3. Variáveis: Você também pode usar var(--variáveis) no CSS para reutilizar valores que aparecem em vários lugares na página, como cores e fontes. Isso também poupa tempo e trabalho, e torna o código mais fácil de atualizar.

  Reforço que você se saiu muito bem neste desafio. Espero que essas dicas possam ser de ajuda para que você aprimore ainda mais a qualidade do seu trabalho. Sucesso para você! 🚀

  Marked as helpful

  0