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 💜
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 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.
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.
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
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...
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
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?
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
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){ }
@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
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! 💜💜💜
Gostei muito desse vídeo. Conteúdo com bastante didática e muita informação bacana. Parabéns
Aula maravilhosamente didática. Parabéns!!!
Muito bom, este tipo de aula ajuda muitooooooooo
Aula top demais.... To terminando o dia com o sentimento de dia produtivo após assistir.
Mayk cara, tu é fera demais! Parabéns pelo conteúdo irmão, estarei sempre a acompanhar!
Show... Muito legal... Ansioso pelos proxímos videos... ;)
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
Muuuuuuuuuuito obrigado pela aula. Amo a Rocketseat, tenho aprendido muito.
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 obrigado, vídeo e didática incríveis
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! 🚀 😉
E muito bons seus vídeos, Mayk. Sua didática é limpa e de fácil compreensão. Continue assim!
Muitíssississimo obrigadooo =)))
Incrível, conteúdo show! Parabéns equipe Rocketseat! ♥️
Sensacional, ótimo trabalho. 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
Nem trabalho com frontend, mas curti demais a aula e esse site Animista é Animal, rsrs
aoeihoaihoiahoihea =D =D =D
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ê
Cara, que aula incrível!
Muito obrigado mesmo!
Show de bola sua explicação
Muito interessante, tem propriedades de css que o livro de um dinossauro de css nem sequer mencionava. Obrigado pelo video.
Ficou top Mayk! Continua com os vídeos!!
Obrigado pelo feedback e pelo apoio!!
você é genial! e super didático! incrível aula!
Caraca que aula...muito obrigado Rocketseat e Mayk pela aula.
Agora é brincar com as possibilidades.
@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!
Show de bola, obrigado por compartilhar seus conhecimentos =)
Cara, foi muito massa essa explicação...mande mais vídeos aí...
Muito foda esse form, eu n fazia ideia d como fazer. Valeu
Bem legal né Giulia! Que bom que curtiu!! Valeu
espetacular especialmente a parte do js que não conhecia
aewwww!! Que bom que curtiu !!
Cara era isso que eu estava procurando. Valeu Mayk s2
Show brother
Mayk na área. Glória a Deus!
oiaehioaehaoeiheaoiaehieh uhuullll
Excelente conteúdo! Faz mais, pls.
Show 💜
traga mais conteúdos assim
17:17 o som da Kawasaki passando lá atrás KKKKK Otima aula professor!!!
Mayk Brito e a Rocketseat sempre dando um show!!! vlw
uuuhuuullll TAMO JUNTO BROTHEEERR!!!
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 !
Muito bom! Adorei o tutorial!
Mayk arrebenta! Muito boa a aplicação
Aeeeww brotherrr!! Tamo juntoooo
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
orrrra gostei, vou usar demais
que massa manooo
=) Demoooroo.. usa láaa
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 boa aula, altamente coeso!!
É exactamente isso que eu estava procurando.
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!!!!
Nossa, q excelente, por mais aulas assim
Pode ter certeza que iremos postar mais! 💜
@@rocketseat fico no aguardo pra assistir todos😍
aeee, uma aula desse canal q consegui entender o codigo rsrs
aeeewwwww!!!!! massssaaaa
Seria uma boa sugestão um curso de CSS na Skylab starter se for possível, obrigado pelo conteúdo massa Rocketseat!!!
Cara, você é fera!
Nuuuu tá loko! Show de mais
Valeeeeu, Paulo! 💜 🚀
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.
excelente sugestão!! Obrigado Lukas!!
Excelente conteúdo, como todos da Rocketseat! S2
Obg pelo feedback Felipe!!
Shooooow , parabéns pessoal. Esperando a série de desenvolvimento de aplicação do zero, mostrando os erros as consultas kkkkkkkk.
Salve Maykera!
Ficou show de bola.
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.
Conteúdo muito bom aprendi muito sobre animação
Que massa André!! Valeeu pelo feedback! 💜
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?
Tá incrível esse vídeo Mayk! :D
OBRIGADÃOOOO!!!
Conteúdo fantástico
que bom que curtiu Yan!!!
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...
Meus parabens amigo
Bacana demais. Obrigado
Que massa que curtiu, Vinicio! 💜 😉
ÓTIMO CONTEÚDO!! VALEU
Valeu Diogo
Era tudo que eu queria aprender.
aí sim manooo!!
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
Mayk é um deus hahaha!
AHHAHAHAHAHA
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?
Bonito isso é. Mas qual o impacto na rede? Seria interessante essa análise.
Top hein !
Vídeo sensacional! ;)
simplesmente foda
Showwww manooo
MUITO OBRIGADOOOOOOOOOOOOOOOO!
Muito bom!!
Valeu demais, Gabriele! 💜 🚀
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)
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
Muito bom o vídeo mano \o/
Brabo demais
Que show que curtiu, Raimundo! 💜 😍
Boa Mayk!
Valeu Gustavo
Que isso maykao... apelou man!! Rsrs
🔥🔥🔥 ahahha 💜
Vídeo de qualidade.
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){ }
Vcs poderiam fazer mais vídeos desses event listeners diferentes?
tem como fazer com arquivos sendo enviado para nuvem e visse versa?
show !!!!
Serve para ionic?
@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
Muito seu vídeo
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é =)
Muito bom
💜 🚀
"Criar alguns quadrados animados...""...Alguns podem ser dois." IAHEIEHIEUHIEUH. Muito bom essa aula, parabéns gostei muito!! Por favor mais hahah
toooop
Como faria pra animação não ir por cima do form?
Show.
Segura meu like
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