Olá a todos, bem-vindos de volta.
No passado, fizemos segmentos de código juntos, onde eu codifiquei,
você codificou junto comigo, e cometemos muitos pequenos erros juntos.
Hoje, eu realmente quero fazer uma revisão de código em vez disso.
Eu quero que vocês se sentem e olhem para alguns dos códigos que eu escrevi e
vejam como as pequenas coisas que temos aprendido
estão se juntando para criar páginas web mais complexas.
Então vamos começar com algum HTML.
Aqui, eu tenho um código que vai criar um monte de divs diferentes.
A única coisa que pode ser nova que você não viu antes é essa idéia de
índice de tabulação.
O que o índice de tabulação faz é que ele permite que o navegador saiba que se alguém está
abrindo sua página,
você realmente deseja colocar diferentes elementos em foco em uma ordem diferente.
Então, neste caso, a primeira coisa seria A, e depois C, e depois B, etc.
É apenas mais um nível de acessibilidade que eu queria introduzir
a vocês em nosso código.
A única outra coisa que eu queria que você soubesse neste HTML é que a última div
tem uma classe animada nele.
Eu fiz este um pouco diferente para que você possa olhar para transições e
transformações em ação.
Então, vamos em frente e olhar para o CSS, e jogar com o navegador.
Agora, quando começamos no topo, você pode ver que eu acabei de discar o div para
que eles sejam pequenas caixas onde você pode ver o conteúdo, e
não é tudo muito apertado juntos.
A única coisa que você pode não ter usado ainda
em seu código é essa idéia de transição dois segundos de facilidade.
Isso vai deixar o navegador saber que quando mudamos de estado,
queremos levar cerca de dois segundos e facilitar.
Mas primeiro, vamos olhar para o foco.
No meu foco, eu digo mudar a cor de fundo.
Então, agora, quando eu for para o meu navegador,
eu vou começar a exibir os diferentes elementos.
E quando eu fizer isso, você pode ver que todos eles acendem.
Vou atualizar a página, porque a que eu esperava ir primeiro não foi.
Isso é porque eu estava abrindo mão antes mesmo de começarmos a digitar.
Então aqui vamos nós.
A muda de cor e, em seguida, C e, em seguida, B.
Isto é você dando ao usuário poder para saltar para as seções mais importantes primeiro.
Certo, depois do foco, vamos falar sobre pairar.
Agora, quando o mouse entra em caso, o que eu estou dizendo é fazer a largura 200 pixels,
era 100, e mudar a cor de fundo.
Então vamos dar uma olhada.
Vou destacar sobre C aqui, e depois B, e depois A.
E você pode ver que é uma transição muito agradável e suave.
Mas uma das coisas que eu quero que você perceba é que quando eu não estou pairando sobre
nada, nós realmente temos A a F na linha superior e
então G a I na parte inferior.
Quando você começa a ficar um pouco louco demais mudando o tamanho das coisas
dinamicamente, você pode jogar tudo fora de posição.
Então certifique-se de usar isso com moderação.
Tudo bem, vamos para o mais legal, o último.
Se você se lembra, eu fiz uma div, e
eu coloquei para ser animado porque eu usei a classe animada.
Agora, a única diferença é que a cor de fundo é um pouco verde,
mas eu quero mostrar o que acontece quando eu passar o mouse sobre ele.
Quando eu fizer isso, eu vou começar uma transformação onde eu vou dizer
girar este 360 graus.
E, além disso, em vez de ter uma opacidade de 0,4, o que significa meio
desfocá-lo, limpá-lo um pouco, defina-o para a cor completa.
Aqui vamos nós.
Acho isso muito legal.
Nós giramos.
Quando saímos do pairar, ele gira de volta.
Estas são as coisas divertidas que você pode adicionar à sua página quando
você está aprendendo a codificar que realmente lhe dão essa sensação de,
ei, estou fazendo isso, estou fazendo as coisas mudarem.
Então, o que eu realmente encorajaria você a fazer agora é voltar, rever a palestra de transição,
rever a palestra de transformação, certificar-se e ver se esses conceitos
agora fazem um pouco mais de sentido que você viu o código em ação.
E eu espero que você jogue com este código, mude os valores, e
realmente se divirta com ele.
Então boa sorte.