Como Criar HAMBÚRGUER MENU RESPONSIVO | HTML, CSS e JAVASCRIPT (TUTORIAL COMPLETO PASSO À PASSO)
HTML-код
- Опубликовано: 4 июл 2024
- DESCUBRA COMO CRIAR UM HAMBÚRGUER MENU TOTALMENTE ACESSÍVEL E RESPONSIVO USANDO APENAS HTML, CSS E JAVASCRIPT NESTE TUTORIAL FÁCIL, PASSO A PASSO E COMPLETO
Ideal para iniciantes e desenvolvedores experientes, este vídeo abrange tudo, desde a estruturação básica até técnicas avançadas de acessibilidade.
O que você vai aprender:
Estruturação HTML: Aprenda a montar a estrutura básica de um menu hambúrguer.
Estilização com CSS: Dicas e truques para fazer seu menu ser não só funcional, mas também esteticamente agradável.
Funcionalidade com JavaScript: Como dar vida ao seu menu com interações dinâmicas.
Acessibilidade: Garanta que seu menu seja utilizável por todos, incluindo pessoas com deficiências.
Respostas a diferentes tamanhos de tela: Técnicas para garantir que seu menu funcione perfeitamente em todos os dispositivos.
👍 Gostou do vídeo? Não esqueça de clicar em gostei, se inscrever no canal e ativar o sininho para não perder nenhum conteúdo!
💬 Tem perguntas ou sugestões? Deixe seu comentário abaixo!
Use este vídeo como seu guia prático para criar menus hambúrguer que não apenas pareçam bons, mas também funcionem de maneira eficiente e acessível!
📚🖥️🖱️Livros, Computadores e Periféricos que indico🖱️🖥️📚
www.amazon.com.br/shop/serliv 🫰
Seja membro deste canal e ganhe BENEFÍCIOS EXCLUSIVOS:
🔗 / @serliv
Quer ter o seu #portfolio analisado aqui no canal? Preencha esse formulário
🔗forms.gle/JPLKuhYs6o248ZKK8
🌟 Links comentados no vídeo e outros interessantes 🌟
Livros sobre programação e algoritmo que eu indico
✅ Entendendo Algoritmos: Um Guia Ilustrado Para Programadores e Outros Curiosos
amzn.to/3HjW3S2
✅ Lógica de Programação e Algoritmos com JavaScript: uma Introdução à Programação de Computadores com Exemplos e Exercícios Para Iniciantes
amzn.to/3SgmM8d
✅ Estruturas de Dados e Algoritmos com JavaScript: Escreva um Código JavaScript Complexo e Eficaz Usando a Mais Recente ECMAScript
amzn.to/3SgN36c
🍕Se for comprar qualquer coisa na Amazon, por favor, use meu link para me ajudar à comprar uma pizza no final de semana amzn.to/3HKFkHN 😊
📺 Playlist VÍDEOS EM DESTAQUE.
• VÍDEOS EM DESTAQUE
📺 Siga a playlist CURSO WEB FUNDAMENTOS HTML +: CSS
• CURSO Web Fundamentos:...
📺 Playlist Análise de Portfolio / Projeto de iniciante
• Análise de Portfolio /...
CURSOS COM DESCONTO DA AMIZADE
🎁 Curso Web Front-end Fundamentos. Aprenda HTML CSS e Javascript:
serfrontend.com/cursos/web-fu...
🎁Curso do Figma ao código. O Design de Interfaces web completo
serfrontend.com/cursos/do-fig...
🔴 O que eu eu indico para gravar produzir vídeos:
✅ Logitech BRIO 4K -
amzn.to/3S0FbVh
✅ Microfone Condensador USB Blue Yeti X -
amzn.to/48zZcsW
✅ Microfone Condensador USB com Suporte de Suspensão Blue Yeticaster - amzn.to/4213k2G
✅Refatoração do nosso hambúrguer menu (para membros do canal)
• REFATORAÇÃO do nosso h...
✅Ensinei CSS ERRADO e Preciso me Desculpar
• Ensinei CSS ERRADO e P...
✅Seja EXPERT no CSS: Classes ou IDs? Como Organizar e Nomear Seletores
• Seja EXPERT no CSS: Cl...
✅Dica de CSS: Porque minha MARGIN Não Funciona?
• Dica de CSS: Porque mi...
✅ Análise de portfolio FRONT-END
• Análise de portfolio F...
✅ Analisando Portfolio de Iniciante em FRONT END - parte 06
• Analisando Portfolio d...
✅ Analisando DESIGN de portfolio de iniciante
• Analisando DESIGN de p...
✅ [CSS] Unidades de medida em vs rem.
• [CSS] Unidades de medi...
✅ O que estudar para conseguir o primeiro emprego como dev front-end
• O que estudar para con...
✅ Minha experiência como programador front-end
• Minha experiência como...
✅ TUTORIAL CSS GRID. Como criar páginas web mais FÁCIL
• TUTORIAL CSS GRID. Com...
✅ Crie interfaces melhores com VARIÁVEIS do CSS (a.k.a custom properties)
• Crie interfaces melhor...
✅ FAÇA o seu PORTFOLIO se DESTACAR frente aos demais
• 🤩 FAÇA o seu PORTFOLIO...
✅ Como criar PÁGINAS WEB com HTML e CSS a partir de design do FIGMA
• Como criar PÁGINAS WEB...
#programação #webdev #webdesign #frontend #iniciante #desenvolvimentoweb #css #javascript #html #tutorial
00:00:00 Introdução
00:01:23 Início do HTML
00:04:00 Melhoria Progressiva
00:05:05 Começão com estilo CSS
00:08:00 Atributos Aria (acessibilidade no HTML)
00:13:12 Responsividade
00:14:30 Identificar quando o javascript está disponível
00:16:45 Evento Click no hambúrguer menu
00:29:02 Fechar o menu ao clicar fora
00:42:04 Identificar media query com matchMedia() 
Наука
Vem aprender HTML, CSS, Javascript ou Figma comigo. SEM MENSALIDADE. ACESSO VITALÍCIO. Tem 30 dias para pedir o dinheiro de volta caso não fiquei totalmente satisfeito
serfrontend.com/cursos/
Quer ter seu portfolio ou projeto avaliado aqui no canal? Preencha o formulário: forms.gle/JPLKuhYs6o248ZKK8
Seja membro deste canal e ganhe BENEFÍCIOS EXCLUSIVOS:
ruclips.net/channel/UCPstMzE8bHIah0swMZL2mIgjoin
Curso Web Front-end Fundamentos. Aprenda HTML CSS e Javascript:
serfrontend.com/cursos/web-fundamentos-html-css/aplicando-desconto.html?d=31&m=09
Curso Javascript Completo:
serfrontend.com/cursos/javascript-completo/aplicando-desconto.html?d=31&m=09
Curso do Figma ao código. O Design de Interfaces web completo
serfrontend.com/cursos/do-figma-ao-codigo/aplicando-desconto.html?d=31&m=09
Lógica de Programação com Javascript
serfrontend.com/cursos/logica-de-programacao-com-javascript/aplicando-desconto.html?d=31&m=09
Livros, Computadores e Periféricos que indico:
www.amazon.com.br/shop/serliv
Canais em redes sociais:
Twitter: twitter.com/serlivcursos
Linkedin: www.linkedin.com/in/serliv
Instagram: instagram.com/serlivcursos
Facebook: facebook.com/serlivcursos
Tiktok: www.tiktok.com/serlivcursos
Instrutor: Daniel Tapias Morales
Twitter: twitter.com/tapmorales
Linkedin: www.linkedin.com/in/daniel-tapias-morales-87145621/
Medium: medium.com/@tapmorales
Github: github.com/tapmorales
Que aula muito boaaa!! parabéns!!
Muito obrigado 😊
Achei muito engraçado no momento 1:09 - Se você não me conhece ! Você não está perdendo nada ... KKKK Prof: Daniel Tápias
🤣🤣🤣
Obrigado mestre, agradeço por mais um vídeo extremamente informativo e com a sua didática que já me salvou diversas vezes em muitos anos
Fico feliz que tenha ajudado. Muito obrigado pelo feedback
Muito bom, Daniel, Tutorial muito bom, obrigado
Eu que agradeço
Me ganhou no "se vc não me conhece, não tá perdendo nada" 😆😅 Excelente conteúdo, professor! Parabéns. Inscrito.
Obrigado 😃
Pessoal, acessem os cursos do Daniel, são bem completos e sem enrolação, recomendo demais
Muitíssimo obrigado meu amigo. Valeu mesmo
Rapaz, adquiri todos cursos. Atualmente tô terminando do figma. Recomendo muito os cursos do professor Daniel, n tem enrolação, explicação excelente e os cursos são focados na prática em vez d só teorias como d outros professores.
Nossa. Muito obrigado mesmo pela confiança. Forte abraço e bons estudos
Nao dei onde to errando o menu hamgurguer não aparece codar pelo celular e osso replit ajuda mais mada supera o pc ate eu achar o erro jesus vi ate 28:23 so vou continuar quando eu achar o erro.
Vc e um ótimo profissional e professor só tem um porém q senhor faz que confunde muito os iniciantes do meu ponto de vista.
Que senhor fica trocando classes no html e tals isso confundo de mais mas o resto tá top parabéns obs não é crítica só ponto de vista meu
Muito obrigado pelo feedback. Vou me atentar mais pra isso não acontecer. Forte abraço e muito obrigado pelo alerta
Se vc não me conhece não está perdendo nada😂😂😂😂
🤣🤣🤣