Como Fazer um Menu Navbar Responsivo - Tutorial HTML, CSS e JavaScript para Iniciantes

[@felipejre]

Muito bom. Muito obrigado.

[@claudiolopes9413]

Amigo estou babando até agora, vai explicar bem assim lá em casa para ver se eu aprendo de uma vez por todas, sem rodeios sem frescuras muito bem explicado, foi sem dúvida alguma uma tremenda aula, parabéns! Muito obrigado por compartilhar conhecimentos.

[@TigerCodes]

Fico feliz que você gostou, Claudio! Novos vídeos em breve no canal :)

[@tuzkichar]

pq na sua casa mano? pretende fazer o que com o cara xD?

[@Bread-vk8fl]

Tava indo tudo 100% na parte do HTML e CSS, daí chegou no JavaScript e bugou a mente toda.

[@FlávioCuaca]

kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

[@senhoritasparkekim8272]

Sim

[@haleyr.402]

pra quem ta com problema do menu saindo pra fora troca a tag viewport em head por esta : e coloca overflow-x: hidden; em body tanto no mobile quanto na versão pc

[@gustavodesouzasantana6723]

Só vou comentar aqui pra poder voltar depois, valeu manoooo

[@iWellOficial]

Mano vlw salvou aqui

[@davidrocha3357]

mano, tu é o cara. muito obrigado, parceiro !!!!!

[@MarcoDmJr]

salvou

[@isaacgabriel6060]

MDS, achei que eu estava fazendo algo de errado, fui atras de outras soluções mas nada tava deixando do jeito que eu queria, me salvou

[@igors.dev32]

Mano, se vc fizesse uma pre-aula (ou até duranto o processo) explicando o funcionamento das aplicações, seria a aula perfeita de html e css.

[@BBTTheKing]

Parabéns é pouco, você merece MUITOS PARABÉNS! -Explicação clara e sucinta -Microfone/áudio com excelente qualidade -Edição finíssima -Dispôs todo o código fonte e não colocou encurtador -Tutorial extremamente bem elaborado e código limpo Desejo tudo de melhor pra ti e sucesso pro seu canal! Abraço

[@TigerCodes]

Fico feliz que gostou, muito obrigado mesmo!! :)

[@rafaelcampanincarneiro3553]

10 minutos de aula mais bem aproveitados da história 🏆

[@TigerCodes]

Fico feliz que gostou! :)

[@thalesmln]

sabe qual diferencial? Você vai explicando enquanto vai aplicando cada coisa, juntando isso a uma linguagem sem frescura, fica claro o motivo de tantos elogios nos comentários. parabéns!!!

[@Theoo_Tech]

Comecei no Js faz pouco tempo, mal sei HTML e CSS, e minha cabeça ta explodindo, que conteúdo foda, muito legal, apanhei mais terminei, hoje estou olhando, copiando e me inspirando, amanhã, estarei olhando, criando e agradecendo mais uma vez por esse conteúdo, espero que daqui a uns 4 meses esteja fera que nem vc!

[@alvarodinamo8397]

Estou construindo uma base sólida em css e html pra depois ir pro js. Achas que estudar 5h por dia de html e css é um bom tempo pra assimilar o conteúdo?

[@ryanmarinho3791]

@@alvarodinamo8397 depende das 5h de estudo, se for um estudo claro e certo, é ótimo. Se acha que não. 1:30h bem estudada, equivale a 5h mal

[@dropcas8275]

sem rodeios, sem falatorios, sem mimimi....amo videos assim. parabens pela sabedoria e por compartilhar a nós, meros mortais

[@TigerCodes]

Eu que agradeço. Fico feliz que te ajudou

[@dropcas8275]

@@TigerCodes

[@LucasMatheus-hw7fe]

Depois desse vídeo vi que realmente não sei nada sobre Html e Css

[@donovanerik1418]

Simm kkkkk eu tbm

[@marcelo.s682]

Tbm kkk

[@KaiooEduardoo]

Da uma sensação de atraso danada! kkkk Mas não devemos nos comparar a quem está na profissão por muitos anos, devemos nos espelhar e correr atrás do conhecimento!

[@pain3991]

Eu tbm🤣

[@viniciusfonseca5865]

Eu tbm kkk ja e o segundo video que vou ver e fico de cara kkk

[@JoaoVictor-us4bj]

mano que foda algo simples e bem pratico, suavidade na voz e explicação clara, entendi tudo como funciona e agora só praticar. obrigado e ganhou mais um seguidor.

[@TigerCodes]

Fico feliz que te ajudou! Bons estudos e bora praticar. 💙🐅

[@andrealves6801]

krl KKKKKKKKKKKKKKKKKK Eu to em sock do quao bem explicado e simplificado isso foi pqp PARABENS VC É INCRÍVEL!!!!!!!!

[@TigerCodes]

Valeu! :)

[@liarleyev8487]

Pulei vários vídeos, mas o seu me prendeu. Muito obrigado por ir direto ao ponto. Conteúdo sensacional 😙❤❤👍

[@Hector-np3zi]

Caramba, adorei o video mano! Ficou bem explicado, valeu mesmo. Curti sua voz e modo de falar também, continue assim

[@TigerCodes]

Obrigado! Isso me incentiva muito! :)

[@Gabriel-i1i]

brabo demais, consegui fazer aqui certinho! Um excelente professor.

[@score0658]

Fantástico, acabou de ganhar um inscrito, os demais vídeos do canal são tão bons quanto esse, estou começando no mundo front-end e seu canal esta me ajudando muito... continue com o ótimo trabalho...

[@TigerCodes]

Obrigado!! :)

[@marvelrivclips]

Não creio que seja para iniciantes mas é um tutorial excelente pra quem aprende rápido

[@samuelgomesdourado4640]

Digamos que é pra um mirim, alguém que já conhece o básico de html 5 e css 3

[@eullerl4768]

mas é para iniciantes

[@stefan10087]

@@eullerl4768 tirando que ele abordou classe que é algo mais avançado da linguagem

[@eullerl4768]

@@stefan10087 class e id é básico do básico do css ;-;

[@stefan10087]

@@eullerl4768 digo no JavaScript amigo ksks, html e css é de boa

[@BarbaraAndromeda-rb9ih]

Adorei quando utilizou um método construtor para fazer a lógica da barra responsiva. Muito obrigada pelo exemplo prático, irei fazer a associação com os conceitos desse tipo de construtor no JS.

[@TigerCodes]

Disponha!

[@rogeriovaz4420]

Um dos melhores e mais diretos vídeos que já vi.

[@TigerCodes]

Fico feliz que gostou Rogério, valeu pelo feedback 💙🐯

[@romulomenesess]

Obrigado! Consegui aprender algumas coisas e até a resolver os bugs que fiz na responsividade na raça. Muito obrigado! Deus o abençoe!

[@ryanmarinho3791]

Didática excelente! os 10 min voaram, aula boa demais!!!

[@ruanhenrique96]

muito obrigado por ajudar estava muito perdido pois estou aprendendo html e css mas è muito bom aprender java tambem pois deixa o site mais interesante e dinamico

[@R-vn6xw]

Parabéns pelo tutorial! :) Tive o mesmo problema que algumas pessoas...ao diminuir a tela aparecia por um tempo o menu. Fiz tudo que indicaram aqui, mas não funcionou. O que funcionou foi colocar o transition na classe nav list.active..assim: .nav-list.active { transform: translateX(0); transition: transform 0.3s ease-in; }

[@laisdias8933]

video top cara muito legal e fácil de entender sem problemas, e sem ficar enchendo linguiça

[@felipepaladino1423]

cara, que didática impressionante. Realmente está de parabéns!

[@TigerCodes]

Fico feliz que você gostou!

[@legiaoanimes3074]

O cara é god d mais O deus do html, curvome diante tua presença oh sabio

[@TigerCodes]

Estou lisonjeado 😂 Muito obrigado por acompanhar! :)

[@OverWheelsRJ]

Esse vídeo, apenas esse vídeo ja mereceu minha inscrição, like, share, tudo kkkkkk. agora vou ver o resto do canal. Parabéns!

[@TigerCodes]

Muito obrigado!! Boa maratona e bons estudos 🐅

[@leandroadegas762]

Cara, na moral, nem sei se comentei, mas se não, eu comento de novo... MEUS PARABÉNS, vc é bom demais nisso véi, super recomento seu canal e já sou inscrito. OBRIGADOOOOO

[@TigerCodes]

Muito obrigado 😁

[@GLtest_]

brabo demais!! faz um video das formas mais faceis de se fazer um carrossel seja com framework ou nao

[@tiquimfit8352]

aula top demais hein parabéns pelo apoio a comunidade ^^

[@TigerCodes]

Obrigado!

[@renatoazevedo9331]

Realmente ... COMPLETO !!! Parabéns !!! Faz parecer simples ... mas os detalhes fazem a diferença !

[@TigerCodes]

Isso mesmo, muito obrigado Renato, fico feliz que te ajudou :)

[@AndreMTS]

Muito bom quando o cara além de fazer ainda explica o que cada coisa faz de fato, simples e direto! Parabéns mano sucesso com canal, já me inscrevi e vou maratonar alguns dos seus vídeos rs tmj!

[@TigerCodes]

Muito obrigado, Andre, já já tem vídeo novo 💙🐅

[@marciotavares5317]

Cara, me desculpa mas, que tesão assistir essa aula. O pior é que aprendi todas essas propriedades num curso que parecia um dicionário; quase sem exercícios práticos. Ver tudo isso sendo feito é emocionante

[@sethdavisbr]

Sério acabei de encontrar o melhor canal do mundo

[@TigerCodes]

Valeu Jefin :)

[@renatonascimento8293]

M A R A V I L H O S O botei todo esse código num pagina em branco, e agora estou brincando com todos os valores pra entender cada linha. aprendendo bastante coisa, valeu mestre!!!

[@TigerCodes]

Disponha! Divirta-se aprendendo 💙🐅

[@um_aleatório_qualquer2000]

não fiz igual , mas o vídeo abriu a visão e consegui de outra forma tava tantando isso a muito tempo mano, vlw pela ajuda. Deixei o like pra tu :)

[@TigerCodes]

Bom trabalho! :)

[@nomeumundo3939]

O cara sabe mais que muitos professores por ai

[@daviddeleon4706]

Pqp, que explicação pika das galáxias. Ganhou um seguidor e um possível aluno.

[@TigerCodes]

Obrigado!

[@Vinni_Gbr]

Muito boa sua didática irmão! 🙏🏽 obrigado! Esclareceu bastante as minhas dúvidas.

[@ThaliTorres_]

Cara, que dicção/voz/áudio incríveis! Aula sensacional, +1 inscrita!

[@mariosergio1238]

Deixar meus agradecimentos e uma dica assistam esse video varias vezes para entender melhor pois é muita informação ao mesmo tempo vale muito apena assistir e ir modificando para treinar e aprender ,estou usando essas técnicas que sitei para aprender

[@TigerCodes]

Excelente dica Mario

[@alaxalandre]

Muito obrigado. Ficou muito bom, merece um like

[@willgameplay2782]

Cara estava cometendo um erro terrível, eu tinha colocado o link da imagem no html exemplo ( )e a imagem estava cobrindo a página toda nem com css estava conseguindo resolver, depois eu vir que você hora nenhuma linkou imagem do mesmo jeito que eu kkkk, o certo seria esse teu jeito mesmo para o css conseguir fazer seu trabalho. Jeito certo conforme o vídeo ( background: url(imagem.jpg22.jpg) no-repeat center center;), por isso empregou a tag main la em baixo kkk . Acho que você não irá entender o que eu quero passar mas muito obrigado pelo conteúdo. Brabo de mais ajudou bastante!

[@lcarllosbz]

Cê é bom irmão! se tem vários comentários e muitos likes no vídeo é pq vc mereceu em cada segundo! Fantástica sua aula !!

[@TigerCodes]

Obrigado de coração 🙏

[@vilas3960]

Meu Deus, que aula maravilhosa. Muito obrigado mesmo!!!!!!

[@TigerCodes]

Disponha! 🐅

[@arthurfcfcfc]

um dos melhores tutoriais que vi sobre o assunto, valeu!

[@deagle0116]

Foda mano dahora o jeito q vc explica cada tag e tal ! Curti muito

[@andresoares9670]

Mano do céu kkk. mlk é foda 10min

[@inglescomtulio5429]

O mlk é liso demais

[@rodrigodesousa7160]

Obrigado por compartilhar esse conhecimento 🙌👏👏👏

[@srbunny9258]

Quem tiver tendo problemas no responsivo sobre os iphones é interessante colocar um max-width:1200px talvez arrume alguns problemas pra mim funcionou

[@Andreiscafi1]

O maluco é brabo demais! Excelente vídeo, parabéns!

[@TigerCodes]

Obrigado pelo elogio 🐅💙

[@ff_lucaxs270]

Caraca mano , você é perfeito nos te amamos

[@andresolucoesweb]

Simplesmente maravilhoso, o único vídeo que me ajudou de verdade. Obrigado.

[@TigerCodes]

Disponha!

[@quadrospetcwb5039]

Comentário só pra confirmar que seus 10 mints de aula valeu mais que 4h de muito curso pago.

[@joab_2857]

Parabens man exelente aula, primeiro vídeo de explicação que n preciso colocar no 2x, claro que fui pausando e voltando pra entender melhor o que está acontecendo. Gostei muito do formato, Parabéns

[@TigerCodes]

😂😂😂

[@danielmarinho7634]

Ficou simplesmente perfeito!!! Muito obrigado pelo tutorial, é de grande ajuda. Ganhou meu like e mais 1 inscrito :D.

[@TigerCodes]

Obrigado!

[@ingridroosa5305]

Maravilhoso!! Muito obrigada pela aula!!

[@andrewrafael96]

muito bom bem explicativo, e sem se estender! valeu mano

[@isaiascaetano5888]

TU é um monstro na programação. Parabéns +1 inscrito.

[@TigerCodes]

Só agradeço

[@estevaolibardi]

Obrigado meu amigo, você é um amigo.

[@LeandroRosaLima]

Parabéns, muito bem explicado.

[@kaiomaciel8916]

Foi muito bem explicativo. Acredito que se tivesse um outro exemplo mais simples no JavaScript para ativar/desativar o menu, deixaria o intuito do vídeo "tutorial para iniciantes" mais vivo.

[@TigerCodes]

Obrigado, Kaio! Sim, dava para simplificar bastante o ex. do JS usando uma única função apenas e iria funcionar da mesma forma, mas quis usar classe pois código limpo é exatamente o jeito que uso e recomendo, e sei que muita gente que assistiu vai levar pra produção.

[@laurinhabarns]

Opa, notificação do melhor canal do YT❤️✨

[@TigerCodes]

:) 💙🐯

[@SoulssWeaver]

Caramba, tutorial mais rápido e otimizado que ja vi, topíssimo mano! Valeu!!

[@TigerCodes]

Obrigado!

[@EdinaldoMiranda-g5j]

top deamis....to aprendendo agora to bem no inicio.

[@mundoonline8467]

O Cara é muito bom no que faz...

[@joaorezende7801]

extremamente fácil e bonito, muito obrigado pela aula

[@TigerCodes]

Obrigado!

[@deboralopes6475]

Sou iniciante em HTML, CSS (Javascript ainda não uso), e adorei o conteúdo. Ps: Que voz bonita você tem!

[@TigerCodes]

Que massa! Seja muito bem-vinda ao canal :) Ps: Muito obrigado!

[@guilhermemazarotto1267]

Ótimo video parabéns, vou deixar aqui em baixo o código JS se fosse feito com funções ao invés de classes const mobileMenu = document.querySelector('.mobile-menu'); const navList = document.querySelector('.nav-list'); const activeClass = 'active'; function handleClick(){ navList.classList.toggle(activeClass); animateLinks(); } mobileMenu.addEventListener('click', ()=> handleClick())

[@raffaelmiguell]

Mano, você explica bem. Parabéns e obrigado!

[@TigerCodes]

Eu que agradeço, Rafa

[@icaronunes]

Tava perdido aqui. Numa linha você resolveu meu problema. \0/

[@renatoferreira524]

E em 10 minutos!!!! Show me inscrevi!!!!

[@TigerCodes]

Obrigado! 💙🐯

[@ecthor5313]

Uma ótima explicação. Excelente vídeo

[@TigerCodes]

Espero ter ajudado!

[@rodrigoantunes9402]

QUE TUTORIAL FODA! Me lembrou muito o tipo de tutorial americano, parabéns irmão!!!

[@ourpreciousyoongi]

Mano vlw, eu tava louca atrás de um navbar sem ser no boots, pq n encaixava com o meu css, ótimo conteúdo 💗

[@TigerCodes]

Fico feliz de ter trazido um vídeo que te ajudou pessoalmente. Continue ligada aqui no canal! 💙😉

[@andreyaraujo]

Esse menu é muito bonito. O vídeo tá bom demais 🔥

[@TigerCodes]

Muito obrigado!! 🔥🔥

[@WevertonCoelho-f1y]

Excelente amigo. Obrigado!

[@natalia412]

vídeo excelente!! muito didático, obrigada

[@TigerCodes]

Fico feliz que te ajudou 💙🐯

[@lucaemarcia]

Consegui fazer e ficou excelente. Parabéns pelo trabalho.

[@TigerCodes]

Boa, Luiz! ☺️

[@AndT3CH]

Irmão, preciso fazer uma subcategoria em um dos é possível?

[@TigerCodes]

Sim, você pode colocar uma ul dentro de um li, ou seja, criar uma sub-lista

[@nicolasmoises2720]

porra maluco, tu mandou muito nessa explicação.. vlw memo szszszsz

[@TigerCodes]

Obrigado por assistir!

[@igorpatrick2067]

Eu te amo!! Muito mesmo, tu é foda!!!! Obrigado!!!

[@agostinho357]

Não fiz dessa forma, mas abriu minha mente para realizar algo parecido só com HTML e css usando hover, criar classes com JS parece bem complicado para quem está aprendendo

[@TigerCodes]

Boa Agostinho, dá pra fazer muito efeito legal com hover sim, incluindo menus e dropdowns, só não funciona tão bem no mobile por se tratar de eventos diferentes

[@vitorsanto1479]

que explicação , edição e conteúdo incrível . parabéns cara.

[@danieltauil5457]

Sensacioal! Não existe outra palavra!

[@TigerCodes]

Fico feliz que gostou. Hoje às 18h tem mais :)

[@Eudinhow]

Incrivel man! parabéns pelo conteúdo!

[@TigerCodes]

Fico feliz que curtiu, Eudes! :)

[@theBruno.]

Tutorial incrível cara! você está de parabéns! ganhou mais um escrito.

[@TigerCodes]

Muito obrigado 😁

[@eduardooliveira5257]

ficou incrível mano, vou estudar os códigos do css novos pra eu

[@TigerCodes]

Bons estudos :)

[@rentashi]

Excelente video e ótimo resultado. Se conseguir, poderia nos explicar como fechar o navbar além do icone hamburger, também clicando fora da area do menu?

[@TigerCodes]

Nesse caso se event.target !== menu, daí remove a classe active do menu

[@pensaativo4329]

obg pela ajuda cara me ajudou muito! vou criar um site com um menu navbar igual a esse

[@TigerCodes]

Boa sorte no seu projeto!

[@charmanderxs]

Teu canal é incrível, parabéns ❤

[@TigerCodes]

Obrigado 💙🐯

[@felipefontoura7442]

Sensacional a explicação, curti e me inscrevi! Muito obrigado

[@TigerCodes]

Obrigado!

[@klaus_ads]

Mais do que perfeito, isso é increible

[@julia9199]

brabíssimo!

[@vicentini4115]

Cara fui ver esse vídeo e me senti um merda, percebi que não sei completamente nada ;( , ma sua explicação foi excelente mano

[@wertonsantos4492]

simplesmente maravilhosooooo... ganhou 1inscrito

[@TigerCodes]

Obrigado!

[@samueloliveira296]

Top mano!! Obrigado por compartilhar os seus conhecimentos👌

[@TigerCodes]

Fico feliz que você gostou :)

[@isadoraalcantara6247]

Mds cara, muito obrigada, me ajudou muito mesmo.

[@TigerCodes]

Disponha! 💙🐯