Meu deus Mayk tenta trazer mais vídeos assim :-), como o Diego disse já até em uma live, para projetos simples não é tão necessário o ReactJS, foi um vídeo de excelente qualidade com as ferramentas "tradicionais"
Maikao é zica demais slc, mto obrigado por mais essa aula, sua didática é ótima Man, parabéns msm e só tenho a agradecer por vc compartilhar um conteúdo de qualidade desse, vlw
Amo programar com html e css, pretendo ser uma futura programadora front-end e me espelho muito no maik e o Diego ☀️🖖❤🤩. Parabéns pelos ricos conteúdos (com boa explicação)e parabéns pra equipe da rocketseat tbm.
muito show o vídeo Mayk, extremamente didático, já conhecia algumas das features que você passou, porém, a revisão do conteúdo me abriu novas ideias, parabéns cara.
@Maik Brito que aula massa, parabéns. Só uma coisa que seria legal adicionar é um "z-index" no form para não acontecer de quando o usuário clicar nos inputs ou no button, um square estar passando por cima e "atrapalhar" o comportamento. \o/
show de bola, uma coisa que eu gostaria de aprender é fazer um com que um boneco em svg em cima do formulario acompanhe com a cabeça conforme interagimos com o formulário, tipo se agente erra a senha o boneco faz nao com a cabeça, se a gente esconde a senha o boneco tapa os olhos, vi isso num site e fiquei facinado, eu faço uma ideia de como funciona mas acho que seria bem divertido de aprender
Muito foda essa aula. Vcs mandam bem demais, melhor canal de conteúdo Dev que existe atualmente. E acabei de adquirir um curso de vcs e estou curtindo muito. Mayke me tira uma duvida, no botão de login, seria legal acrescentar uma função desabilitando o clique duplo para evitar que o "No-No" bug quando tivermos um usuário mais impaciente? rs
Vaaaleu pelo feedback, Luis! ! 💜 Maykão é demais, né? 💜 Olha só, você já conhece a nossa comunidade aberta? Por lá você pode mandar essas dúvidas 💜 segue o link! www.rocketseat.com.br/comunidade 💜
Show de bola! Muitas informações boas em um vídeo só. Valeu! Faltou trabalhar o z-index dos quadradinhos fera (eles estão passando por cima do form e não por trás - não sei se essa foi a intenção rsrs) Muito obrigado pela aula! Interessei mais por animação graças a esse vídeo. Obrigado!
Excelente video. Seria legal você começar a trazer mais videos com JS puro assim porque ajuda pra quem ta começando e ainda não tem base pra partir pra um framework.
Boa brother!!! Atualizei o repositório =) dá uma olhada na linha 161 desse arquivo github.com/Rocketseat/youtube-form-animate-css-js-puro/blob/master/desafios/07/style.css
Boa brother!!! Atualizei o repositório =) dá uma olhada na linha 161 desse arquivo github.com/Rocketseat/youtube-form-animate-css-js-puro/blob/master/desafios/07/style.css
Incrível cara, aula maravilhosa, sempre quis entender como funcionavam as animações! Só queria saber o que vcs fazem com a voz de vcs! Tipo, o tempo em que vcs falam é muito bom, ótimo pra estudar, vcs treinam isso? Kkkkk
Maria de Fátima.. oq acontece e que eles tem muito tempo de profissão e prática.. Então eles conseguem falar e fazer ao mesmo tempo... Então isso já fica praticamente automático...
Inserir o overflow hidden foi uma opção apenas pq a tela não tinha uma rolagem no inicio. Porem, imagine esse formulário no fim de uma LP, o que poderia ser feito para a barra de rolagem não aumentar?
muito bom parabens pela grande aula, e obrigado, podia resolver alguns desafios de parallax parecido com essa aula, tras 6 desafios e vai fazendo para o pessoal acompanhar.
qual a diferença de usar dentro de uma variável a função assim "exemplo=>{ alguma coisa }" para "exemplo => alguma coisa" fiquei confuso, que no caso foi utilizado const delay=>(max -min) e tipo eu sou acostumado a usar const delay=>(max, min){ }
Mayk é brabo. Eu dentro do JS ao invés desses li's apenas fazerem quadrados, eu coloquei estrelas dentro deles kkkkk (meio tosco), mas ficou daora o efeito ate XD
@Rocketseat, Mayk quando você adicionou o "EventListener" ao botão de submit e bloqueou o comportamento padrão, "preventDefault", você impedi que o formulário seja enviado, então, como enviamos o formulário no final das contas?
Dá pra fazer esses efeitos todos com opacidade, etc. se substituir os quadrados por uma imagem tipo um logotipo, por exemplo? E a imagem deveria ser em que formato? PNG, SVG? Obrigado.
Dá pra fazer sim mano!! Usa esse link aqui pra fazer seus testes =) codepen.io/maykbrito/pen/rNBdPxx SVG é ótimo pq é possível a gente fazer diversas escalas, sem perder qualidade né =)
Fala mano z-index:-1 no .squares li Atualizei o repositório =) dá uma olhada na linha 161 desse arquivo github.com/Rocketseat/youtube-form-animate-css-js-puro/blob/master/desafios/07/style.css
Boa brother!!! Atualizei o repositório =) dá uma olhada na linha 161 desse arquivo github.com/Rocketseat/youtube-form-animate-css-js-puro/blob/master/desafios/07/style.css
Fala brother!! A ideia é ser semântico manja? É ajudar a compreender a estrutura de layout que você está fazendo. Imagina comigo o seguinte. Você tem um jardim e ele está cheio de rosas. Mas na verdade, quando você chega perto das rosas, existe algo escrito nelas. Uma identificação. Você começa a ler e vê diversas rosas marcadas como margarida, outras como tulipa, lírio... Mas não seria melhor se você chegasse num jardim e já visse as margaridas, as tulipas, os lírios e as rosas. Não seria mais fácil de identificar e entender qual é qual?? heheh Pois é.. Então perceba o seguinte cenário: Você quer fazer o seu layout dividido em 3 partes. A parte de cima, o meio e a parte de baixo. Podemos colocar 3 tags para isso, e IDentificá-las ou CLASSificá-las como header, main, e footer. Dessa forma, saberemos o que elas significam ali no seu layout certo? Mas podemos usar as tags de maneira mais clara e colocar rsrssrs bem suave né? Concluimos que de certa forma é uma questão de deixar as coisas mais claras. Existem sim algumas regrinhas para cada tipo de tag e você pode/deve dar uma olhada na documentação. Falando especificamente sobre a section, a ideia é construir uma seção ali no seu site/sistema. Essa seção pode ter TITULOAlgum conteúdo (por exemplo). Você quer usar div ou section para construir uma parte que pra você é uma seção? O que acha? Não existe certo ou errado beleza? Existe seu entendimento e escolha. Quando mais você for fazendo e percebendo a necessidade, mas semântico você vai ficando. Faz sentido pra você essa explicação? Pude responder a questão?
![CAMPปลิ้น | EP.83[2/2] ประสบการณ์ขนหัวลุกจากตำนานวงการผี!](http://i.ytimg.com/vi/T_kFecQw7Ds/mqdefault.jpg)
Apesar de ter apenas 11 anos são vcs que me inspiram a continuar programando... Amo a Rocketseat
Caaaaraaaa. Que massaaa. Parabéns mano
Você tem um futuro promissor, continue se esforçando, você vai longe!
Obs: Desiste não hein, vejo muita gente desistindo!
billy vc é bem kid mano kkkkkkkkk
Minha filha tem 5 anos sou Dev .net e é apaixonada por jogos minecraft, já coloquei ela pra vê python;
William kkkkkkk
Meu deus Mayk tenta trazer mais vídeos assim :-), como o Diego disse já até em uma live, para projetos simples não é tão necessário o ReactJS, foi um vídeo de excelente qualidade com as ferramentas "tradicionais"
Que bom que curtiu Geovani!! Vdd!! Bora fazzerrr então!!! eheheh
Simplesmente uma aula digna de dizer parabéns, fácil de entender e aprender.
Valeeu Milton! 💜💜💜
Mayk cara, tu é fera demais! Parabéns pelo conteúdo irmão, estarei sempre a acompanhar!
Maikao é zica demais slc, mto obrigado por mais essa aula, sua didática é ótima Man, parabéns msm e só tenho a agradecer por vc compartilhar um conteúdo de qualidade desse, vlw
Amo programar com html e css, pretendo ser uma futura programadora front-end e me espelho muito no maik e o Diego ☀️🖖❤🤩. Parabéns pelos ricos conteúdos (com boa explicação)e parabéns pra equipe da rocketseat tbm.
E muito bons seus vídeos, Mayk. Sua didática é limpa e de fácil compreensão. Continue assim!
Muitíssississimo obrigadooo =)))
Muito interessante, tem propriedades de css que o livro de um dinossauro de css nem sequer mencionava. Obrigado pelo video.
Incrível, conteúdo show! Parabéns equipe Rocketseat! ♥️
Gostei muito desse vídeo. Conteúdo com bastante didática e muita informação bacana. Parabéns
Aula top demais.... To terminando o dia com o sentimento de dia produtivo após assistir.
Cara era isso que eu estava procurando. Valeu Mayk s2
Show brother
Aula maravilhosamente didática. Parabéns!!!
muito show o vídeo Mayk, extremamente didático, já conhecia algumas das features que você passou, porém, a revisão do conteúdo me abriu novas ideias, parabéns cara.
Que massaaaa!!! Sempre bom revisar né?? =D Tamo junto
@Maik Brito que aula massa, parabéns. Só uma coisa que seria legal adicionar é um "z-index" no form para não acontecer de quando o usuário clicar nos inputs ou no button, um square estar passando por cima e "atrapalhar" o comportamento. \o/
verdade, tb notei!
Muito foda esse form, eu n fazia ideia d como fazer. Valeu
Bem legal né Giulia! Que bom que curtiu!! Valeu
Ficou top Mayk! Continua com os vídeos!!
Obrigado pelo feedback e pelo apoio!!
show de bola, uma coisa que eu gostaria de aprender é fazer um com que um boneco em svg em cima do formulario acompanhe com a cabeça conforme interagimos com o formulário,
tipo se agente erra a senha o boneco faz nao com a cabeça, se a gente esconde a senha o boneco tapa os olhos, vi isso num site e fiquei facinado, eu faço uma ideia de como funciona mas acho que seria bem divertido de aprender
Caramba que legal vc lembra qual era o nome do site?
@@dev_front980 infelismente nao lembro :c
Nem trabalho com frontend, mas curti demais a aula e esse site Animista é Animal, rsrs
aoeihoaihoiahoihea =D =D =D
Muitoooo massaaaa :D Cara, amei o vídeo, parabéns... aprendi demais, mta coisa pra aplicar *-*
Faça mais vídeos como esse, pffff!!!!
Faaaala, Fabby!! Valeeeu! 💜
Aplica e conta pra gente se deu certo! 🚀 😉
Show... Muito legal... Ansioso pelos proxímos videos... ;)
Caraca que aula...muito obrigado Rocketseat e Mayk pela aula.
Agora é brincar com as possibilidades.
Muuuuuuuuuuito obrigado pela aula. Amo a Rocketseat, tenho aprendido muito.
Boa Mayk muito boa essa sua explicação me ajudou a compreender certos conceitos de animações.
Que massa João. Que bom que fez sentido pra você
Muito foda essa aula. Vcs mandam bem demais, melhor canal de conteúdo Dev que existe atualmente. E acabei de adquirir um curso de vcs e estou curtindo muito.
Mayke me tira uma duvida, no botão de login, seria legal acrescentar uma função desabilitando o clique duplo para evitar que o "No-No" bug quando tivermos um usuário mais impaciente? rs
Vaaaleu pelo feedback, Luis! ! 💜 Maykão é demais, né? 💜
Olha só, você já conhece a nossa comunidade aberta? Por lá você pode mandar essas dúvidas 💜 segue o link! www.rocketseat.com.br/comunidade 💜
Muito bom, este tipo de aula ajuda muitooooooooo
espetacular especialmente a parte do js que não conhecia
aewwww!! Que bom que curtiu !!
Muito obrigado, vídeo e didática incríveis
Cara, que aula incrível!
Muito obrigado mesmo!
Cara, foi muito massa essa explicação...mande mais vídeos aí...
Seria uma boa sugestão um curso de CSS na Skylab starter se for possível, obrigado pelo conteúdo massa Rocketseat!!!
Shooooow , parabéns pessoal. Esperando a série de desenvolvimento de aplicação do zero, mostrando os erros as consultas kkkkkkkk.
Mayk na área. Glória a Deus!
oiaehioaehaoeiheaoiaehieh uhuullll
17:17 o som da Kawasaki passando lá atrás KKKKK Otima aula professor!!!
Show de bola sua explicação
Show de bola! Muitas informações boas em um vídeo só. Valeu! Faltou trabalhar o z-index dos quadradinhos fera (eles estão passando por cima do form e não por trás - não sei se essa foi a intenção rsrs) Muito obrigado pela aula! Interessei mais por animação graças a esse vídeo. Obrigado!
Show de bola, obrigado por compartilhar seus conhecimentos =)
Excelente video. Seria legal você começar a trazer mais videos com JS puro assim porque ajuda pra quem ta começando e ainda não tem base pra partir pra um framework.
excelente sugestão!! Obrigado Lukas!!
Perfeito!!! Só faltou uma coisa, colocar os quadradinhos pra trás do form!!!! Isso seria com o z-index correto?
exatamente.
Boa brother!!!
Atualizei o repositório =)
dá uma olhada na linha 161 desse arquivo github.com/Rocketseat/youtube-form-animate-css-js-puro/blob/master/desafios/07/style.css
Show Mayk, conteúdo incrível como sempre parabéns mano pela didática sensacional ! Sucesso pra você e toda galera ;)
VALEUUU RUANNN!!!!
Sensacional, ótimo trabalho. Parabéns!
É exactamente isso que eu estava procurando.
Mayk Brito e a Rocketseat sempre dando um show!!! vlw
uuuhuuullll TAMO JUNTO BROTHEEERR!!!
Top, muito top! Só faltou deixar o formulário na frente da animação 🤔 vou tentar aqui hehe
Boa brother!!!
Atualizei o repositório =)
dá uma olhada na linha 161 desse arquivo github.com/Rocketseat/youtube-form-animate-css-js-puro/blob/master/desafios/07/style.css
Mano, mandou super bem, gostei de mais da sua didática e da idéia ! top
Valeeeu, Jairo! 💜💜 Mayk é fera né? 💜
@@rocketseat manda bem de mais !
Excelente conteúdo, como todos da Rocketseat! S2
Obg pelo feedback Felipe!!
Incrível cara, aula maravilhosa, sempre quis entender como funcionavam as animações!
Só queria saber o que vcs fazem com a voz de vcs! Tipo, o tempo em que vcs falam é muito bom, ótimo pra estudar, vcs treinam isso? Kkkkk
Maria de Fátima.. oq acontece e que eles tem muito tempo de profissão e prática.. Então eles conseguem falar e fazer ao mesmo tempo...
Então isso já fica praticamente automático...
você é genial! e super didático! incrível aula!
orrrra gostei, vou usar demais
que massa manooo
=) Demoooroo.. usa láaa
Mayk arrebenta! Muito boa a aplicação
Aeeeww brotherrr!! Tamo juntoooo
Nuuuu tá loko! Show de mais
Valeeeeu, Paulo! 💜 🚀
Inserir o overflow hidden foi uma opção apenas pq a tela não tinha uma rolagem no inicio. Porem, imagine esse formulário no fim de uma LP, o que poderia ser feito para a barra de rolagem não aumentar?
Show 💜
traga mais conteúdos assim
muito bom parabens pela grande aula, e obrigado, podia resolver alguns desafios de parallax parecido com essa aula, tras 6 desafios e vai fazendo para o pessoal acompanhar.
Excelente conteúdo! Faz mais, pls.
qual a diferença de usar dentro de uma variável a função assim "exemplo=>{ alguma coisa }" para "exemplo => alguma coisa" fiquei confuso, que no caso foi utilizado const delay=>(max -min) e tipo eu sou acostumado a usar const delay=>(max, min){ }
Tá incrível esse vídeo Mayk! :D
OBRIGADÃOOOO!!!
Nossa, q excelente, por mais aulas assim
Pode ter certeza que iremos postar mais! 💜
@@rocketseat fico no aguardo pra assistir todos😍
Salve Maykera!
Ficou show de bola.
Cara, você é fera!
E aí Maykão, curti muito sua explicação de animações, muito simples e direto.
Bora pra action!!!
Obs: rachei muito com o "nono" 🤣🤣🤣🤣🤣
Hahahahaha bora manooo hehehe nono haah
Mayk é brabo.
Eu dentro do JS ao invés desses li's apenas fazerem quadrados, eu coloquei estrelas dentro deles kkkkk (meio tosco), mas ficou daora o efeito ate XD
Aeeee.. Pooo.. vc que ficou brabo agora hahaahah TMJ
Sou iniciante na área, pode me ajudar como você fez isso? Saberia como criar triângulos e círculos?
aeee, uma aula desse canal q consegui entender o codigo rsrs
aeeewwwww!!!!! massssaaaa
tem como fazer com arquivos sendo enviado para nuvem e visse versa?
Bonito isso é. Mas qual o impacto na rede? Seria interessante essa análise.
Muito bom! Adorei o tutorial!
Muito boa aula, altamente coeso!!
Conteúdo muito bom aprendi muito sobre animação
Que massa André!! Valeeu pelo feedback! 💜
Meus parabens amigo
Conteúdo fantástico
que bom que curtiu Yan!!!
simplesmente foda
Showwww manooo
@Rocketseat, Mayk quando você adicionou o "EventListener" ao botão de submit e bloqueou o comportamento padrão, "preventDefault", você impedi que o formulário seja enviado, então, como enviamos o formulário no final das contas?
Se eu nao me engano, você pode desativar isso após fazer todas as animações e verificações atribuindo false ao preventdefault
Começei agora a estudar HTML e CSS, acabeid e ver este video, e cara.... CARA QUE FODA, (mas nao sei fazer nem 1/3)
Dá pra fazer esses efeitos todos com opacidade, etc. se substituir os quadrados por uma imagem tipo um logotipo, por exemplo? E a imagem deveria ser em que formato? PNG, SVG? Obrigado.
Dá pra fazer sim mano!! Usa esse link aqui pra fazer seus testes =)
codepen.io/maykbrito/pen/rNBdPxx
SVG é ótimo pq é possível a gente fazer diversas escalas, sem perder qualidade né =)
"Criar alguns quadrados animados...""...Alguns podem ser dois." IAHEIEHIEUHIEUH. Muito bom essa aula, parabéns gostei muito!! Por favor mais hahah
Era tudo que eu queria aprender.
aí sim manooo!!
Bacana demais. Obrigado
Que massa que curtiu, Vinicio! 💜 😉
Mayk é um deus hahaha!
AHHAHAHAHAHA
Top hein !
MUITO OBRIGADOOOOOOOOOOOOOOOO!
ÓTIMO CONTEÚDO!! VALEU
Valeu Diogo
Boa Mayk!
Valeu Gustavo
Como faria pra animação não ir por cima do form?
Vcs poderiam fazer mais vídeos desses event listeners diferentes?
Como ficaria com imagem ao invés de quadrado ?
De que forma eu posso fazer para que os li criados passem por trás da section? Ja tentei utilizar z-index e nao consegui.
Fala mano
z-index:-1 no .squares li
Atualizei o repositório =)
dá uma olhada na linha 161 desse arquivo github.com/Rocketseat/youtube-form-animate-css-js-puro/blob/master/desafios/07/style.css
Faltou aumentar o zindex do formulário para deixar ele sob os quadrados. No mais, muito fera!
Boa brother!!!
Atualizei o repositório =)
dá uma olhada na linha 161 desse arquivo github.com/Rocketseat/youtube-form-animate-css-js-puro/blob/master/desafios/07/style.css
toooop
Muito bom!!
Valeu demais, Gabriele! 💜 🚀
Vídeo de qualidade.
show !!!!
Que isso maykao... apelou man!! Rsrs
🔥🔥🔥 ahahha 💜
obrigado
Show.
Brabo demais
Que show que curtiu, Raimundo! 💜 😍
Muito seu vídeo
Queria entender melhor, sobre as marcações section, div, não sei se existe uma regra clara para quando usar cada uma delas.
Fala brother!!
A ideia é ser semântico manja? É ajudar a compreender a estrutura de layout que você está fazendo.
Imagina comigo o seguinte. Você tem um jardim e ele está cheio de rosas. Mas na verdade, quando você chega perto das rosas, existe algo escrito nelas. Uma identificação. Você começa a ler e vê diversas rosas marcadas como margarida, outras como tulipa, lírio... Mas não seria melhor se você chegasse num jardim e já visse as margaridas, as tulipas, os lírios e as rosas. Não seria mais fácil de identificar e entender qual é qual?? heheh
Pois é.. Então perceba o seguinte cenário: Você quer fazer o seu layout dividido em 3 partes. A parte de cima, o meio e a parte de baixo. Podemos colocar 3 tags para isso, e IDentificá-las ou CLASSificá-las como header, main, e footer. Dessa forma, saberemos o que elas significam ali no seu layout certo?
Mas podemos usar as tags de maneira mais clara e colocar rsrssrs bem suave né?
Concluimos que de certa forma é uma questão de deixar as coisas mais claras. Existem sim algumas regrinhas para cada tipo de tag e você pode/deve dar uma olhada na documentação.
Falando especificamente sobre a section, a ideia é construir uma seção ali no seu site/sistema. Essa seção pode ter TITULOAlgum conteúdo (por exemplo). Você quer usar div ou section para construir uma parte que pra você é uma seção? O que acha? Não existe certo ou errado beleza? Existe seu entendimento e escolha. Quando mais você for fazendo e percebendo a necessidade, mas semântico você vai ficando. Faz sentido pra você essa explicação? Pude responder a questão?
Vídeo sensacional! ;)
Muito bom o vídeo mano \o/
Serve para ionic?