No video

Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #1

  Рет қаралды 46,549

Larissa Kich

Larissa Kich

Жыл бұрын

Olá pessoal
Neste vídeo ensinarei a você como criar um formulário com tema LIGHT, no próximo vídeo vou ensinar a fazer o modo DARK também, e o funcionamento do botão que altera entre esses dois modos.
Para fazer esse formulário eu utilizei HTML, CSS (com FLEXBOX) e JAVASCRIPT.
Repositório do GitHub:
github.com/Lar...
Site para baixar imagens/ícones:
icons8.com.br/...
CDN Font Awesome:
cdnjs.cloudfla...
Fonte Poppins:
@import url('fonts.googleap...
Extensões mais usadas no VSCode:
Live Server
colorize
Elm Emmet
Tema utilizado no VSCode:
Tokyo Night
Redes Sociais:
Instagram: @lariikich
LinkedIn: / larissakich

Пікірлер: 87
@felipegoncalves1195
@felipegoncalves1195 21 күн бұрын
ótimo projetinho pra iniciante 👏
@dayanapassos2711
@dayanapassos2711 Жыл бұрын
Por coincidência hoje estava lendo sobre código limpo e vi que vc se preocupa muito com isso. Tmb amei a sequência que vc vem estilizando de fora pra dentro: background, form, h1, ícones, imputs e foi seguindo a sequência dos elementos. Me dá um nervoso quando a pessoa edita os imputs, depois o background, mexe no ícone, depois edita o botão e por aí vai. Eu que tô bem no início já percebia que o código estava uma zona e por isso fui ver se tinha uma forma de editar direito e conheci sobre código limpo. Agora vi isso na prática com vc. Muito bom 👏🏼👏🏼👏🏼👏🏼
@larissakich
@larissakich Жыл бұрын
Muito muito obrigada, tento sempre deixar ele o mais claro possível ❤️
@kirito-kun341
@kirito-kun341 Жыл бұрын
Provavelmente você ja sabe, mas quando descobri o SMACSS, NameSpace e BEM o código fica de outro nível
@iremarpereiradasilva2250
@iremarpereiradasilva2250 3 ай бұрын
Parabéns professora pelos tutoriais de primeira qualidade, nos ajuda de mais, tudo é top, o conteúdo e sua didática, muito bem explicado, nós agradecemos muito. Pedimos que sempre nos ajude, pois para nós iniciantes é muito complexo o mundo da programação. Muito obrigado mesmo.
@diegoalves4234
@diegoalves4234 Жыл бұрын
muitoooo massa o vídeo, trás mais vídeos assim, explicando as coisas etc pff
@user-rx1lz4vk3h
@user-rx1lz4vk3h 4 ай бұрын
Muito Obrigado pela sua ajuda, seus videos são demais, se puder trazer mais, voce explica muito bem. Sucesso sempre
@ramon3056
@ramon3056 Жыл бұрын
Parabens logo de inicio ja gostei to mandando 👍 e vou apertar o sino.
@felipebrito10
@felipebrito10 Жыл бұрын
Ficou fera, Lari!
@mescono642
@mescono642 Жыл бұрын
Durante o vídeo aprendi diversas coisas muito uteis para a minha criação de sites, grato.
@mika-qm7vs
@mika-qm7vs Жыл бұрын
Olá, eu amei seu conteúdo, só faltou uma coisa e eu não sei como fazer, gostaria da sua ajuda, queria colocar para celular, ou seja que ficasse responsivo, eu fui testar vendo pelo celular não ficou legal,se vc pode mostrar,como fazer para adaptar para depósito móvel eu agradeço.
@diesnei8067
@diesnei8067 Жыл бұрын
Didática excelente! Layout bem simples e moderno, amei cores que você utilizou
@larissakich
@larissakich Жыл бұрын
Aaaa muito muito obrigada! Fico muito feliz que tu tenha gostado! ❤️
@jpedro8537
@jpedro8537 Жыл бұрын
Sensacional, ótima didática. Conteúdo de extrema qualidade, código super limpo. Subscribe
@CentralOtaku
@CentralOtaku Жыл бұрын
Unico video que consegui fazer esse bendito formulario, valeu minha nobre
@larissakich
@larissakich Жыл бұрын
Muito obrigada! Que bom que consegui te ajudar 😁
@paulorodrigues1391
@paulorodrigues1391 Жыл бұрын
Parabéns pelo conteúdo, realmente muito bom.
@emersonmarcio6556
@emersonmarcio6556 Жыл бұрын
Muito massa!! Parabéns!! 👏👏👏
@PHSYCØ_019
@PHSYCØ_019 Жыл бұрын
canal mttt bom para quem quer aprender programação
@larissakich
@larissakich Жыл бұрын
Muito obrigadaaaa ❤️
@dinamarciasantos4984
@dinamarciasantos4984 Жыл бұрын
Conteúdo muito bom, e bem explicativo, parabéns👏👏
@larissakich
@larissakich Жыл бұрын
Muito obrigadaaa ❤️ que bom que gostou!
@jovemvisionaarioo
@jovemvisionaarioo Жыл бұрын
crlhhhh muito brabaa!!!!👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏
@app2028
@app2028 Жыл бұрын
muito bom super obrigado por compartilhar sua experiência!
@larissakich
@larissakich Жыл бұрын
Muito obrigada❤️
@FgS_5
@FgS_5 Жыл бұрын
Conteudo de ouro. Parabéns
@larissakich
@larissakich Жыл бұрын
Muito obrigada❤!!
@marianagoncalves6833
@marianagoncalves6833 Жыл бұрын
Parabéns pelo vídeo, ficou perfeito!!!
@larissakich
@larissakich Жыл бұрын
Muito muito obrigada ❤️
@jefersonsilvadeveloper
@jefersonsilvadeveloper Жыл бұрын
Top, parabéns e obrigado!!!
@naturezaviva74
@naturezaviva74 Жыл бұрын
Parabéns 😍!
@mojave999
@mojave999 Жыл бұрын
obrigada! muito boa tua didática
@larissakich
@larissakich Жыл бұрын
Oii, muito obrigada! Me motiva bastante ❤️
@Rapha_Dev
@Rapha_Dev Жыл бұрын
muito bom !!!!! amei o video ❤❤❤❤
@larissakich
@larissakich Жыл бұрын
Aaa que bom que gostou ❤️ muito obrigada!
@alansantos-cg7kw
@alansantos-cg7kw 3 ай бұрын
olá, boa tarde! Estou iniciando no front-end, faz um mês, porem, estou tendo certas dificuldades, pois geralmente pego alguns exercícios que acho interessante no KZfaq, 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, pois não sei como resolver isso ?
@marcusvinicius6103
@marcusvinicius6103 Жыл бұрын
boa !! 🌹🤘
@larissakich
@larissakich Жыл бұрын
Valeuuu ❤️
@fabiojorge8999
@fabiojorge8999 Жыл бұрын
Didática perfeita! Obrigado pelo compartilhar seu conhecimento! Qual é o tema que vc usa no vsCode?
@ii-rc6nr
@ii-rc6nr Жыл бұрын
Tokyo Night
@yushany
@yushany Жыл бұрын
O meu não muda a cor de fundo :(
@larycaldas1988
@larycaldas1988 Жыл бұрын
Gosto muito do conteúdo do seu canal, sua voz é agradável, você tem uma boa didática, como Designer eu sempre admiro as fonts, paleta de cores, espaçamento etc. Enfim eu poderia ficar aqui o dia todo apontando os pontos positivos de assistir seus vídeos, mas infelizmente como nada é perfeito (e nem precisa ser) eu particularmente fico incomodada com o vício de linguagem "pixeis" De maneira nenhuma quero ser grosseira porque eu gosto do conteúdo e tenho aprendido com ele, e não sou ninguém pra pedir que você mude o jeito. Mais uma vez quero salientar que sua voz é tão agradável.
@AIRoyalty
@AIRoyalty Жыл бұрын
moça se possivel tem como auemntar o tamanho das fontes do visual studio nos proximos projetos seus? meu monitor e pequano e nem é fullhd
@Perfilprivadosx1
@Perfilprivadosx1 2 ай бұрын
Tem como mandar todos os códigos apenas para copiar e colar, para apenas modificar
@pedrodev7460
@pedrodev7460 Жыл бұрын
olá, me Chamo Pedro Lucas gostei muito. Você da aula ou curso de html e css?
@machosedoeu
@machosedoeu Жыл бұрын
vc pode me ajudar pf?? no css fiz o ID do mode icon mas nao aparece o cursor dai eu nao consigo mudar pro dark nao sei pq n aparece no html ta tudo certinho
@startdev33
@startdev33 Жыл бұрын
Incrivel, parabéns pelo ótimo conteúdo! Alguem saberia me informar qual a diferença do background para o background-color? Pelo que vi amabs preenchem o fundo com cor.
@yushany
@yushany Жыл бұрын
O meu não muda a cor de fundo :(
@tiagoribeiro7037
@tiagoribeiro7037 Жыл бұрын
Background é uma propriedade que reuni as características de: Background-color (estiliza a cor), background-position (estiliza a posição), background-repeat (estiliza a repetição), background-size (estiliza o tamanho que será ocupado), de forma resumida, seria isso.
@bryansantos6509
@bryansantos6509 Жыл бұрын
Como coloca as pastas uma em baixo da outra? A minha fica tudo do lado do assets
@jr10.juninho
@jr10.juninho Жыл бұрын
poderia fazer um vídeo como fazer um menu website ?
@leemagic5376
@leemagic5376 Жыл бұрын
Olá pessoal. alguem poderia me ajudar num código? eu gostaria de fazer aparecer na tela do canto uma imagem + audio quando o mouse passar umas 3 vezes por personagens diferentes de um projeto que to fazendo, como se fosse uma tela de seleçao de personagens. ai a cada 3 ou 4 vezes que o mouse passa pelos personagens essa imagem e audio aparecem.
@ronin7205
@ronin7205 Жыл бұрын
o meu código ficou idêntico, passei e repassei um milhão de vezes, porém eu não consegui tirar as bordas das caixas de texto, o comando pra isso é o outline:none certo?
@discernews6364
@discernews6364 11 ай бұрын
Onde vc fez ou esta fazendo sua formação/curso Dev ?
@pllatao
@pllatao 11 ай бұрын
Como q publica essa página no Google?
@iagomarques9248
@iagomarques9248 Жыл бұрын
sensational
@iagomarques9248
@iagomarques9248 Жыл бұрын
cala a boca
@ohhtutu
@ohhtutu Жыл бұрын
@@iagomarques9248 ???KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
@benmoraes5511
@benmoraes5511 Жыл бұрын
9:11
@samarapaixao8607
@samarapaixao8607 Жыл бұрын
Qual tema você usa??
@gabrielluna7085
@gabrielluna7085 Жыл бұрын
como centraliza os ícones na horizontal ? No meu continua na vertical
@eduardariver7602
@eduardariver7602 Жыл бұрын
display: flex; flex-direction: row;
@machosedoeu
@machosedoeu Жыл бұрын
@@eduardariver7602 sabe pq o cursor n ta pegando?
@shirakotakamoda1862
@shirakotakamoda1862 Жыл бұрын
Detalhe que deixou o projeto incompleto
@joceyrmartins
@joceyrmartins Жыл бұрын
Oi dá um help pra mim, eu fiz tudo do jeito que vc fez, mas minhas imagens do google, facebook e github não ficaram carregadas na tela. Aparece o nome delas lá e etc, mas a imagem não carrega o que pode ser?
@larissakich
@larissakich Жыл бұрын
Oii, por aqui não consigo te ajudar muito bem, mas verifica se você fez todas as importações corretamente
@joceyrmartins
@joceyrmartins Жыл бұрын
@@larissakich então verifiquei tudo por completo, para mim não deu certo ainda. Estou tentando todas a possibilidades. :D
@joceyrmartins
@joceyrmartins Жыл бұрын
@@larissakich será que é alguma extensão? qual vc usa?
@larissakich
@larissakich Жыл бұрын
Acredito que para imagens não seja por conta de extensão, me chama lá no Instagram que fica mais fácil
@joceyrmartins
@joceyrmartins Жыл бұрын
@@larissakich Ok vou chamar lá.
@shirakotakamoda1862
@shirakotakamoda1862 Жыл бұрын
Um grande defeito dos seus 2 vídeos é que você não explica como colocar o sol e o Butão de mudar pro sol da lua e da lua pro sol
@iamBiancaSouza
@iamBiancaSouza Жыл бұрын
oie, qual o tema do teu vs?
@larissakich
@larissakich Жыл бұрын
Oii, é o Tokyo Night
@Gabriel-ny2om
@Gabriel-ny2om Жыл бұрын
Pq a maioria das pessoas quando estão querendo virar dev só pensam em front end??
@jhonkaylonmartins7597
@jhonkaylonmartins7597 Жыл бұрын
E o opção mais "fácil"
@nickcaralhopqpmano
@nickcaralhopqpmano Жыл бұрын
O que me ferra é JC, nunca estudei isso, só css e Html
@erickpereira82
@erickpereira82 Жыл бұрын
Meu Deus é sério que precisa criar tudo isso de Div?...é div pra cada letra que escreve
@larissakich
@larissakich Жыл бұрын
Fiz dessa forma pois achei melhor de organizar, mas existem outras tags semânticas que podem ser usadas, se você quiser pode organizar como achar melhor, não precisa copiar.
@erickpereira82
@erickpereira82 Жыл бұрын
@@larissakich Não moça, não comentei por mal, é realmente uma dúvida pois estou aprendendo, ai fiquei assustado kkkkkk
@carloshenriquegoncalvesval1818
@carloshenriquegoncalvesval1818 11 ай бұрын
Usar a color normal n seria melhor ? Pq daí o código ficaria um pouco menos. Só deixaria o gradient msm o resto colocaria a color normal sem var
@larissakich
@larissakich 11 ай бұрын
Oii, fiz com variáveis para o código ficar mais organizado, mas se preferir pode fazer sem
@carloshenriquegoncalvesval1818
@carloshenriquegoncalvesval1818 11 ай бұрын
como assim mais organizado? vc teve q escrever o codigo la em cima depois repedir o nome das var novamente pra chamar os codigos. dai eu achei q teve um pouco mais de escrita, n sei se isso afeta muito o tamanho de uma pagina @@larissakich
@RampageV123
@RampageV123 11 ай бұрын
Qual tema você usa ?
TELA DE LOGIN COM TEMA DARK | HTML +  CSS
38:58
Markzuel
Рет қаралды 347 М.
Doing This Instead Of Studying.. 😳
00:12
Jojo Sim
Рет қаралды 31 МЛН
Lehanga 🤣 #comedy #funny
00:31
Micky Makeover
Рет қаралды 26 МЛН
Smart Sigma Kid #funny #sigma #comedy
00:40
CRAZY GREAPA
Рет қаралды 37 МЛН
The Easiest Way to Build Websites
10:56
Sajid
Рет қаралды 428 М.
Login Form Tutorial with HTML & CSS
21:27
SortedCoding
Рет қаралды 2,3 М.
Como criar Modo Dark e Modo Light com HTML, CSS e JavaScript
19:50
Inteliogia - Dev's Insights
Рет қаралды 6 М.
Login Form in HTML & CSS
11:07
Codehal
Рет қаралды 1,4 МЛН
Master React JS in easy way
12:18
Nova Designs
Рет қаралды 52 М.
Criando Landing Page Responsiva do Zero || Html, Css e JavaScript
27:37
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 166 М.
FORMULÁRIO DE LOGIN COM HTML, CSS & JS (PURO)
13:45
Danki Code
Рет қаралды 112 М.