Repositório com arquivos do curso
Link do grupo https://www.facebook.com/groups/672821342872172/
Vamos usar o Codepen ou o JSBin, são sites que permitem vc criar um ambiente rapidola pra desenvolver com tecnologias web então vc não precisa esquentar com baixar coisas, instalar programas nem nadinha de nada! Supimpa demais né? \o/ Então, como vai ser o aprendizado? Iremos por módulos, ao final desse primeiro módulo vc vai conseguir entender e construir um motor de animações com JS e ainda vai expandir seus conhecimentos de matemática! O: Será um tópico do módulo por aula, cada aula no final de semana, sem duração definida para a aula e horário a combinar em cada semana.
Então, aqui está o sumário do primeiro módulo, conhecimentos vamos usar para construir um motor de animação com JS:
- Introdução aos elementos da página HTML;
- Estilização dos elementos HTML, estrelando:
- Dando cores - e vida! - aos elementos.
- Posicionamento de elementos na página (Vc vai ver a importância do gráfico cartesiano na programação. Descartes seu lindo <3.)
- Mudando a forma das letrinhas dos textos com as famigeradas "Fontes" (isso, exatamente como vc pode usar Comic Sans ou Times News Romans no Microsoft Word! Só que a gente usa outras fontes)
- Metendo o pé com JS, essa parte tb inclui:
- Entendendo variáveis e funções em JS, muito parecido com matemática, só que mais simples ainda! (spoiler: variáveis guardam valores e funções retornam valores)
- Usando os eventos do DOM
- Fazer algo quando o usuário clicar em algo, quando a página carregar, quando o usuário passar o cursor do mause por cima de algo, etc...
- Eventos com JS: Mudar a cor/fonte/tamanho/etc de algum elemento da página quando houver um clique.
- Trabalhando com datas em JS!
- Quando o usuário clicar em algo na página, mostrar quanto tempo falta para o Natal!
- Trabalhando com temporizadores em JS (tb conhecidos como timers).
- Quando um usuário clicar em um elemento, esperar 10 segundos e depois mudar a cor dele.
- Mostrar quanto tempo falta para o Natal no HTML a cada 10 segundos.
- E enfim, usando tudo aquilo, vamos construir nosso motor de animações! Pra essa receita vamos precisar só daqueles conhecimentos: trabalhar com datas, funções e temporizadores. "Só isso mesmo, Gabs!?" Só isso mesmo!