Formulário de Cadastro RESPONSIVO (Responsive Registration Form) | HTML e CSS

Поділитися
Вставка
  • Опубліковано 30 вер 2024
  • Nesse vídeo eu mostro como fazer uma página de FORMULÁRIO DE CADASTRO RESPONSIVO, usando HTML e CSS.
    Link para sites usados no vídeo:
    Imagem: undraw.co/illu...
    Fonte: fonts.google.com/
    Link para repositório do GitHub:
    github.com/Lar...
    Instagram: @lariikich

КОМЕНТАРІ • 333

  • @guizu5555
    @guizu5555 Рік тому +28

    mano kkkk como eu consigo errar mesmo vendo o tutorial que odio

  • @InteligenciaJ
    @InteligenciaJ Рік тому

    Fantástico, parabéns pela explicação e o vídeo. Tudo muito bem feito, volto a repetir parabéns.

    • @larissakich
      @larissakich  Рік тому

      Muito muito obrigada, fico feliz ❤️

  • @elizasilva9745
    @elizasilva9745 2 роки тому

    Muito bem explicado! Gostei de mais

  • @Eren-kz1zw
    @Eren-kz1zw Рік тому +1

    O meu simplesmente biga,já revisei umas 5 vezes e meu gender input fica em culuna ,já tentei tudo oq eu sei,e simplesmente nn fica ,e por isso todos os meus itens ficam em uma coluna q vara a tela toda do Pc,socorro

  • @Li-rn4pp
    @Li-rn4pp 4 місяці тому

    maravilhosa

  • @frangogame896
    @frangogame896 11 місяців тому

    salvou o projeto 🙏

  • @piter3118
    @piter3118 Рік тому

    qual extensão vc usa pra ver a largura da página?

  • @bhagyanugawela3306
    @bhagyanugawela3306 2 роки тому

    Good video

  • @endelnaiva
    @endelnaiva 6 місяців тому +1

    Seria o melhor tutorial NÃO FOSSE A GALOPEIRA que ela fez o vídeo, para quem está aprendendo
    JAMAIS PODE SER NESSA PRESSA . infelizmente estragou a aula por isso.

  • @eversonkpequeno6639
    @eversonkpequeno6639 2 роки тому +50

    Bom demais. O próximo deveria ser como gravar as informações desse cadastro seria maravilhosa. Já está muito top!!

    • @iDontHaveName-d5q
      @iDontHaveName-d5q Рік тому +2

      krl os vovo tao tudo virando dev 😱😱😱😱😱

    • @paulo6000
      @paulo6000 Рік тому

      KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK@@iDontHaveName-d5q

  • @jhonysilva1161
    @jhonysilva1161 5 місяців тому +5

    Muito bom, coloquei na velocidade 0.75 para conseguir acompanhar o raciocínio e aprendi muito com sua aula, parabéns

  • @bachelor9861
    @bachelor9861 2 роки тому +6

    Na minha classe .input-box meu margin-bottom ficou 0.5rem, pois com 1.1rem ficou saindo do form.
    Acho que isso depende de tela pra tela.
    Ótimo vídeo!

    • @larissakich
      @larissakich  2 роки тому +1

      Siim, depende do tamanho da tela. E muito obrigada, que bom que gostou do vídeo ☺️

    • @professorcarlos-tecnologia
      @professorcarlos-tecnologia 2 роки тому +1

      Me salvou, eu tava quebrando a cabeça kkkkk

    • @bachelor9861
      @bachelor9861 2 роки тому +1

      @@professorcarlos-tecnologia kkkkk tb quebrei a cabeça um pouquinho.

  • @huanfiguereido4302
    @huanfiguereido4302 Рік тому +12

    Não para de gravar vídeos, você ensina melhor que muito professor, ontem aperfeiçoei algumas coisas que eu tava custando aprender sobre Javascript vendo um vídeo seu que nem focado no tema era

  • @nin9zinha
    @nin9zinha 2 роки тому +4

    Amei o vídeo, você explica muito bem e seus projetos ficam lindos!!
    Só queria saber uma coisa, alguém sabe onde (em que site) eu posso pegar aquelas imagens png pra usar nos meus projetos com boa qualidade e sem direitos autorais?

  • @vitormendes7765
    @vitormendes7765 2 роки тому +1

    Só comigo não funcionou?
    até baixei pelo git, mas quando fica em coluna n funciona o ''wrap'' e fica tudo em cima do outro, help pleasee

    • @karolcossatis
      @karolcossatis 2 роки тому

      O meu tbm! Tentando sacar o que houve ha tempooo

  • @fabioresendeoficial
    @fabioresendeoficial 3 години тому

    qual e esse curso que nos faz pra ser um programador.. tou fazendo sistema de informação.. mais ja quero ser programador .. qual curso fazer??

  • @antoniocarlosalvarenga9423
    @antoniocarlosalvarenga9423 2 місяці тому +1

    Top. Excelente. Muito obrigado!

  • @andrehenrique6037
    @andrehenrique6037 Рік тому +8

    Que qualidade excepcional de vídeo! Parabéns. Por favor não pare com o seu conteúdo, ele é um serviço essencial para programadores novos (Como eu por exemplo, novo em HTML & CSS).

  • @vandro9370
    @vandro9370 Рік тому +1

    Olá boa noite.
    Tenho uma questão:
    O que a senhora faz antes de "codar", quais são as etapas para o desenvolvimento de uma página.

  • @golpacto
    @golpacto Рік тому +2

    Muito bom! Eu evitaria o uso de e tags de título, visando uma melhor semântica para o formulário, o que é uma boa prática. Em vez de e , eu usaria e para agrupar elementos de formulário relacionados, no lugar das .

  • @Midorya-qo9vs
    @Midorya-qo9vs 2 роки тому +1

    Like!

  • @oconsertador9021
    @oconsertador9021 5 місяців тому

    Desculpe a pergunta, mas... da onde foi que esse ".input-box input { padding: 0.8rem 1.2rem; }" saiu? Que conta você teve que fazer pra pegar esses números???

  • @jadirlopesdasilva2996
    @jadirlopesdasilva2996 3 місяці тому

    Ola, Larissa!
    Antes de qualquer coisa, gostaria de agradecer-lhe pelo video muito bem detalhado.
    Sou iniciante e gostaria de lhe fazer uma pergunta.
    Quando vc diz que o formulário está responsivo ,quer dizer que vc ja consegue entrar com os dados, como e-mail,senha e etc.?

  • @nyckluck3051
    @nyckluck3051 2 роки тому +4

    Ótimo vídeo, fiz algumas alterações no meu, mas no final deu tudo certo, continue fazendo vídeos assim, vc explica muito bem. Aliás + um inscrito 👌

    • @larissakich
      @larissakich  2 роки тому +1

      Muito obrigada, assim que der vou postar mais 😊

    • @MarcusVinicius-oh5uh
      @MarcusVinicius-oh5uh Рік тому

      Menina, vc é o cão chupando manga.
      Muito inteligente!

  • @marcelosilvadarocha4597
    @marcelosilvadarocha4597 4 місяці тому

    Larissa, bom dia, parabéns pelo vídeo. eu fiz um formulário seguindo teu vídeo, porem são duas telas além da primeira tela inicial. Como faço para lincar as três telas: a primeira tela clicar no botão próximo indo para segunda tela, segunda tela clicar no botão próximo, indo para terceira tela, na terceira tela clicar no botão enviar para ser salvo em um BD?
    forte braço

  • @lucasbarboza-j5b
    @lucasbarboza-j5b Місяць тому

    "Esse é o Galaticos 2.0"
    Real madrid motou uns 4 "Galaticos" antes desse kkkk

  • @trevagamer1633
    @trevagamer1633 Рік тому +1

    Vou tentar fazer esse , sou novo nesse mundo , gostaria de dicas ,tipo como gravar o que cada Tag /comando vai fazer , eu acho que é praticando , mas eu não sei como praticar , eu estou aprendendo HTML ainda não sei CSS . Como você estudou ? faz um video dando dicas desse tipo por favor!

    • @francinedanielle
      @francinedanielle Рік тому

      Se ainda precisar, na fundação bradesco (online) tem um curso muito bom de CSS, é gratuito e depois de fazer uma provinha (super fácil) ele libera um certificado

  • @leonaugusto000
    @leonaugusto000 11 місяців тому

    Quase me afogo no tanto de baba que há aqui nos comentário... O projeto ficou muito bonito, mas falhou com a responsividade. Você trabalhou com grande medidas, imagino que se baseou em seus aparelhos, a questão é que se eu acessasse um site com o seu formulário no meu notebook/celular, ele viria quebrado para mim. No entanto, é só fazer alguns ajustes e fica perfeito! Tenho gostado muito dos seus vídeos, eles são ótimos! (obs.: o que eu vou roubar de código não é brincadeira haha)

  • @maxdennerpereiradias6121
    @maxdennerpereiradias6121 4 місяці тому

    Oi, boa noite , estou com uma dúvida , fiz o mesmo projeto que vc fez seguindo seus passos e dicas , só que quando eu abro o arquivo index.html pelo navegador fica a página em branco e não aparece nada , mais quando eu abro pelo visual code , aparece tudo certinho , poderia me dizer o pq que acontece isso ?

  • @alexandrepereira7238
    @alexandrepereira7238 2 роки тому +3

    Muito legal, obrigado por compartilhar! Estou começando a aprender, e conteúdos assim fazem a diferença. Abraço e sucesso.

    • @larissakich
      @larissakich  2 роки тому

      Valeuuu, que bom que gostou ☺️

  • @adelsoncryssouza1305
    @adelsoncryssouza1305 6 місяців тому

    MUITO TOP!!
    finalizei. Mas o meu código, não ficou ao lado como no vídeo!!

  • @kauannycristinapereiramont6566
    @kauannycristinapereiramont6566 2 роки тому +1

    Minha deusa cade novos vídeos??? tem criança de colo chorando aqui

    • @larissakich
      @larissakich  2 роки тому +3

      Oiii, fiquei um tempo fora por conta da escola, mas hoje de noite quero gravar um novo vídeo, se tudo der certo eu posto ele ainda essa semana ❤️

    • @kauannycristinapereiramont6566
      @kauannycristinapereiramont6566 2 роки тому +1

      @@larissakich perfeita!!!❤

  • @jaazielferreiradasilva3952
    @jaazielferreiradasilva3952 2 роки тому +1

    Parabéns,
    pelo vídeo, está me ajudando muito. Estou fazendo uma tbm, e gostaria de uma ajuda. A imagem, não estou conseguindo centralizar, e não sei o que está acontecendo. Já troquei a extensão .sgv para .png, já reescrevi o cod no cdd, mas tbm não vai. O que posso estar fazendo de errado?
    Muito obrigado.

    • @marosilvv
      @marosilvv 2 роки тому

      ou o tamanho da imagem ta diferente do proposto
      ou a div ta escrita errado

  • @queziaqueren9358
    @queziaqueren9358 11 днів тому

    Mulher do céu ,tu explicas muito bemm

  • @ajinacios
    @ajinacios Рік тому

    Tô usando esse formulário num projeto, com as devidas adaptação.

  • @felipesgarbi2665
    @felipesgarbi2665 Рік тому

    qual curso voce fez da Alura ou da B7 web? sei que tem vários dentro da plataforma?

  • @vitorfreire6991
    @vitorfreire6991 4 місяці тому

    pqp muito bom vc tbm tem videos relacionados a front_end?

  • @elivanmaia2082
    @elivanmaia2082 5 місяців тому

    Alguém aqui é bom em frontend para me dar uma força em um trabalho da escola?

  • @gilmardantas9960
    @gilmardantas9960 Рік тому

    Como faz pra funcionar o botao de Entrar, colocar pra aparecer o formulario de login quando apertar no botao Entrar? Sem precisar ir pra outra pagina?

  • @matheusresende3717
    @matheusresende3717 8 місяців тому

    Fiz igual o dela porém o meu ficou diferente ao sei onde errei kakskak

  • @digitandoalgo7926
    @digitandoalgo7926 2 роки тому +1

    Mds, todo mundo usando vscode, estava por fora esse tempo todo

  • @isis7306
    @isis7306 4 місяці тому

    fantástico. muito obrigada

  • @soregressX0
    @soregressX0 Рік тому +1

    hoje eu sonhei com div kkkkk

  • @JuliaIphone-c8q
    @JuliaIphone-c8q Рік тому

    Oiii qual extensão de tema você está usando?

  • @xinglingoriginal5428
    @xinglingoriginal5428 Рік тому

    Olá, só nao entendi aquele botãp "entrar"

  • @youtubernauta
    @youtubernauta 2 роки тому +1

    Faz um chatbot em Javascript, vai ser top demais!

  • @oiwebsam
    @oiwebsam Рік тому

    So não usaria o overflow-y: scroll no input-group

  • @alexandreestival6179
    @alexandreestival6179 Рік тому +1

    Muito obrigado, assistindo seu vídeo consegui desbloquear minha mente para o html e css, eu estava com dó de criar div, eu estava criando uma div, colocava todo o conteúdo dentro dela e muita coisa não dava certo, agora criando uma div para cada conteúdo ficou muito melhor.

  • @gustavomonteiro547
    @gustavomonteiro547 Рік тому

    como e que eu faço pra colocar um formulario assim na pragina principal do meu projeto ?

  • @altairkusanagi
    @altairkusanagi Рік тому

    não grave em 60p, que o vídeo fica pesado

  • @empreendedortriunfante
    @empreendedortriunfante 2 роки тому +4

    Excelente vídeo!
    Muito bem explicado e uma ótima qualidade.
    Continue que precisamos de mais vídeos assim!

  • @silvitooo
    @silvitooo 2 роки тому +1

    Didática incrível. Só fiquei na dúvida quanto a existência de tantas divs, se existe alguma outra maneira de agrupar de forma hierarquizada. Segundo alguns cursos, usar somente divs não é recomendado.

    • @rodrigocostatv6109
      @rodrigocostatv6109 2 роки тому

      A partir do html5 existem outras tags semânticas que tu pode ir usando. tmj

  • @rosenildodariz2098
    @rosenildodariz2098 Рік тому

    Tem como enviar os dados do formulário a um Excel?

  • @daviamerico2268
    @daviamerico2268 Рік тому

    por que o space between tirou o overlap em 13:05

  • @joaojose9404
    @joaojose9404 2 роки тому +2

    Sensacional, aprendi mais com seu vídeo do que com um curso 👏🏻👏🏻👏🏻👏🏻

    • @larissakich
      @larissakich  2 роки тому

      Muito obrigadaaa, fico muito feliz 😊❤️

  • @steolivwira
    @steolivwira 2 роки тому +1

    video ficou perfeito, me ajudou muitoo, voce poderia me indicar algum site ou algo do gênero q ensine essas funções que você mostrou no video? muitas delas eu nao sabia sobre e nem das funcionalidades

    • @emanuelesantos899
      @emanuelesantos899 2 роки тому

      se achar me avisa

    • @larissakich
      @larissakich  2 роки тому

      O site do w3school tem várias dessas funções, e ensina na prática a usar alguma delas, é muito bom

  • @fernandoboueres
    @fernandoboueres 2 роки тому

    tem que baixar o material icon pro vs code

  • @danieljunior4329
    @danieljunior4329 Рік тому

    Só uma dúvida de iniciante, não estaria errado colocar o " body " como " display flex " visto que se aplicaria em todas as outras páginas, claro falando se fosse desenvolver um site completo. Para centralizar esse container eu usaria:
    {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50% );
    }

  • @flayer2011
    @flayer2011 2 роки тому +1

    top de mais cada elementos pular uma linha deixou bem legal o codigo mais facil de praticar junto com vc !

  • @miguelfernandes3106
    @miguelfernandes3106 Рік тому

    E como eu faço nesse mesmo layout um login

  • @maysabilac3439
    @maysabilac3439 2 роки тому +2

    Ameii o vídeo, me ajudou MUITOO!!! Parabéns e mt obrigada

    • @larissakich
      @larissakich  2 роки тому +1

      Valeuuu, que bom que gostou ❤️

  • @gabrielcamargo3699
    @gabrielcamargo3699 2 роки тому +2

    Parabéns, você é muito boa ensinando!
    Continue!

    • @larissakich
      @larissakich  2 роки тому +1

      Valeuu, que bom que gostou 😊

  • @isacsantana260
    @isacsantana260 10 місяців тому +1

    O projeto ficou incrível, parabéns!
    Poderia me dizer que tema é esse que você usa no VSCODE? Achei muito lindo!

    • @larissakich
      @larissakich  10 місяців тому +1

      Muito obrigada 😊, o tema é Ballerini Theme

    • @isacsantana260
      @isacsantana260 10 місяців тому

      @@larissakich Obrigado! 🤗

  • @brunoserraoliveira
    @brunoserraoliveira 2 роки тому +1

    Parabéns , ótima explicação . Ganhou mais um inscrito .

  • @c-marketing3985
    @c-marketing3985 Рік тому

    Não consigo meter a imagem 😢

  • @nasimuddin4546
    @nasimuddin4546 2 роки тому

    Really, i am the best learn

  • @unsouls
    @unsouls 12 днів тому

    Ajudou demais!!!

  • @jaguargamesyt6183
    @jaguargamesyt6183 2 роки тому +3

    EI Larissa mt obg por ter feito a criação deste design, meus parabéns, espero que você continue um bom trabalho 😁, através desse mesmo design fiz umas modificações e ficou interessante

  • @sanjanilekamge7757
    @sanjanilekamge7757 Рік тому

    Great video ...❤️.really I'm happy about it

    • @larissakich
      @larissakich  Рік тому

      Thank you, I really appreciate it ❤️

  • @BlenoMartins
    @BlenoMartins 2 роки тому +1

    Uma ideia de vídeo: Ensinando a fazer um organizador/gerenciador de tarefas

    • @larissakich
      @larissakich  2 роки тому +1

      Muito obrigada pela ideia, assim que der vou trazer um vídeo assim 😊

  • @soregressX0
    @soregressX0 Рік тому

    O meu deu errado...aff...apaguei tudo e desliguei o pc. Vou é tomar banho...vou começar a ver aulas de html, css, js

  • @GabrieldoNascimentoSantana-l1r

    só o flash para acompanhar!

  • @oxenburguer7279
    @oxenburguer7279 Рік тому

    Oi, Lari. Tudo bem? Me tira uma dúvida: Onde você comprou essa versão do seu windows 11? rs

  • @glauciacorrea101
    @glauciacorrea101 Рік тому

    Muito bom obg ajudou muito

  • @adenilsonvivendoeaprendend8093
    @adenilsonvivendoeaprendend8093 4 місяці тому

    Consegui na terceira vez que revisei para achar os erros...

  • @GabrielPoukas
    @GabrielPoukas 2 роки тому

    parabens pelo video, só uma pergunta, caso eu queira adicionar um footer no rodapé da página e deixar fixo como eu faço nesse caso de site formulario??

    • @larissakich
      @larissakich  Рік тому +1

      Oii, você pode adicionar um footer abaixo do form e colocar um position: fixed, mas você precisaria alterar algumas outras coisas também, seria um pouco complexo explicar por aqui.

  • @odivanmarcos835
    @odivanmarcos835 Рік тому

    Obrigado, massa demais

  • @alisson1766
    @alisson1766 Рік тому

    Incrível como sua explicação o flexbox, pela primeira vez, fez sentido pra mim, dei até aquele sorrisinho de idiota: "aaah então é assim que usa". Eu sempre quebro a cabeça em como usar o flexbox.

  • @queziaqueren9358
    @queziaqueren9358 11 днів тому

    obrigadaa

  • @pedrodelemosdamini3930
    @pedrodelemosdamini3930 Рік тому

    poderia passar o conteúdo mais devagar e explicando melhor o que são cada tag, pfvr?

    • @larissakich
      @larissakich  Рік тому

      Claroo, posso sim, vou tentar fazer isso nos próximos vídeos

  • @loock5262
    @loock5262 4 місяці тому

    Tu manja muito

  • @joaopauloprazeres7216
    @joaopauloprazeres7216 7 місяців тому +1

    muito obrigado, me ajudou muito ! Por favor não pare com o seu conteúdo.Continue que precisamos de mais vídeos assim! trabalho incrivel.

  • @maiconmazzy
    @maiconmazzy 2 роки тому

    Oi! Tudo bem ?? Tentei fazer dos mesmo jeito esse formulário, mas uma coisa eu tô preso e não consigo entender. O conteúdo geral do formulário não fica centralizado pra pra mim. Revisei o código milhares de vezes e ainda tô sem tô tendo problemas..

  • @lihpoo0
    @lihpoo0 Місяць тому

    Perfeito ❤

  • @joaopedroaraujodossantoste1258

    como eu faria para deixar os os inputs do radio um embaixo do outro, ficando dois de um lado (um embaixo do outro) e dois do outro lado (também um embaixo do outro) ???

    • @larissakich
      @larissakich  Рік тому

      Você pode colocar uma div para separar cada um desses grupos (uma div com dois dentro e outra com mais dois) e na div que fica envolta de todos colocar um display: flex.

  • @biancavieira6732
    @biancavieira6732 Рік тому

    Ótima aula, só esta um pouco acelerado, acho que é pq sou iniciante. obrigado pela aula.

    • @larissakich
      @larissakich  Рік тому

      Oii, vou tentar fazer mais devagar nas próximas aulas ❤️

  • @josaelfernandesmarcal
    @josaelfernandesmarcal Рік тому

    Bom dia! Parabéns, mais um inscrito, excelente aula, tive que baixar velocidade do vídeo para acompanhar, gostaria de saber quais "extensões" vc usa o meu não funcionou 100%. Obrigado!

  • @rajahmed6978
    @rajahmed6978 Рік тому

    Excellent video

  • @Kenny_93
    @Kenny_93 Рік тому

    Achei bem legal!

  • @mayararocha2073
    @mayararocha2073 2 роки тому +2

    Que Tutorial maravilhoso, parabéns !!👋

    • @larissakich
      @larissakich  2 роки тому +1

      Muito obrigadaaa, que bom que gostou ❤️❤️

  • @chomptar
    @chomptar 11 місяців тому

    eu todo feliz aqui tentando copiar a pagina antiga do facebook pra praticar, aí eu pensei "po, vou ver como funcionar a parte de cadastro", simplesmente entrei em choque KKKKKKKKKKK

  • @robinhotatui
    @robinhotatui Рік тому

    obrigado por compartilhar vosso conhecimento conosco, tenho umas tabelas em Word, seria possível fazer seu preenchimento via Html.

  • @querinoland8413
    @querinoland8413 2 роки тому

    terminei bem bacana e pra coloca mobile? tipo de 5 a 7 polegadas depois tablet 9 pra cima? pois fiz o teste no celular não pega tela toda, responsivo só na janela do navegador do pc e tal, não é desmerecer,
    exemplo a tela do celular pegaria de fato da mesma forma da tela reduzida do pc! mas obrigado de coração to aprendendo contigo só é um feedback vai que tu faz um proximo video dica o firefox pra desenvolvedor tem area de mobiles lá! foi por lá que fiz teste vai deixei o like e me inscrevi tem linkedin? trocamos figurinhas certeza daria um video bacana!

  • @walissoncarlos3708
    @walissoncarlos3708 6 місяців тому

    Obrigado pelas dicas de responsividade, ajudou de mais, seguindo agora!! Show o video!

  • @estefaneflores8615
    @estefaneflores8615 Рік тому

    Ótimo vídeo!

  • @mauricioreguete466
    @mauricioreguete466 Рік тому

    Top demais...

  • @joaovitordu
    @joaovitordu Місяць тому

    muito top. Formulário profissional em poucos minutos e bem explicativo

  • @joaovictorsantos9658
    @joaovictorsantos9658 Рік тому

    Adorei sua didatica, muito incrivel, alias pessoal, alguem sabe qual esse theme do VS dela?

  • @lebrandao9122
    @lebrandao9122 2 роки тому +1

    Top! Muito obrigada pelo vídeo.

    • @larissakich
      @larissakich  2 роки тому +1

      Muito obrigadaaa, que bom que gostou 😊🥰

  • @jcseutoca
    @jcseutoca 10 місяців тому

    Nossa....., muito melhor ver os vídeos sem ver a pessoa. Que voz gostosa de ouvir 😅😅😅