Criando um formulário de login responsivo com HTML e CSS
HTML-код
- Опубликовано: 1 окт 2024
- Nesse vídeo explico como fazer um formulário de login com animações utilizando HTML e CSS (e responsivo)!
Não se esqueçam de inscrever no canal e dar um like nesse vídeo se gostarem! ❤️
Se tiver alguma dúvida, só me perguntar aqui nos comentários que estou sempre à disposição!
Muito obrigada por assistir!
Código completo do projeto: github.com/gio...
Me acompanhe no instagram também: / girl.coding
![Tela de Login e Cadastro Interativa - HTML5 & CSS3 - [Parte 1]](http://i.ytimg.com/vi/GtsNZtzZiec/mqdefault.jpg)
Olha... Se eu te contar que é a PRIMEIRA vez que eu vejo um tutorial sobre programação feito por uma mulher no RUclips? Bem louco mas foi muito bom, realmente desejo que outras Devs se inspirem em você e criem seus canais no RUclips. Parabéns pelo vídeo! (Parei tudo que eu tava fazendo e vim do insta 😎)
Nossa muito obrigada!! Fico muito feliz lendo isso ❤️
@@giovanna.moeller 🚀👩💻
Concordo Raphael, muito melhor aprender, na minha opinião que fui criado por mulher, aprendo melhor do que vendo homem.
Ela é top, aprendendo muito com ela! Me representa!
@@giovanna.moeller quando eu copyei o link do fecebook veio incompleto sem o script e nada
MEU DEUS, EM 8 MINUTOS JA ME MOSTROU TANTA COISA QUE EU NÃO TINHA VISTO😂 Mdsss posta mais videos pfv, vc é uma excelente prof
Ah vi os stories muito tarde, cheguei achando que seria uma das primeiras e cá estou estou, depois de uma montanha de comentários e 180 inscritos 🤡
Sucesso Gi! 💞
caracaaaaaaa, muito maravilhoso. vou tentar seguir ele amanhã, mas namoral, tu explica mto bem. amei
muito obrigada!! fico feliz demais lendo isso ❤️
Muito Bom!! Parabéns. Eu curto muito estilos em CSS, porém não percebo muito bem. Faz um vídeo explicando cada uma das tags e etc. Acho que ajuda muito.
É tão bom ver uma mulher fazendo vídeos assim, amei e vou reproduzir! Continue fazendo vídeos assim, sérioo
Eu fiz o meu e deu tudo certo, porém, eu mudei a cor do formulário para preto, e quando eu preencho o formulário digitando, o background do input fica normal, ou seja preto. Mas, ao selecionar o input e clicar em uma das sugestões que aparece, o input fica todo branco. Você pode me da um help com isso?!
Oie, tudo bem? Então, existe uma grande discussão em relação a estilização do autocomplete do browser. Veja nesse fórum aqui: stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
Moça por favor se possível fala sobre esses tamanhos responsivos e sobre o position de uma forma melhor
Acabei de me inscrever 💜 muito bom seus conteúdos gostei
Giovanna muito obrigada por ser tão maravilhosa, você está me fazendo ter gosto em estudar programação novamente, tinha perdido a vontade com professores sem didática, e tutoriais que se diziam simples e para iniciantes, mas que na verdade eram complicados.
Continue com o excelente conteúdo, sucesso!
Muito obrigado. Adorei seu tutorial, aprendi muito em 23:16. Eu ia até te falar que esse símbolo "~" é til, mas nem importa, você explica tão bem que poderia chamar de cifrão que entenderíamos. Mais uma vez, parabéns, bem didático .
ahahahah foi um errinho mesmo, mas muuuuito obrigada de coração ❤️❤️
Eu queria aprender a criar um menu hambúrguer por favor .
E como inserir conteúdo dentro dele.
*Parabéns pelo vídeo já me inscrevi no seu canal. Faz um tutorial de um formulário que o usuário faça login com uma conta do Google, assim que o usuário fazer login apareça uma pagina com um questionário simples (nome, cpf, email e opnião) depois salve essa resposta e os dados do login em banco de dados, logo em seguida aparece uma pagina de agradecimento*
cheiro de tela fake kk
Gostei muito desse tutorial, muito bom mesmo. Eu estou vendo varios vídeos sobre html e css pois quero ir "codando" por codar para que eu me acostume com os tags e tudo mais, porém sou um completo iniciante. O que eu fiz foi pedir para o ChatGPT analizar o códigos em html e css e explicar para um leigo, como eu. Vou deixar a forma como pedi para que caso alguém também queira entender melhor.
"Oi, ChatGPT. Tudo bom? Eu quero aprender mais sobre html e css, porém sou um completo iniciante. Eu vou postar um código em html primeiro e depois o código em css, tudo bem? Gostaria que você agisse como um tutor que me explicasse o porquê o programador resolveu utilizar um tag ou algum recurso e o que esse tag ou recurso representa e outras formas de utiliazar isso e se também tiver alguma outra sugestão de que outro tag ou forma eu poderia fazer para cada caso, citar também. Gostaria que dividisse o código em partes para explicar melhor cada uma, porém as partes que chamam outras, que você explicasse essa associação também. Em resumo explicar com uma didática voltara para um leigo, se quiser até usar exemplos do mundo real para melhor compreensão, pode ficar a vontade, vou gostar. Com isso vou te passar primeiro o código em html, ok? depois de você me explicar, eu te passo o código em css e você me explica com base no html, certo?"
Ajuda bastante e Giovanna, não precisa falar como se fosse um tutorial sobre tags e outras coisas, assim do jeito que você ta fazendo tá perfeito, as dúvidas que eu tiver, procuro sanar eu mesmo, vai ser melhor pra mim como programador ir atrás e quebrar a cabeça. Obrigado pelo tempo dedicado!
Gostei bastante, mas impaquei no script src. O do site é diferente do que você colocou e tô quebrando a cabeça e não consegui então salvei a imagem.
então, o script é de um site chamado font awesome! para conseguir, voce precisa criar uma conta se não me engano, aí eles mandam esse script pra vc!!
Incrível, ficou maravilhoso, e foi super fácil de reproduzir! Obrigado!!!
5:35 quando vou resetar o css, não funciona. fica asterisco sublinhado vermelho.
* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;}
E a caixa de notificação:
Selector Specificity: (0, 0, 0)
media query expectedcss(css-mediaqueryexpected)
View Problem (Alt+F8)
No quick fixes available
Pode me ajudar ?
Estou tendo um problema para usar o ícone
Do Twitter , como vc conseguiu a imagem ?
usei o site font awesome!!
Parabéns pelo vídeo! Muito bem explicado! :)
Muito bom seu vídeo mas fiquei com uma duvida, como consegue esse scritp do font awesome no minuto 1:20?
voce precisa criar uma conta lá no font awesome que eles vão te mandar o script por email!
Excelente. Obrigado e parabéns pela didática e desenvoltura.
Quero começar a estudar programação, por onde começo ?
Qual melhor programa pra começar ?
começa por lógica de programação!!
olá, boa tarde, Giovanna!
Estou iniciando no front-end, faz um mês, porem, estou tendo certas dificuldades, pois geralmente pego alguns exercícios que acho interessante no RUclips, e tendo replicar, portanto, percebo que quando o projeto requer algumas transições em CSS ou mesmo precisa de algumas linhas de código Javascript ele não funciona mesmo os código estando igual ao original.
por acaso sabe o que pode esta acontecendo?
é o meu navegador que não esta conseguindo lê os códigos?,
é o meu vscode que não está configurado direito?
ou será que sou ruim mesmo, que nem um projeto consigo fazer ?
CARALEOOOOO, no momento q eu conseguir fazer metade disso tudo eu peço demissão do meu emprego. INNNNNCRÍVELLLLL
Ensina a baixar o app pra progamar
Parabéns pelo Tutorial, pontos fortes: Calma e claridade na explicação (realmente tu tem dom para isso), Ponto fraco: Edição. Para o primeiro vídeo está ÓTIMO. Parabéns pelo andamento do canal!!!, acompanho faz tempo seu perfil no Insta, continue fazendo estes tipos de tutorial, é muito atrativo.
To mt perdido em CSS chega nessa parte de padding, margin, justify-content, justify-content, align-items, align-self etc... Me perco muito 🥺 iniciante .
Tenho uma dúvida, qual a diferença de se por min-height=100vh e min-width=100vw para width=100vw e height=100vh ?
Muito obrigada pelo vídeo. Já estou te seguindo, conteúdo maravilhoso!
Vídeo muito bom! Me ensinou muito, mas eu não consigo aplicar a tecnica que você usou o :: before no meu css de jeito nenhum :/
Parabéns, senhorita, pelo seu primeiro vídeo no canal. De onde vc é ?? Hoje é dia 31-ago-2021, terça.
Fiz esse formulário adorei muito bem explicado.
ruclips.net/video/I5_T547tHf0/видео.html
Esses projetos ( Login, cadastro e home) serve para colocar no portfólio??? ( No meu estado é difícil conseguir estágio.)
O único problema do vídeo é que você '' jorra '' códigos. Não é uma vídeo aula, eu tendo, porém esse é o único ponto negativo. Mas, conheci muitas tags novas e um jeito novo de fazer um formulário.
parabéns pelo conteúdo... desejo sucesso no youtube... Abraço
Oi!
Você fala de um plug-in no começo e diz que ajuda bastante. Qual é o nome dele? Se possível me diz pra que ele serve.
Excelente aula!
Show de bola, mais um inscrito. Parabéns.
Meu Deus que prazer ouvir essa voz fofa durante o vídeo hahaha, parabéns excelente trabalho! só queria pedir pra vc explicar oq os códigos significa ou oq cada um deles vai fazer? usando o
Caraca, parabéns pelo vídeo. Caí de paraquedas e gostei. Muito bem ficou show, vou assistir os outros agora.
Amanhã mesmo vou correndo pra fazer essa tela de login. Ficou simples, mas ficou lindo dms. Adorei!👏🏼👨🏻💻
Quero mandar um salve pra meu colega MALTA SELENIO ele é que min endicou esse canal 😇
Ficou bem shooow... vi muita coisa nova muito loco está de parabéns. Seria legal se tivesse comentários no css a cada passo. Já me escrevi!!!!!!
Eu olho para esse tutorial e fico pensando: Quando chegarei nesse nível aí, codando com tanta tranquilidade e rapidez, como se fosse algo tão natural...
Comecei a estudar HTML e CSS em dezembro e não sinto que estou evoluindo, chega dar um desespero e a ansiedade toma conta.
Achei fofo vc elogiando o projeto conforme ia fazendo kkkkkk
Legal, deu pra praticar!
Acento cincunflexo ou til? Adorei o vídeo. Realmente não parece que seja seu primeiro vídeo. Eu realmente não sei como que eu vou aprender isso tudo, kkkkkk.
gostei muito da explicação, uma ótima didática. 👍👍
Meu comentário é meio atrasado, mas, os ícones não aparecem na minha tela, fica só um quadrado pequeno com o texto na frente. Alguém pode me ajudar
Estou iniciando no estudo da programação, e estou tendo muita dificuldade em entender os caracteres, como aspas, parênteses, underlines, chaves........esses caracteres aparecem automaticamente, ou temos que colocar manualmente, pois já assisti dezenas de vídeos de vários canais, e ninguém explica quando, quais e como usar esses caracteres.
Assistiu as aulas do curso em videio ehin kkkkk. Excelente video, muito exclarecedor.
Que irado Gio, que talento em, não para não em, me amarrei, posta mais vídeos please....
tive um problema ali na parte do flex-directio: column;! tipo, ele não muda nada... O que pode ser
Muito bom, deu pra entender varias coisas sobre o CSS, estou no 3 semestre da faculdade e eu fico surpreso o tanto de coisa que meu professor deixou passar, pelo visto não sei nem 10% de CSS, vou ter que fazer um curso por fora pra não ficar pra trás. Vou usar em css em um sistema de login de PHP. Otimo video.
Fiz tudo, ficou quase igual, a não ser pela linha roxa do password estar abaixo do facebook, ja revirei o codigo, sei onde as linhas entram, porem não consigo deixar ela , no local correto kkkk. Mas obrigado, realmente uma tela de login muito bonita.
Parabéns pelo conteúdo, já me inscrevi!
Oie, como configurar o Studio Code para ficar assim? Tentei fazer aqui no meu, mas ele está de um jeito diferente..
acho que não precisava da div.underline, já que você colocou os input em uma div, era só ir no css e criar um pseudô elemento pra ela, deixaria o html mais limpo, mas ficou muito bela essa tela de login!
Há quanto tempo você estuda programação? 😇
Oii, fiz exatamente como você mas o container do twiiter e do facebook não fica alinhados com o Continue.
caralho, que tanto códico é esse rsrs olha que é o basico imagina o avançado rsrsr
você é muito inteligente, me ajudou muito, obrigado :D
Muito bom seu projeto, muito obrigado pela ajuda. Ele pode ser colocado no GitHub por outra pessoa ? Nesse caso eu.
BRABA ! Muito bom, espero que tenha muito mais, me ajudo bastante. Aprendi tudo isso, de uma maneira simples.
Obrigado.
Sucesso!!
que extensão é essa que vc escreve o codigo e ele já vira em código? igual vc fez com o div e o form? vc nem escreve o código só escreve a palavra dps que ele vira código..
Parabéns consegui inserir algumas coisas em meu site e aprendi algo que n sabia vlw kkk. quebrei a cabeça em algumas coisas pq o site ta cheio de gambiarra pra ficar responsivo mais foi kkkkk. vlw a aula tava top nem parecia que foi a primeira kkk
ja tentei de tudo mas meu input do type -= submit nao puxas as propriedades css , e o back graund gradiente nao funciona , quando puxo back graund color ele aceita
E possivel coloca essa tela de login no meu site da yampi? Se me responder fico grato❤
Isso é incrível, a primeira mulher que vejo no yt, ainda mostra fazendo programação 😍
Sensacional, me inspirou pra fazer!
Parabéns! Tem algum lugar que posso tirar dúvidas com vc?
Muito obrigada!! Pode me chamar lá na DM do instagram: @girl.coding
KKKKKKKKKKKKKKKKKKKKKKK o position me quebra , principalmente agr que to começando , sempre apanho para alinhar textos e imagens
NUNCA VI UMA MULHER ENSINANDO SOBRE PROGRAMAÇÃO! ADMIREI MUITO O SEU TRABALHO
Que vídeo sensacional, parabéns pelo trampo, esperando ansiosamente os próximos tutoriais!!!
Moça o meu não tá aparecendo as figuras do twitter e face.. q q eu faço ?
Muito toop.. que explicação ... parabéns
Primeiro, parabéns pelo vídeo!!
Achei o vídeo super profissional, e por ser o primeiro vídeo seu fazendo tutorial, realmente surpreende.
Bem preparado, e mostra que domina totalmente o assunto. Ví coisas de CSS que eu nem sabia que existia.
Tinha visto o formulário de CSS da Rafaella Barelinni e achei o seu bem melhor. Mostrando até mais técnicas, mais didático e utilizando essa biblioteca de ícones.
Como ideia de conteúdo, vc poderia trazer mais fontes de bibliotecas de coisas úteis para desenvolvedores?
Você manja de back-end também? seria ótimo tutoriais didáticos, direto e com essa qualidade assim pra programação.
Sucesso!! Ganhou um inscrito!!!
muito bom o conteúdo, me inscrevi hoje e ja assisti 4 videos.
parabens
Conteúdo show de bola, Gi ! Parabéns 👏👏👏
como faço para colocar apenas parte do comando e o sistema identificar e colocar todo o comando?
tipo: div.input
Tectectec tectectec esses barulhos das teclas sendo apertada e um código na tela não tem coisa melhor por muitas dores de cabeça tentando achar o erro em alguma linha mais é muito gratificante ver o resultado .
Geovana falo que essa tela de login dela é simple meu deus eu nao consigo fazer nem a metade do que ela fez, tutorial fico muito bom :) gostei
Faz um vídeo de como criar um site responsivo html + css.
Seria interessante vc explicar cada etapa, vc coloca varias tags e nao vai explicando a funçao, isso para o iniciante é complicado de entender.
fiquei perdido com esses comando que nunca tinha visto kkkkk
Não consegui usar o style.css login do Github!
Esse site de ícones não tem direitos autorais não né? Só eu tenho medo dessas coisas? Kk
Olha que legal, arrasou, Caracas muitas coisas legais vlw vc e top
Vídeo magnífico! Obrigado por compartilhar, ganhou mais um inscrito :D
Como faz pra dividir a tela e 2? com o vscode e o navegador com o resultado?
O código precisa de ser em ordem? Ou a ordem não altera o produto final?
Incrível, vídeo muito bom mesmo, me ajudou muito, principalmente na parte do CSS. Obrigado !!
Amei DEMAIS! Sempre procuro canais que fazem tutoriais mais fáceis assim e, principalmente, que mexam com estilização! AMEI! Obrigada por ser uma inspiração!
Muito bom ainda mais eu que estou iniciando no front end amei!
Agora implementa esse formulário em html, mandando tudo que for escrito para o email por exemplo. O mayk ensinou mas n mostrou tudo, se podia quebrar ele na imendar e fazer um tutorial completo kkkkkk Sua didática é a melhor que eu vi até hoje! Era nitido o seu nervosismo, mas confesso que vi cada segundo do vídeo e fiquei preso .
Vou mandar para minhas amigas que estão começando na area e para as que não sabem qual carreira seguir heheheehe
Muito bom! Continue com o belo trabalho, estou começando na programação e sempre curto esse tipo de tutorial! Parabéns!!
Somos 2!
Vc pod ensinar tbm a fazer isso com o php html e css e usar backend
Mas onde você cria isso? É algum tipo de programa?
faça uma outra pagina e mostra lincando esta com a outra . preenchendo os dados entrar para um outro pagina
Seria bacana linkar ele com algum banco de dados pelo MySQL, pensas em fazer algo a esse respeito? Vídeo muito bem explicado, parabéns!
Ensinou muito mais do que uns curso ai com D que custa 300 conto e puro merchan.
Nao consegui pegar o script. Vc Ja tinha copiado 😥 mas nao sei como colocar
Como faço pra quando a pessoa colocar a senha e o login eu conseguir ter acesso?
Muuuuuuito legal, obrigado pelos ensinamentos!