Começar como dev front end não é fácil. Tem muitas regras e conceitos para aprender, e durante a prática, seja nos estudos ou no trabalho, sempre nos deparamos com erros e dificuldades. Segue uma lista de alguns exemplos de dificuldades que já enfrentei, principalmente no início da carreira.
- Tentar colocar transition em elementos com display: none
Sempre trabalhei com muitos projetos legados, e tentava replicar em outras partes, o que já achava legal, por exemplo transições CSS. O problema é que a propriedade display não é animável, e o correto é .usar outras propriedades como opacity ou transform.
- Usar medidas fixas em px em blocos, em vez de %, em ou rem
No começo usava px em tudo, em parte porque as primeiras aulas e exemplos que aprendi foram com medidas fixas, em parte porque dava precisão. O problema é que o layout quebrava em telas menores e principalmente em mobile. Se eu não me engano, quando comecei a estudar web, os media queries e mobile first eram ensinados em cursos separados. Então aprendi sobre rem, em, %, etc para deixar os layouts mais fluidos e escaláveis.
- Testar só em um navegador
No começo testava somente no Chrome, mas muitos usuários usavam Firefox e em alguns casos mais raros, Internet Explorer 9(!). Agora continuo usando Chrome como navegador principal, mas sempre testo pelo menos no Firefox também.
- Usar :before e :after em tags como <img> (que não têm filhos)
- Colocar o :hover no elemento pai, em vez do <a> ou <span>
- Tentar usar first-child quando o correto seria first-of-type
