Criar um simpático pinguim que movimenta a nadadeira direita, simulando um aceno, e que aumenta de tamanho conforme a duração do clique do mouse.
Este é o 19º curso da trilha Responsive Web Design Certification, com foco no aprendizado e aplicação de transformações em CSS.
Neste último projeto do tipo step by step da trilha, o objetivo é consolidar e aplicar grande parte dos conceitos estudados até aqui. Você aprenderá a usar transformações e animações CSS para:
- Posicionar e redimensionar as partes do pinguim;
- Criar um plano de fundo personalizado;
- Animar o pinguim de forma interativa e criativa.
Os principais tópicos abordados foram:
- Position: para organizar os elementos do pinguim;
- Z-index: para controlar a sobreposição das camadas;
- Animation: para configurar os movimentos;
- @keyframes { }: para detalhar os passos da animação;
- Transform: para rotacionar (rotate), redimensionar (scale) e inclinar (skew) os elementos;
- Transition: para suavizar as transformações.
Mais uma vez o freeCodeCamp se destacou pela criatividade e didática. O projeto não apenas ensina as propriedades de forma clara, mas também demonstra como aplicá-las em projetos pessoais, reforçando a importância da prática para o aprendizado.
Este projeto foi desenvolvido conforme as orientações do curso, sem alterações adicionais.
Agradeço ao freeCodeCamp por oferecer cursos gratuitos de altíssima qualidade, que não apenas ampliaram meus conhecimentos, mas também contribuíram muito para a construção do meu portfólio.
Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para mais informações.
