Tela de Login e Cadastro Interativa - HTML5 & CSS3 - [Parte 1]
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- Nesta série de vídeos explico e desenvolvo uma tela de login e cadastro com animação CSS, utilizando apenas HTML e CSS.
❤️Cadastre-se para ser avisado das aulas semanais no TH-cam
→www.guilhermec...
================================//=================================
02:15 - DEMONSTRAÇÃO da Tela interativa;
03:35 - Explicação da estruturação do HTML da nossa Tela Interativa;
07:22 - Início da estruturação do HTML no Visual Studio Code;
17:00 - Explicação sobre placeholder;
19:15 - Início da segunda estruturação de conteúdo da nossa Tela;
================================//=================================
Código no GITHUB: github.com/Gui...
================================//=================================
AJUDE O CANAL, SE INSCREVA, CURTA E COMPARTILHE.
================================//=================================
❤️ OUTROS VÍDEOS DO CANAL
▸Como criar uma seção DEVELOPER TEAM com [HTML & CSS]
→ • Como criar uma seção D...
▸Flexbox: Recriando Cabeçalho do Login do Facebook [HTML + CSS]
→ • Flexbox: Recriando Cab...
▸Flexbox: Exemplo Prático
→ • Flexbox: Exemplo prático
▸Como superar a procrastinação
→ • Como superar a procras...
▸ 3 Dicas extremamente úteis para ganhar dinheiro com programação
→ • 3 Dicas extremamente ú...
▸ Servidor DNS: a magia por trás da web
→ • Servidor DNS: a magia ...
▸ Aprendendo Gulp - Introdução
→ • Aprendendo Gulp (autom...
▸ Gulpfile.js e Require - Aula 02
→ • Gulpfile.js e Require ...
================================//=================================
🔔 Minhas redes sociais:
🔗 Instagram
→ / guilhermechinagliadev
🔗 Telegram [DEVMAONAMASSA]
→t.me/devmaonam...
🔗 Twitter
→ / chinagliagui
🔗 Linkedin
→ / chinagliaguilherme
🔗 Facebook
→ / chinagliaguilherme
🔗 GRUPO FACEBOOK [Programador Iniciante]
→ / programadoriniciante
================================//=================================
Inspirado no layout da selectoglobal no dribbble.
![Tela de Login e Cadastro Interativa - HTML5 & CSS3 - [Parte 2]](http://i.ytimg.com/vi/NbMb0QPr2Iw/mqdefault.jpg)
![Tela de Login e Cadastro Interativa - HTML5 & CSS3 - [Parte 2]](/img/tr.png)
Estou surpreso o tanto que a galera da programação tem gosto em ensinar, que comunidade incrível, parabéns irmão, sucesso no seu Canal, estou começando agora na programação(nem tenho PC ainda pra começar a praticar). Obrigado pela aula!!! 😁👊🏻
Tmj!!! Vinicius, Grande Abraço!!
aprendemos ensinando rsrs :)
Eu vi e pensei, 3 conteudos de 40 minutos, que saco... To amando... Mordi minha lingua, sucesso!!!
rsrs Tmj Juan!!! Grande Abraço 🚀🚀🚀
Como uma pessoa ensina bastante conteúdo de uma forma bem dinâmica e ótima em apenas 23:30 minutos? parabéns....
Obrigado Guilherme pelo feedback positivo. Fico feliz que foi de grande valia. Grande Abraço.
Só tenho que agradecer vc pela aula maravilhosa! Existem tantos vendendo curso e não sabe nem ensinar, e você oferecendo de forma gratuita e com uma excelente didática
Obrigado Danny, Tmj!! Grande Abraço!!
Nos primeiros minutos de video já da pra perceber que sua explicação é impecavel.
Obrigado João Tmj!!!, Grande Abraço!!
Parabéns pela iniciativa, simples e direto ao ponto, e o melhor na prática.
A explicação dele é ótima. O legal é que ele não fica jorrando código na tela sem explicar. Sucesso para o senhor!! Abraços!
Olá, queria agradecer pela disponibilidade e empatia em ajudar quem ta começando cara! Valeu de coração!!!
Obrigado pelo feedback! bons estudos por aí, Grande Abraço!!
Cara gostei demais, sou do backend e ja to imaginando a trabalheira que vou ter usando um ajax, jquery sei la pra usar isso ai, mas vou fazer funcionar kk
Nossa velho, que massaaaa!!!! Só essa primeira parte já foi topppp, vou ver todas as outras com certeza!!! É tudo muito bem explicado, parabéns mesmo cara
Opa Jamerson que bom que curtiu, tmj, qualquer dúvida manda ai. Segue lá no insta tbm, @guilhermechinagliadev Grande Abraço
Esses vídeos são muito bons para quem está começando, p entender como estrutura o código na hora da criação
Que bom que curtiu Maycon, Tmj! Grande Abraço!!
Começando hoje essas aulas e só tenho a dizer: que didática incrível!
Opa Leo tudo bem? Que bom que tá curtindo! Qualquer dúvida só chamar aqui ou lá no Instagram @guilhermechinagliadev
Grande Abraço
Cara, que didática sensacional, perfeitamente bem explicado e apresentado, muito obrigada!
Obrigado Paula, que bom que curtiu!! Grande Abraço e bons estudos!!
Caramba, hoje eu decidir tentar aprender html, e encontrei esse video, foi muito bom e explicativo, tem umas coisas que eu não entendi nada, mas como eu to começando nesse exato momento, eu acho que foi até de boa. Eu conseguir seguir a video aula passo a passo e deu tudo certo. Muito obrigado pelo contéudo. :)
Opa fico feliz que deu tudo certo, estou subindo alguns conteúdos diferentes pelo meu Instagram, se quiser saber um pouco mais e ainda não me segue, é só seguir @guilhermechinagliadev Grande Abraço!
Muito obrigada pela aula, tu é extremamente didático, explicando de uma forma interessante e rápida. Com certeza hoje aprendi mais do que nos outros 30 vídeos que assisti! hahahaha
Obrigado pelo comentário fico feliz que tenha curtido e aprendido, bons estudos aí, Grande Abraço 🚀🚀🚀
Estou adorando os videos de explicação para essa tela de login, por favor continue com conteúdos assim.
Obrigado Yasmim pelo feedback. Continuarei sim. Abraço
Muito boa sua aula, estou assistindo pela plataforma do workover, mas faço questão de vir aqui deixar meu like!
Fala Humberto blz? Que bom que está curtindo, obrigado pelo like e feedback, qualquer dúvida manda lá no meu Instagram que te respondo.
@guilhermechinagliadev
Grande Abraço
Muito legal. Estou gostando da aula. Obrigado
vc salvou meu tcc obg eu te amo vc é como um pai para mim
Tmj!
Parabéns manooo, estou fazendo trabalho da faculdade, aprendendo do zero. Obrigado pela ajuda
Guilherme parabéns pelo seu lindo projeto!! Obrigado por compartilhar conhecimentos.
Boa noite Francisco Tmj!!! Grande Abraço!
Curti demais mano. Tela linda demais. Parabens. Ficou muito Top!!
Show Denis, Tmj!! Grande Abraço!!
••• Cara, que vídeo maravilhoso... Muito conteúdo e muito bem explicado! Amei a sua didática, cara. Só continua que você merece ir muito longe.
Eu, por exemplo, vou maratonar seus vídeos e EXPLODI-LOS de likes!!!!
Opa Lucas Tmj, que bom que curtiu. E obrigado pelos likes e shares, Grande Abraço
Show de bola estou gostando muito...
Vlw Thiago, muito obrigado! Grande Abraço
Cara comecei hj o primeiro vídeo fiz até o final deu certo agora vou pro segundo vamo que vamo 100 % correto ,
0 falhas vlwm
Opa Rai Tmj!!! Fico feliz que tenha evoluído, qualquer dúvida chama lá no Instagram @guilhermechinagliadev
Grande Abraço!!
Parabéns amigo seus vídeos são ótimos e ajuda bastante quem ja entende do assunto e quem está aprendendo assim como eu... 👏👏
Obrigado Robson pelo seu feedback, fico feliz por isso. Tendo alguma dúvida estarei por aqui. Grande Abraço.
Didática incrível! Parabéns pelo conteúdo
Opa Ricardo muito obrigado pelo feedback, Grande Abraço, qualquer coisa estou no instagram também @guilhermechinagliadev
Gostei muito do seu trabalho, parabéns pelo conteúdo e que continue assim!!
Opa Vinícius obrigado, Tmj!!
Muito didático, parabéns.
Obrigado Rogério!! Grande Abraço!! Segue lá no Instagram @guilhermechinagliadev
@@guilhermechinaglia O tutorial do site responsivo vai ter?
Fala Rogério blz? Ontem eu fiz uma LIVE sobre Conceitos de Design Responsivo + flexbox, se ainda estiver buscando tutorial de site resposivo, Grande Abraço
amei tua didática, ganhou um inscrito, continue com vídeos como esse e parabéns pelo trabalho
Obrigado Caio pelo seu feedback. Grande abraço.
obrigada!!! salvou meu log in do tcc hahaha boa aula.
Vlw Tmj!! Grande Abraço!!
Muito obrigado pelo conteúdo, ajudou imensamente!
Obrigado Sidney, Tmj!! Grande Abraço!
Cara muito bom seus vídeos conteúdo de primeira obrigado !!!
Obrigado Wendell, fico feliz que esteja curtindo, Grande Abraço.
Very Good, it's amazing to make us understand this complex content. Congratulations !!!
Thank you Elias, nice to read this.
mt bom mano!!! show!!! vc explica mto bem!
Opa, obrigado! Tmj!!
Muito top o conteúdo e a didática!
Parabéns pelo canal
Tmj!!! Grande Abraço!!
Eu amei dms!! Seu canal é incrível e ajuda muuuuuito quem está começando, vulgo eu 😅💖💖
Obrigado Ester, que bom que curtiu! Se puder compartilha com a galera que tá começando. Precisando só chamar, Grande Abraço e bons estudos!!
Valeu por compartilhar os seus conhecimentos conosco. Parabéns pela aula :)
Disponha Carlos, que bom que curtiu. Grande abraço.
Que vídeo incrível! Simples, rápido e prático! Me ajudou demais e aprendi muito com os atalhos que você foi utilizando ao longo do código
Obrigado amigo! Ansioso pelo o que posso aprender nas próximas partes :)
Opa Renato que bom que curtiu, Tmj!! Qualquer coisa chama no Instagram se tiver dúvidas.
Grande Abraço
Muito bom! Objetivo e claro. Parabéns!
Opa Gawan que bom que curtiu, Grande Abraço!!
Parabéns, belíssimo trabalho
Tmj!! Grande Abraço
Mano muito top sua aula parabéns
Que bom que curtiu fico feliz, Grande Abraço
SENSACIONAL! FICOU INCRÍVEL
Opa Beatrix que bom que curtiu. Grande Abraço!
Aula bem conduzida e bem didática. Top
Obrigado Carlos pelo seu feedback. Que bom que curtiu. Grande abraço
Aula perfeita !
Vlw Matheus!! Tmj! Grande Abraço!
utilizando essas aulas para desenvolvimento do tcc
Show Matheus!! Tmj, Grande Abraço
Tá tendo a facul pela Net com a quarentena né?
Perfeito!!!Parabéns pelo belíssimo trabalho!!!
Obrigado Carina, Grande Abraço.
Top demais faça com o back end tbm vai ficar muito loucooo
Prefere o back em PHP ou NodeJS?
Tutorial muito bom!!
Obrigado 🙏🏻
ótimo conteúdo
Obrigado, Grande Abraço!
Ótimo vídeo parabéns 👏 geralmente no HTML eu uso a metodologia DEM para agilizar e estruturar meu CSS.
Fala Romulo vc quis dizer a metodologia BEM (block, element, modify) ? Sim muito bacana mesmo, tá certinho!! Grande Abraço
Parabéns pelo canal👍
Obrigado Daniel, Tmj!! Grande Abraço!
obrigado amigo pela ajuda to com um projeto e precisava aprender
Que bom que ajudei de alguma forma, Tmj!! Grande Abraço!
@@guilhermechinaglia agora to com outro problema kkkkkkk não sei ligar o registro e o login a um botâo
Me chama lá no Instagram @guilhermechinagliadev, vou ver no que posso te ajudar.
Muito bom, parabéns!
Obrigado Mickael, Tmj, Grande Abraço!
Você parece com o David Wallace de The Office hahaha
Muito massa cara, conteúdo de qualidade.
Kkkkkkk vlw Eric Tmj!!! Grande Abraço!!
Vendo em 2020 BOM DE MAIS A EXPLICAÇAO
Opa Matheus que bom que curtiu Tmj!! Grande Abraço
obrigado por compartilhar conhecimento amigo.
Opa Rogério, disponha. Obrigado por acompanhar. Grande abraço.
parabens! excelente explicação e otima didatica!
Obrigado Henrique, Tmj! Grande Abraço
Muito bom professor!
Vlw Vinícius obrigado
Guilherme , muito bom meu amigo, ansioso para banco de dados , enquanto isso vamos dando um jeitin kkkk abraço.
kkkkkk blz Brunno obrigado pelo feedback, pode deixar que já está anotado a sugestão, Grande Abraço!
@@guilhermechinaglia muito obrigado Guilherme para nós de análise de sistemas é muito bom alguém para explicar o passo a passo.
Tmj Brunno precisando é só chamar, Grande Abraço!
Poderia fazer um vídeo extra com a conexão com o banco de dados.
Claro Gabriel, marquei esse pedido aqui. Obrigado por me acompanhar, Abc
Verdade.. Também estou querendo muito um video assim
Esperando esses vídeos ótimo conteúdo..
Ainda não saiu esse vídeo?
rsrs pessoal mandou tbm lá no Instagram pode deixar que vai sair sim pessoal!! Grande Abraço
Ótimo Vídeo!!! estou aprendendo muito, parabéns!!
Vlw Cinthia obrigado!! Grande Abraço.
Gostei da didática.
Obrigado Sidnei, Tmj! Grande Abraço!
@@guilhermechinaglia Aguardo a segunda parte!
A playlist já está completa achou a segunda parte? Grande Abraço
Conteúdo maravilhoso!
Obrigado Ivoneide, bons estudos!! Grande Abraço
Incrível, parabéns
Obrigado amigo, Grande Abraço.
Eita cara fera
Vlw Samuel Tmj! Grande Abraço!!!
Cara muito bom
Muito obrigado Cleyton, Grande Abraço
Simplemente incrível🤩, estou estudando html, css, e js, se possível, pfvr mostra como faz e explica a parte do banco de dados, para tornar essa página de cadastro 100% usual tanto no front quanto no back end, me ajudaria bastante
Opa Francisco, já anotei a sugestão, a galera tem me pedido isso, quando tiver um tempinho vejo pra gravar. Grande Abraço
Bacana, parabéns!
Obrigado Felipe! Grande Abraço.
EXCELENTE
Obrigado!!! Grande Abraço
Parabéns, ótimo video. Me tornei inscrito.
Obrigado por acompanhar Eduardo. Grande Abç
Iniciando essa playlist
Bacana Jean, qualquer coisa estou por aqui! Bons estudos. Abraço
@@guilhermechinaglia Obrigado!
voce é o cara
Vlw, muito obrigado! 👍
Manooooo, que issooooo!!!
🚀🚀🚀
gostariamos que tivesse uma video aula com interação com java e banco de dados. agradecemos desde já
Valeu fera
crie uma playlist, fazendo o back-end também
Video Muito Bom. falta ele ser responsive. Muito obrigado +1 inscrito
Obrigado pela sugestão, um vídeo tornando-o responsivo! Grande Abraço
@@guilhermechinaglia Perfeito!!!
Obrigado Dilton. Abc
Boa tarde muito bom o conteúdo, eu gostaria que vc indicasse um que ligasse a um banco de dados
Opa Cleiton tudo bem? Que bom que curtiu o conteúdo, eu infelizmente não tenho algo para te indicar aqui no TH-cam, já tentou pesquisar pelo TH-cam? Grande Abraço
Fortalecer
gostei muito do video só uma recomendaçao é aumentar a letra pois eu tive bastante dificuldade de ver
Obrigado pelo feedback Beatriz!! Tmj!!
top amigão!!
Obrigado Mateus. Abç
O que é localhost e como fazer um desse?
Clelson tudo bem? Quando falo localhost me refiro ao servidor "emulado" em minha máquina, apesar de ser um dos meus primeiros vídeos dá uma olhada nele
th-cam.com/video/pHo3IYaLML8/w-d-xo.html
e veja se consegue esclarecer a sua dúvida, e qualquer coisa estou aqui ou pelo Instagram @guilhermechinagliadev
@@guilhermechinaglia Obrigado, vou assisti lá!
muito bom
Olá Augusto obrigado pelo comentário, Grande Abraço
que plugins é esse que vc usar para completar o codigo!?
É o Emmet ele já vem no visual studio code, só começar a digitar e dar um tab qdo o Emmet encontar a TAG correta.
Qualquer dúvida chama no Instagram, @guilhermechinagliadev
Grande Abraço!!
quando um usuario faz um cadastro para onde vão essas informações de cadastro para quando esse usuario for fazer login ? o propietário do site tem controle de quem faz castasdro em seu site ? Se sim, como ?
Fala Nikki blz? Resumidamente, quando o usuário realiza o cadastro estas informações vão para um banco de dados onde ficam armazenadas. Quando o usuário retorna ao site e insere as informações cadastradas, as informações são conferidas no banco de dados, estando os dados corretos ele consegue entrar na página solicitada.
Qualquer dúvida só mandar msg, Grande Abraço
como consigo um banco de dados ?
Imagine um banco de dados sendo um tabela de Excel onde vc consegue guardar informações e ao mesmo tempo acessá-lo.
Existem diversos sistemas que gerenciam bancos de dados ex MySQL, ORACLE, SQL Serve etc.
Muito bom!!
Obrigado, estou fazendo o Upload da 2ª Parte, Abç
Poderia fazr um video de como conectar essa tela com outras de um site.
Olá Laryssa bom dia, muita gente me pediu já pra fazer isso e já anotei como sugestão, estou aguardando ter tempo pra gravar algo neste sentido. Obrigado pelo comentário.
Grande Abraço
Boa noite professor, adorei está tela de login. Eu posso utilizar ela em meus sistemas após terminar as aulas?
Boa noite Marcos claro pode sim. Grande Abraço!!
seu canal é explicativo mas simples humm
Show brother!!!
Guilherme? se possível faz um vídeo de alerts do bootstrap, mas sendo exibido no campo faltante.
Beleza Otávio, recebi sua mensagem no celular ainda não respondi por conta de estar editando os vídeos aqui, mas já te respondo, e pode ter certeza que vou fazer vídeos sobre o Framework Bootstrap sim! Obrigado por me acompanhar. Abç
Acompanhei e estou fazendo umas edições para não ficar parecendo que só copiei código
Showww Gabriel depois se puder mostra como ficou sua versão, Tmj!! Grande Abraço 🚀🚀
Cara, ensina como fazer para juntar meu site com meu banco de dados?
Meu site tá pronto e meu banco de dados também, mas não sei como linkar os dois.
Quero também fazer um campo que aparece para o cliente mas somente eu mudo os valores de cada um.
Opa blz, com relação a integração com banco vou gravar sim, assim que der um tempo aqui. Grande Abraço
Olá
boa noite
Gostaria de um informação sobre a folha de estilo. Em meu projeto, algumas vezes a folha de estilo não carrega. Reinicio o wampserver, atualizo a página... a folha de estilo só carrega quando troco o nome do arquivo css (nome.css) e do link no HTML. Tá um saco isso já...
Opa Jefferson td bem?
Você consegue mandar msg lá no meu Instagram, assim consegue mandar imagem ou vídeo pra eu tentar ver o que pode estar acontecendo.
@guilhermechinagliadev
Grande Abraço!!
muito bom.
Obrigado Afranio. Grande Abç
gostaria da continuação - os comandos de envio php e banco de dados
Já anotei as sugestões do pessoal pedindo a parte de backend, assim que tiver algo eu gravo
Grande Abraço
OLá. Obrigado pelo conteúdo. Se possível, deixe a fonte maior ok.
Obrigado pelo feedback, Grande Abraço 🚀🚀🚀
gostaria de fazer o mesmo, utilizando 3 formas de login e registro e uma mudança de cor para cada tipo de usuário(considerando que cada um terá informações diferentes para se conectar, não apenas Nome e senha).
exemplo: Professor(vermelho), Diretor(verde), Aluno(azul)
Agradeço qualquer dica ou ajuda.
OBS:. Ótimo canal e com quantidade de inscritos nada justa, deve ser a falta da galera dar uma compartilhada pra dar aquela força. Agradeço pelo conteúdo.
Fala Emanuel blz? Obrigado pelo comentário, então não sei se compreendi muito bem a sua dúvida, mas você quer que tenha um tipo de tela (cor) pra cada usuário (Professor, Diretor e Aluno), você pode colocar um campo select pra o usuário escolher que tipo de acesso ele vai fazer se é como Professor, Diretor ou Aluno, e assim que ele seleciona você alteraria o layout (cor) da tela. Não sei se assim te ajudaria. Grande Abraço, qualquer coisa chama no instagram @guilhermechinagliadev
@@guilhermechinaglia qualquer sugestão é uma ajuda. Considere o modelo que você fez, seria uma cor para o login e uma para o registro dentro dos content?
@@guilhermechinaglia ja vou seguir agora!
@@emanuelfelipesimoesdesouza5498 deixa eu ver se entendi, você quer trocar as cores junto com a troca das transições, se eu clicar em cadastrar e trocar de lado ele troca as cores também seria isso?
@@guilhermechinaglia exatamente
Só de usar linux já ganhou meu like
Kkkkk vlw Alexandre. Grande abraço