Nesse vídeo eu mostro como fazer um MENU RESPONSIVO, usando HTML, CSS e JAVASCRIPT. Link para as imagens e o código feito no vídeo: github.com/Lar... INSTAGRAM: @lariikich
Bom dia, boa tarde ou boa noite, Larissa! Em menos de 20 min ( e mesmo com sua pequena incerteza no final ), você esclareceu um problema que me atormentava há meses!! Parabéns pela aula! E agradeço pelo tempo em que se dispôs a criar e compartilhar esse conteúdo.
Adorei o vídeo, para quem ficou com dúvida assim como eu quanto a class .'open' criada no arquivo CSS, você colocou display: block dentro desta class .open, que foi o mesmo padrão estabelecido nas condições do @media screen para mobile quando o navegador quebrar para 730px, ele entra na div class. mobile-menu-icon, no html, que configura para display: block, assim como está estabelecido no arquivo style.css. Não sei se minha explicação está muito clara, mas foi isso que entendi da leitura do seu código. Continuei postando mais vídeos, ajudou muito.
Este video é importante. Depois de ver um monte de conteudo na internet sem conseguir exito com meu projeto, tendo na maior parte dos problemas conflito com os atributos.... Cheguei no seu video e pude entender o uso dos recursos do CSS em conjunto com javascript. Muito obrigado. Top😍
A sua empolgação no decorrer do vídeo é ótima! E você explica muito bem viu? Ja fiz outras aplicações com os seus videos e você apareceu como sugestão novamente! Obrigada!
você é sensacional, eu queria usar um menu responsivo, porém, todos que eu fazia, ou achava na internet estava ficando complexos (muito code).. ai achei o seu, é simples, e muito compactado, eu peguei e editei algumas coisinhas pra ficar parecido com oque preciso... show de bola , obs: iniciei no mundo do html a 10 dias, acredito que estou indo bem, aprendendo super rápido as coisas.. (inclusive já arrisquei fazer um website pra uma empresa hihi)
Larissa ótima aula, uma dica seria usar "data atributos" para acessar o DOM no HTML para não usar os ID'S e as CLASS que são usadas no CSS e assim só olhando para código já sabemos que é um atributo usado no JS;
Ótimo vídeo Larissa, vim aqui colar de você! lol Você disse ali sobre a unidade rem, por padrão 1rem = 16px, por que? porque por padrão o HTML vem setado com font-size = 16px. Caso você mude o valor padrão do HTML em rem tbm vai ser modificado. Suponha-se um HTML que vc mudou o font-size dele pra 20px, agora 1rem = 20px, trocando em míudos 1 rem = 1*(O tamanho da fonte do seu HTML). Muito Obrigado por compartilhar esse contéudo com a comunidade!
Simplesmente INCRÍVEL, seu conhecimento de front-end pelo que eu vi só nesse vídeo é muito vasto, faz até parecer fácil. Como você aprendeu HTML, CSS e JS?
@@larissakich Larissa , como posso entrar em contato contigo pra tirar algumas dúvidas , quando o assunto é responsividade acabo ficando um pouco fechado. Comprei o curso da B7Web também
gostei muito do vídeo, estou iniciando na programação e o js esta sendo um pouco complicado de compreender algumas sintaxes, me perdi um pouco no css, pois não lembrava de cabeça as class que vc tinha colocado, acho q ficaria muitoooo melhor de coloca-se o live server no canto da tela e dividisse entre o live server e o vs code. Ia melhorar muito a compreensão e tbm poderia ficar fácil de uma pessoa q ainda menos experiencia q eu entender o que vc quer passar. Vídeo ficou muito bom parabéns! vou começar a companhas as dicas
Aquele foi um projeto a parte que eu fiz tem um tempo já, mas vou dar uma olhada novamente nele (refazer e melhorar), e posso trazer um vídeo aqui no canal mostrando como eu fiz, mas acho que vai demorar um pouco até ficar pronto.
Parabéns pelo video! O menu ficou excelente!! Estou adaptando para criar um template no wordpress com esse menu. Porém, o caminho para o arquivo svg precisa ser dinâmico. Sabe se é possível utilizar código php dentro do arquivo js? ou entao... fazer de alguma forma que o caminho do arquivo não fique dentro do arquivo js...
Muito Obrigado, eu estava precisando disso para colocar no meu site. E pensando em ideias de próximos vídeos, você poderia explicar a fazer posts, por exemplo de blog, horizontais?
@larissakich se caso eu querer colocar uma animação quando a foto do menu fosse trocada por causa do tamanho, eu teria que estilizar pela class icon mesmo? Apenas uma dúvida de principiante
Sobre a unidade de medidas "tem" vou explicar: Utilizar a unidade de medidas relativas rem ao invés de PX, você ajuda o site a ficar acessível a pessoas com deficiência e também na responsividade, porque o próprio nome já diz, ela e uma unidade relativa e não absoluta. O Px é uma unidade absoluta que sempre vai se adequar ao pai dele, isso faz com que as telas fiquem engraçadas. 1 rem equivale a 16px
Show de bola só tenho uma dúvida eu consigo fazer página web designer mas não consigo enviar as imagens da página como faço obrigado as imagens saem em branco
Uma pergunta: sempre quando eu for criar alguma página responsiva, necessariamente eu vou ter que usar o "display:flex"? Vou procurar alguma aula sobre displays pra entender melhor...
Bom dia, boa tarde ou boa noite, Larissa!
Em menos de 20 min ( e mesmo com sua pequena incerteza no final ), você esclareceu um problema que me atormentava há meses!!
Parabéns pela aula! E agradeço pelo tempo em que se dispôs a criar e compartilhar esse conteúdo.
Muito obrigada 😊
Que problema? Só fiquei curioso pra aprender tbm
@@isaque5811 como era feito um menu responsivo. Assisti muitos vídeos no UA-cam e não entendia até assistir esse. Porque ele fez bem passo a passo.
Adorei o vídeo, para quem ficou com dúvida assim como eu quanto a class .'open' criada no arquivo CSS, você colocou display: block dentro desta class .open, que foi o mesmo padrão estabelecido nas condições do @media screen para mobile quando o navegador quebrar para 730px, ele entra na div class. mobile-menu-icon, no html, que configura para display: block, assim como está estabelecido no arquivo style.css. Não sei se minha explicação está muito clara, mas foi isso que entendi da leitura do seu código. Continuei postando mais vídeos, ajudou muito.
Você foi fantástica explicando. Vou ficar por aqui, nesse canal. Continue com seus vídeos.
PQP, que aula incrível, você é uma excelente professora.
Nossa, que aula! Aliás, todas as suas explicações são muito boas, muito didáticas! Obrigado pelos ensinamentos!
Ficou muito massa parabéns , não estou no seu nível , mas só de entender toda a explicação fico muito feliz . Obrigado Larissa .
Boa didatica kkkk mesmo sendo modesta, estou usando como exemplo no meu projeto pessoal, agradeço o conhecimento. Parabéns!!!
Este video é importante. Depois de ver um monte de conteudo na internet sem conseguir exito com meu projeto, tendo na maior parte dos problemas conflito com os atributos.... Cheguei no seu video e pude entender o uso dos recursos do CSS em conjunto com javascript. Muito obrigado. Top😍
A sua empolgação no decorrer do vídeo é ótima! E você explica muito bem viu? Ja fiz outras aplicações com os seus videos e você apareceu como sugestão novamente!
Obrigada!
Muito bom! Passei a tarde assistindo vídeos sobre menu responsivo e esse foi o que melhor que encontrei.
Que booom, fico feliz em conseguir ajudar 😊
Excelente aula! Mudei toda minha construção do site para se adequar a esse menu e deu super certo! Muuuito obrigado :D
Mds, eu mal te conheço e já te amo, tu é incrivel mlk!
SENSACIONAL! Adaptei pra minha página profissional e ficou lindo!
Vc explicou muito bem, e foram bem claras as instruções, esse conteúdo foi muito legal! ❤
Muito obrigada 😊
@@larissakichei preciso de um profissional em css
@@pablolimabahialima9382 oii, entre em contato comigo por esse email: larissakich04@gmail.com
Muito bom de maravilhoso esse vídeo, boa explicação e excelente prática para ensinar, ficou tudo muito claro!!!
Continue com os vídeos!
Parabéns com essas skills já pode se considerar uma DevJunior
Sou o Júnior do aprendiz 😢
Eu sou aprendiz do JR do aprendiz 😢
@@dionedomingues718 Sou aprendiz do aprendiz do aprendiz do Jr😢
eu sou o Juninho dos juniors aprendiz dos juniors
bem basico, nada dificil demais, conteudo simples e bem explicado, parabens
você é linda, eu te amo, ficou excelente esse video, melhor impossivel, estou me sentindo um engenheiro de software
Muito obrigada. Estava na dúvida aonde inserir o else e o if. Muito obrigada. Parabéns
você é sensacional, eu queria usar um menu responsivo, porém, todos que eu fazia, ou achava na internet estava ficando complexos (muito code).. ai achei o seu, é simples, e muito compactado, eu peguei e editei algumas coisinhas pra ficar parecido com oque preciso... show de bola , obs: iniciei no mundo do html a 10 dias, acredito que estou indo bem, aprendendo super rápido as coisas.. (inclusive já arrisquei fazer um website pra uma empresa hihi)
Oii, fico muito feliz em ter te ajudado, muito sucesso na sua jornada ☺️
Outro vídeo maravilhoso Larissa, parabéns!
Muitos parabéns Larissa , você continuando assim chega longe 😝
Muito obrigado pelo vídeo 🥰
Muito obrigadaaa❤️❤️
Muito bacana, estou montando um time de desenvolvedores e eles estão engatilhado, vou compartilhar seu conteúdo pra eles vai ajudar muito.
Que show! Muito obrigada, espero que eu consiga ajudá-los 😊
excelente Tuto, estava alguns dias tendo dificuldade com o close menu, vi seu tuto, resolvi.
Fico muito feliz em te ajudar ❤️
Mec eu fiz 2 tutoriais disso e só no seu eu vi que tbm não havia habilitado o JS. kkkkkkkkkkkkkkk. Me ajudou muito.
Oii, fico feliz que tenha conseguido
Muito bom me ajudou bastante tava querendo fazer na "mao" e da forma que vc fez ficou show !!! Continua!!!
Muito bom! Larissa.
Adorei sua aula, Parabéns pelo o canal.
Muito obrigadaaa, que bom que gostou ☺️😄
Parabéns lariiii amei de mais seus vídeos, não pare 💜
Aaaaa muito obrigada, isso me motiva muito ❤️
Parabéns Larissa, muito bom, você é excelente.
Olá! Só passando para agradecer! Seu vídeo me ajudou.
Parabéns, Larissa, pelo trabalho desenvolvido! Sucesso! Tens um futuro brilhante!
Muito obrigada! ☺️❤️
Muito bom , simples e direto ao ponto. Justo o que eu precisava
Parabéns, Larissa. Simples e objetivo.
Muito obrigada ❤️
Parabénss!! Eu testando esse menu de vários videos, só o seu funcionou!!! Ai Simmmm!!!!
Gostei muito, vc explicou bem sim tá kkkk deu pra entender perfeitamente.
Didática envolvente, parabéns 👏🏼👏🏼👏🏼
Muito obrigada 😄
Larissa ótima aula, uma dica seria usar "data atributos" para acessar o DOM no HTML para não usar os ID'S e as CLASS que são usadas no CSS e assim só olhando para código já sabemos que é um atributo usado no JS;
E como ficaria usando esse método?
Ótimo vídeo Larissa, vim aqui colar de você! lol
Você disse ali sobre a unidade rem, por padrão 1rem = 16px, por que? porque por padrão o HTML vem setado com font-size = 16px. Caso você mude o valor padrão do HTML em rem tbm vai ser modificado. Suponha-se um HTML que vc mudou o font-size dele pra 20px, agora 1rem = 20px, trocando em míudos 1 rem = 1*(O tamanho da fonte do seu HTML).
Muito Obrigado por compartilhar esse contéudo com a comunidade!
Muiito obrigada por compartilhar essas informações ❤️❤️
Era só definir um root { font-size: 16px} no css ou o valor que desejar e pronto 😁
mano sem enrolação direta e linda parabens, ganhou mais um inscrito rsrsrsrsrsrsrsrsrsrsrsrrs
Seus vídeos são muito bons, continue postando !
Muito obrigada 😊
Muito bom! hehe
Ainda não manjo tanto assim, mas espero futuramente fazer um desse fácil assim.
😎🤝
No começo eu tive bastante dificuldade (ainda tenho), mas com o tempo você pega a prática, fico feliz que eu consiga te ajudar 😊
Simplesmente INCRÍVEL, seu conhecimento de front-end pelo que eu vi só nesse vídeo é muito vasto, faz até parecer fácil. Como você aprendeu HTML, CSS e JS?
Oii muito obrigadaa, eu fiz alguns cursos, indico bastante o b7web e os cursos da Alura
@@larissakich Larissa , como posso entrar em contato contigo pra tirar algumas dúvidas , quando o assunto é responsividade acabo ficando um pouco fechado.
Comprei o curso da B7Web também
Parabéns Larissa, ótimo conteúdo e bem objetivo. Você vai longe!! Ganhou mais um inscrito.
Obrigado Larissa Kich😎.
O seu Script foi útil para mim.
gostei muito do vídeo, estou iniciando na programação e o js esta sendo um pouco complicado de compreender algumas sintaxes, me perdi um pouco no css, pois não lembrava de cabeça as class que vc tinha colocado, acho q ficaria muitoooo melhor de coloca-se o live server no canto da tela e dividisse entre o live server e o vs code. Ia melhorar muito a compreensão e tbm poderia ficar fácil de uma pessoa q ainda menos experiencia q eu entender o que vc quer passar. Vídeo ficou muito bom parabéns! vou começar a companhas as dicas
Oii, muito obrigada pelo feedback, comecei a fazer os vídeos só com a tela dividida agora
Muito obrigado pelo vídeo !! me ajudou muito. Muito sucesso !
Muito obrigado pela a aula meus parabéns sucesso aí pra ti \0/
Que vídeo massa, muito bom, apesar de achar que não ficou muito bem explicadinho sim ahahahah
Parabéns, ganhou um inscrito! :)
Siim, eu vou tentar explicar melhor nos próximos, vou fazer com mais calma kskskd 😊
@@larissakich oi, eu escrevi errado. Ficou super explicadinho, você disse no vídeo não achar que tinha ficado ahahahahahah
@@jorgeteixeira9184 entendii, você escreveu certo sim, eu confundi sksksk😅
O que você fez me ajudou muito, obgd
Parabéns pelo video, ficou ótimo, pelas dicas e ótima explicação :)
Muito obrigadaaa, fico feliz que gostou ☺️
@@larissakich de nada :)
Nota 10 pra essa aula
muito bom, gosto muito da tua didática
video muito explicativo e muito bom de ver obrigado por trazer esse projecto para gente.
Ficou demais 👏👏👏👏
Muito obrigado 😁
Muito bom o conteúdo.
Parabens Lari, muito bom :) INSCRITO!!!
Muito obrigadaaa❤️
eu to apaixonada no seu canal
Aaaaaa muito obrigadaaa ❤️
Show... maravilha de explicação. Deus Abençoe!!! Me ajudou muito!
Muito obrigada, fico feliz em ter ajudado ❤️
Parabéns , Ótimo material!
Muito obrigadaaa!!☺️
sensacional!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Muito bom, muito bom 👨💻
Muito obrigadaaa😊
Top👏, muito boom 👏👏👏
Valeuuu 😄☺️
@@larissakich posso fazer uma sugestão? estou estudando html, css e js mas sempre fico na duvida de por onde devo começar e como começar
Muito bom vídeo. Em 16:04 você quase não respirou kkkkkkkk
É por conta da edição skskkd para o vídeo não ficar tão longo
Parabéns, adaptando seu codigo ao meu projeto . 🤩
Muito obrigada ❤️
Obrigado por compartilhar seu conhecimento com agente Larissa. Mais um inscrito!
Você é autodidata ou fez algum curso de programação?
Oii, muito obrigadaaa😊, eu estou fazendo alguns cursos.
@@larissakich Ah legal, sucesso!
@Jonas Nascimento Eu fiz, é muito boa as aulas dele.
Parabéns top de maisssssssssssssssssssssssssssssssssss
Obrigado pelo conteúdo, tem me ajudado bastante
Inscrito, ótimo conteúdo só sabia fazer com bootstrap, me ajudou muito!
Ótima explicação. Melhor impossível!
Muito obrigada, fico feliz que tenha gostado 😊
Ta perfeito a aula, so tive que botar no 0.75 pra entender ksksksk
Muito obrigado pela ajuda larissa!
No caso do JS, a função toggle não seria melhor do que usar os if/else's ?
Parabéns pelo conteúdo
Muito obrigada 😄
parabens amiga, ajudou em meu projeto
Fico feliz em ajudar 😊
Parabéns! Excelente vídeo.
esse vídeo salvou a minha vida, obrigado
Muito bom parabéns!
Valeuu, fico feliz que gostou 😄
@@larissakich visitei seu Github e vi um projeto PHP que aí da não fez vídeo vai fazer né? :)
Aquele foi um projeto a parte que eu fiz tem um tempo já, mas vou dar uma olhada novamente nele (refazer e melhorar), e posso trazer um vídeo aqui no canal mostrando como eu fiz, mas acho que vai demorar um pouco até ficar pronto.
@@larissakich eu trabalho com desenvolvimento já alguns anos e desenvolvo treinamentos online estou buscando parceria se quiser deixar seu e-mail
Claro, pode ser, me chama lá no insta: @lariikich, que eu te mando meu e-mail lá.
Zica da balada parabéns!
que aula, muito obrigado
Parabéns pelo video! O menu ficou excelente!! Estou adaptando para criar um template no wordpress com esse menu. Porém, o caminho para o arquivo svg precisa ser dinâmico. Sabe se é possível utilizar código php dentro do arquivo js? ou entao... fazer de alguma forma que o caminho do arquivo não fique dentro do arquivo js...
vc explica muito bem..
Vlw Larissa me ajudou demais!!!!!!!!!!! Muito obrigado!
Boa tarde, tudo bem ?
gostaria de saber qual extensão você usa para o tema do seu vs code
Muito bom vídeo, Parabéns
Muito top.
Obrigado por compartilhar.
Boa tarde Larissa! Tentei adaptar aqui, só o botão amburguer que não aparece! No que posso ter errado ou que esteja faltando?
Muito top. uma dúvida... como fazer para fechar o botão quando clicar nos links?
top didática muito boa !!!
Muito obrigadaaa ☺️
Muito Obrigado, eu estava precisando disso para colocar no meu site. E pensando em ideias de próximos vídeos, você poderia explicar a fazer posts, por exemplo de blog, horizontais?
Clarooo, posso fazer sim!
@larissakich se caso eu querer colocar uma animação quando a foto do menu fosse trocada por causa do tamanho, eu teria que estilizar pela class icon mesmo? Apenas uma dúvida de principiante
vídeo top d+, parabéns!!
Muito obrigadaaaa 😄☺️
That's what i needed
Thankyou !!!!!!!!!!!!!!!!!
Vlw
Vídeo assitido e executado, deixei lá no seu direct. Obrigado!
Ótimo vídeo!
Muito obrigadaaaa 😁
Muito top Larissa. Explicando direitinho. Será que tem uma série de JavaScript?
Oii, estou planejando fazer
Sobre a unidade de medidas "tem" vou explicar:
Utilizar a unidade de medidas relativas rem ao invés de PX, você ajuda o site a ficar acessível a pessoas com deficiência e também na responsividade, porque o próprio nome já diz, ela e uma unidade relativa e não absoluta.
O Px é uma unidade absoluta que sempre vai se adequar ao pai dele, isso faz com que as telas fiquem engraçadas.
1 rem equivale a 16px
Muiito obrigada pela explicação 😊
Show de bola só tenho uma dúvida eu consigo fazer página web designer mas não consigo enviar as imagens da página como faço obrigado as imagens saem em branco
Top demais!
Muito obrigadaaa☺️😄
muito bom...mas poderia ter economizado mais linhas "de código " ..mas ficou top.. parabéns
Uma pergunta: sempre quando eu for criar alguma página responsiva, necessariamente eu vou ter que usar o "display:flex"? Vou procurar alguma aula sobre displays pra entender melhor...