Menu Responsivo | HTML, CSS e JAVASCRIPT

[@PauloBastospaulo_bastos]

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.

[@larissakich]

Muito obrigada 😊

[@isaque5811]

Que problema? Só fiquei curioso pra aprender tbm

[@PauloBastospaulo_bastos]

@@isaque5811 como era feito um menu responsivo. Assisti muitos vídeos no KZbin e não entendia até assistir esse. Porque ele fez bem passo a passo.

[@b.soares545]

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.

[@jilmarsantos]

Você foi fantástica explicando. Vou ficar por aqui, nesse canal. Continue com seus vídeos.

[@lukeall687]

PQP, que aula incrível, você é uma excelente professora.

[@brunoserraoliveira]

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 .

[@camilaleutz]

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!

[@sdetedeo8272]

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😍

[@MendelParadela]

Nossa, que aula! Aliás, todas as suas explicações são muito boas, muito didáticas! Obrigado pelos ensinamentos!

[@eduardolaux9976]

SENSACIONAL! Adaptei pra minha página profissional e ficou lindo!

[@ramonbatalha8687]

Muito bom! Passei a tarde assistindo vídeos sobre menu responsivo e esse foi o que melhor que encontrei.

[@larissakich]

Que booom, fico feliz em conseguir ajudar 😊

[@LucasBSilva-nj9gu]

Boa didatica kkkk mesmo sendo modesta, estou usando como exemplo no meu projeto pessoal, agradeço o conhecimento. Parabéns!!!

[@lmsdevop]

Excelente aula! Mudei toda minha construção do site para se adequar a esse menu e deu super certo! Muuuito obrigado :D

[@14thiagosantos10]

Parabéns com essas skills já pode se considerar uma DevJunior

[@antonyalbuquerque7736]

Sou o Júnior do aprendiz 😢

[@dionedomingues718]

Eu sou aprendiz do JR do aprendiz 😢

[@gilvanfilho728]

​​​@@dionedomingues718 Sou aprendiz do aprendiz do aprendiz do Jr😢

[@JoaoTankz]

eu sou o Juninho dos juniors aprendiz dos juniors

[@richardluis7976]

Mds, eu mal te conheço e já te amo, tu é incrivel mlk!

[@moniquenavarro4131]

Vc explicou muito bem, e foram bem claras as instruções, esse conteúdo foi muito legal! ❤

[@larissakich]

Muito obrigada 😊

[@pablolimabahialima9382]

​@@larissakichei preciso de um profissional em css

[@larissakich]

@@pablolimabahialima9382 oii, entre em contato comigo por esse email: [e-mail]

[@zinidtv]

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!

[@joseluissantos1099]

Muitos parabéns Larissa , você continuando assim chega longe 😝 Muito obrigado pelo vídeo 🥰

[@larissakich]

Muito obrigadaaa❤️❤️

[@mfrancisco]

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)

[@larissakich]

Oii, fico muito feliz em ter te ajudado, muito sucesso na sua jornada ☺️

[@larissamendesdaily]

Parabéns lariiii amei de mais seus vídeos, não pare 💜

[@larissakich]

Aaaaa muito obrigada, isso me motiva muito ❤️

[@hyouka7754]

Outro vídeo maravilhoso Larissa, parabéns!

[@sergiolima8449]

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;

[@eletrotech51]

E como ficaria usando esse método?

[@leandrolemes3342]

Parabéns Larissa, muito bom, você é excelente.

[@emidiolucasbjj]

você é linda, eu te amo, ficou excelente esse video, melhor impossivel, estou me sentindo um engenheiro de software

[@userUndefined404]

Muito bacana, estou montando um time de desenvolvedores e eles estão engatilhado, vou compartilhar seu conteúdo pra eles vai ajudar muito.

[@larissakich]

Que show! Muito obrigada, espero que eu consiga ajudá-los 😊

[@atlas_bhz4556]

Ó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!

[@larissakich]

Muiito obrigada por compartilhar essas informações ❤️❤️

[@brunosantanadev]

Era só definir um root { font-size: 16px} no css ou o valor que desejar e pronto 😁

[@tvpanoramalavrense]

Parabéns, Larissa, pelo trabalho desenvolvido! Sucesso! Tens um futuro brilhante!

[@larissakich]

Muito obrigada! ☺️❤️

[@drikaguedess]

Parabénss!! Eu testando esse menu de vários videos, só o seu funcionou!!! Ai Simmmm!!!!

[@DavidSilva-cm4ni]

Parabéns Larissa, ótimo conteúdo e bem objetivo. Você vai longe!! Ganhou mais um inscrito.

[@planob9201]

Muito bom me ajudou bastante tava querendo fazer na "mao" e da forma que vc fez ficou show !!! Continua!!!

[@erivaldoA]

Obrigado Larissa Kich😎. O seu Script foi útil para mim.

[@douglasmatos2134]

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

[@larissakich]

Oii, muito obrigada pelo feedback, comecei a fazer os vídeos só com a tela dividida agora

[@viniciuspereira2734]

Mec eu fiz 2 tutoriais disso e só no seu eu vi que tbm não havia habilitado o JS. kkkkkkkkkkkkkkk. Me ajudou muito.

[@larissakich]

Oii, fico feliz que tenha conseguido

[@romulomagalhaes1895]

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]

Oii muito obrigadaa, eu fiz alguns cursos, indico bastante o b7web e os cursos da Alura

[@esleyleal9385]

@@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

[@sabrinazimmerman5716]

bem basico, nada dificil demais, conteudo simples e bem explicado, parabens

[@teotoniaeduardo4180]

Muito obrigada. Estava na dúvida aonde inserir o else e o if. Muito obrigada. Parabéns

[@eduardamanenti6301]

Olá! Só passando para agradecer! Seu vídeo me ajudou.

[@FernandoAugustoNegriniMartins]

Muito bom , simples e direto ao ponto. Justo o que eu precisava

[@jeffersonvvasconcelos]

Muito bom! Larissa. Adorei sua aula, Parabéns pelo o canal.

[@larissakich]

Muito obrigadaaa, que bom que gostou ☺️😄

[@le__marim]

Didática envolvente, parabéns 👏🏼👏🏼👏🏼

[@larissakich]

Muito obrigada 😄

[@DanielDantas-br]

Parabéns, Larissa. Simples e objetivo.

[@larissakich]

Muito obrigada ❤️

[@nandino]

Seus vídeos são muito bons, continue postando !

[@larissakich]

Muito obrigada 😊

[@carlosalbertobritodesouza8843]

excelente Tuto, estava alguns dias tendo dificuldade com o close menu, vi seu tuto, resolvi.

[@larissakich]

Fico muito feliz em te ajudar ❤️

[@imnothenry.]

Ao inves de fazer o uso da tag button, pode também usar a que economiza mais css, mas é besteira, belo tutorial

[@leandropqd]

No caso do JS, a função toggle não seria melhor do que usar os if/else's ?

[@jorgeteixeira9184]

Que vídeo massa, muito bom, apesar de achar que não ficou muito bem explicadinho sim ahahahah Parabéns, ganhou um inscrito! :)

[@larissakich]

Siim, eu vou tentar explicar melhor nos próximos, vou fazer com mais calma kskskd 😊

[@jorgeteixeira9184]

@@larissakich oi, eu escrevi errado. Ficou super explicadinho, você disse no vídeo não achar que tinha ficado ahahahahahah

[@larissakich]

@@jorgeteixeira9184 entendii, você escreveu certo sim, eu confundi sksksk😅

[@OrnelasDev]

Gostei muito, vc explicou bem sim tá kkkk deu pra entender perfeitamente.

[@leeprogramador]

Muito top. uma dúvida... como fazer para fechar o botão quando clicar nos links?

[@patriciodiniz5322]

Muito bom! hehe Ainda não manjo tanto assim, mas espero futuramente fazer um desse fácil assim. 😎🤝

[@larissakich]

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 😊

[@williansaud4570]

@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

[@tchipolo14]

O que você fez me ajudou muito, obgd

[@rp-zangado]

Parabens Lari, muito bom :) INSCRITO!!!

[@larissakich]

Muito obrigadaaa❤️

[@ChrisG59]

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...

[@adamsinstrutor-tecnico484]

Boa tarde Larissa! Tentei adaptar aqui, só o botão amburguer que não aparece! No que posso ter errado ou que esteja faltando?

[@Lucas-di6hb]

Obrigado por compartilhar seu conhecimento com agente Larissa. Mais um inscrito! Você é autodidata ou fez algum curso de programação?

[@larissakich]

Oii, muito obrigadaaa😊, eu estou fazendo alguns cursos.

[@Lucas-di6hb]

@@larissakich Ah legal, sucesso!

[@vdzinn9964]

@Jonas Nascimento Eu fiz, é muito boa as aulas dele.

[@Matheus-q1v8i]

Muito obrigado pelo vídeo !! me ajudou muito. Muito sucesso !

[@paulojorge59]

video muito explicativo e muito bom de ver obrigado por trazer esse projecto para gente.

[@fernandocalabria2029]

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

[@DanieldeJesus-r8j]

mano sem enrolação direta e linda parabens, ganhou mais um inscrito rsrsrsrsrsrsrsrsrsrsrsrrs

[@ynw_jay25]

Muito bom vídeo. Em 16:04 você quase não respirou kkkkkkkk

[@larissakich]

É por conta da edição skskkd para o vídeo não ficar tão longo

[@flayer2011]

sensacional!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@aabi2k]

muito bom, gosto muito da tua didática

[@santos-ed3dk]

Ficou demais 👏👏👏👏

[@larissakich]

Muito obrigado 😁

[@leandrorodrigues4414]

muito bom...mas poderia ter economizado mais linhas "de código " ..mas ficou top.. parabéns

[@lincolnsousa8031]

Como é o nome dessa extensão que você usa para redimensionar as janelas?

[@ericodesenvolvedor9618]

Parabéns pelo video, ficou ótimo, pelas dicas e ótima explicação :)

[@larissakich]

Muito obrigadaaa, fico feliz que gostou ☺️

[@ericodesenvolvedor9618]

@@larissakich de nada :)

[@eduardocapela9884]

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...

[@joaovitoreds]

Muito obrigado pela ajuda larissa!

[@marcosfonseca5247]

Show... maravilha de explicação. Deus Abençoe!!! Me ajudou muito!

[@larissakich]

Muito obrigada, fico feliz em ter ajudado ❤️

[@DaviHenrique-y5z]

precisa baixar alguma extensao no vscode que rode o mobile no meu não aparece para diminuir a tela nem para puxar como voce faz o video

[@rodrigobarroso5296]

Como eu faço pra deixar o menu com outras dimensões. Por exemplo preciso dele segundo as proporções de: 1440 com margin de 100px

[@lucasfelipe8349]

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]

Clarooo, posso fazer sim!

[@mateusandrade5469]

Parabéns , Ótimo material!

[@larissakich]

Muito obrigadaaa!!☺️

[@juniorkenmmasters]

Muito obrigado pela a aula meus parabéns sucesso aí pra ti \0/

[@lucasarneiro5625]

Parabens pelo tutorial, bem legal! Como pego os arquivos .svg? N consigo baixar do GitHub

[@josecarlossilva7136]

Ótima explicação. Melhor impossível!

[@larissakich]

Muito obrigada, fico feliz que tenha gostado 😊

[@luiggiabdiel9345]

Muito bom, muito bom 👨‍💻

[@larissakich]

Muito obrigadaaa😊

[@Leandro-kx5cw]

Boa noite lara esse procedimento posso seguir nos demais?

[@SalveDev_oficial]

pra colocar este mesmo menu em outros links do meu site é só replicar o código?

[@RomeritoCampos]

Parabéns! Excelente vídeo.

[@cmservicossolucoes]

Parabéns, adaptando seu codigo ao meu projeto . 🤩

[@larissakich]

Muito obrigada ❤️

[@CalebeAlvesEvangelista]

Ta perfeito a aula, so tive que botar no 0.75 pra entender ksksksk

[@wholetomy]

esse vídeo salvou a minha vida, obrigado

[@cassiajamillyvenanciobarbo1074]

eu to apaixonada no seu canal

[@larissakich]

Aaaaaa muito obrigadaaa ❤️

[@adairtecnicoeminformaticae8364]

Nota 10 pra essa aula

[@gabrieljunior7538]

Muito bom o conteúdo.

[@dmlgg4773]

Parabéns, como mudo a cor do menu_icon para preto????

[@GustavoSantos-pc4iq]

Top Lari! Parabens.... Seria legal colocar agora o menu com sub itens tá?

[@joaoklaiven4385]

Top👏, muito boom 👏👏👏

[@larissakich]

Valeuuu 😄☺️

[@joaoklaiven4385]

@@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

[@SuperMarcioSp]

Muito bom vídeo, Parabéns

[@alissontomazelli]

Muito top. Obrigado por compartilhar.

[@leobaestero8305]

Inscrito, ótimo conteúdo só sabia fazer com bootstrap, me ajudou muito!

[@coisasdofer6997]

PArabéns Larissa!! { Eu estou iniciando e gostaria de saber se vc poderia indicar algum livro que possa detalhar essa estrutura de html, css e Js? } Pra quem está iniciando como é meu caso é muita informação, por isso como vc já tem mais experiência se puder eu agradeceria muito, algo tipo como um procedimento, creio que assim seria mais tranquilo de aprender pois assim teríamos uma estrutura mais clara. Amei o vídeo, continue postando vídeos para nós, obg

[@milicopicafumo]

salve mano, te indico o curso de html e css do gustavo guanabra aqui no youtube, ele é separado por modulos, é o curso atual não o antigo, muito bom mesmo, tem curso de js também lá.

[@oultimokenpachi]

mas se clicar em um botao alem do x ele recolhe?

[@AiltonBarreto]

Obrigado pelo conteúdo, tem me ajudado bastante

[@washingtonnuness]

Muito top Larissa. Explicando direitinho. Será que tem uma série de JavaScript?

[@larissakich]

Oii, estou planejando fazer

[@larissavanderleiferreirada4630]

Ooi, vídeo ótimo e tudo mas, só que no meu o site não ficou responsivo e segui todas as suas dicas. Tem como da um up maior?

[@TeVejoEmValhalla]

dx eu perguntar, qual é esse theme que vc usa?

[@app2028]

Muito bom parabéns!

[@larissakich]

Valeuu, fico feliz que gostou 😄

[@app2028]

@@larissakich visitei seu Github e vi um projeto PHP que aí da não fez vídeo vai fazer né? :)

[@larissakich]

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.

[@app2028]

@@larissakich eu trabalho com desenvolvimento já alguns anos e desenvolvo treinamentos online estou buscando parceria se quiser deixar seu e-mail

[@larissakich]

Claro, pode ser, me chama lá no insta: @lariikich, que eu te mando meu e-mail lá.

[@MTdiass]

vídeo top d+, parabéns!!

[@larissakich]

Muito obrigadaaaa 😄☺️

[@eduardolaux9976]

Única coisa que não fechou pra mim foi, quando não dou o "close" e amplio novamente a tela, ficam aparecendo os 2 menus, o horizontal e o vertical