Só lembrando a "gambiarra" do ícone (3 traços) do botão hamburger não é necessária, um SVG resolveria isso facilmente. Dito isso, tem alguns ensinamentos legais de transform, transition e currentColor que passo enquanto ensino o mesmo. E eu pessoalmente uso esse tipo de botão no meu site (até a Apple usa essa "gambiarra" também). No restante o código todo é baseado em boas práticas.
tentei fazer igual ao seu para praticar, mas quando chegou na parte do JS não pegou. ainda não fiz nenhuma aula de JS, mas gostei de como sua pagina ficou e queria aprender a fazer isso. os arquivos tem que esta na mesma pagina certo? HTML HTML HTML5 Menu introduçao paragrafos e quebra de linhas Emojis, Símbolos e Imagens Favicon Biblioteca de Tags CSS @charset "UTF-8"; body, ul{ margin: 0px; padding: 0px; } a{ color: black; text-decoration: none; font-family: sans-serif; } a:hover{ background: rgba(0, 0, 0, 0.07); } #logo{ font-size: 1.5rem; font-weight: bold; } #header { box-sizing: border-box; height: 70px; padding: 1rem; display: flex; align-items: center; justify-content: space-between; } #menu { display: flex; list-style: none; gap: 0.5rem; } #menu a { display: block; padding: 0.4rem; } #btn-mobile { display: none; } @media (max-width: 900px) { #btn-mobile { display: block; } #menu { display: none; } #nav.active #menu { display: flex; } } JS const btnMobile = document.getElementById('btn-mobile'); function toggleMenu(){ const nav = document.getElementById('nav'); nav.classList.toggle('active'); } btnMobile.addEventListener('click', toggleMenu);
@Kleber Maia faltou voce linkar o javascript no html... Lembrando que ele ali no video não está usando uma IDE como um VScode e sim um editor online que ele mantem no site (o link: www.code.origamid.dev/ ) Por isso ele não precisou linkar o javascript no arquivo htm.
NENHUM curso se compara a Origamid, sempre direto ao ponto, boas práticas, didática incrível! Me orgulho de ter cursos da Origamid no currículo! Parabéns cara, você manda bem demais!
Estou me transformando em um ótimo profissional com os cursos da Origamid, na boa! Feliz demais com o aprendizado de cada dos cursos, obrigado demais André Rafael, pela atenção às aulas!!!
Puta merda cara, que aula... Eu to começando minha introdução na programação agora, e consegui entender a maior parte da explicação de forma fácil. Mt foda!
Andre, MEUS PARABÉNS!!! Foi a MELHOR VÍDEO-AULA que já assisti. Uma didática SUPIMPA, com destaques nos DETALHES, de forma EXPLÍCITA, indo direto ao assunto, sem rodeios desnecessários. Estou realmente impressionado com o seu modo de transmitir conhecimentos. Meus parabéns! Sou INSCRITO, e sempre que você tiver algo de Front-end, gostaria de ser informado. Mais uma vez "Meus Parabéns, com sinceros cumprimentos" e, desejando ÊXITO em todos seus EMPREENDIMENTOS. Valeu mesmo.
André, você é sensacional, cara!! incrível!! que didática, e que leveza pra dar uma aula. Nota dez, velho!! Já vi professores bons, com bastante conhecimento, mas que não sabem transformar todo esse conhecimento em aula, você é totalmente diferente. Sabe demais e sabe explicar tudinho... Foda!!!
Estou aprendendo programação e tenho assistido muitos vídeos recentemente. Esse é o primeiro vídeo desse canal que eu assisto e tive que parar para elogiar! Você ensinou de um jeito muito claro e objetivo, tirou várias dúvidas minhas rapidinho. Agradeço pela aula e te desejo muito sucesso! Já me inscrevi no canal e vou continuar aprendendo. 👍
Incrível!!! Estou sem palavras para o tanto de coisa que aprendi nesse vídeo, toggle é uma delas... acessibilidade 🤯🤯🤯 é coisa que nunca vi Muito Obrigado pelo conteúdo
Só tenho a agradecer a sua didática André, no começo é tudo muito confuso sei que vou ter de voltar aqui mais umas 4 ou 5 vezes mas vale apena já por saber o tipo de conteudo que vou encontrar
Nossa, extremamente grato por ter um conteúdo com tanta qualidade disponível assim abertamente no youtube, estou começando minha jornada agora no aprendizado de web e esse tipo de coisa incentiva muito a continuar aprendendo. Muito obrigado!! Já vou me inscrever no canal.
André sua didática é muito boa, agradeço pela vídeo aula. Se for possível faça também uma aula ensinando o carrossel animado de cards, semelhante aqueles usados em lojas virtuais.
Melhor conteúdo do mundo, não canso de me surpreender com as explicações do André, ele consegue fazer e explicar um menu mobile em menos de 10 linhas de códigos, sempre achei q eram muitas kkkk
kkkk, se eu nao tivesse assinado alura e comprado o programadorBr eu compraria esse agora depois desse video, mas o curso da Origamid será o próximo da minha lista
@@lordpain1 opa kk, ainda estou estudando amigo, não procurei job ainda, comprei curso da Origamid que inclusive hj esta na promoção o Vitalício por 384 rs
obrigado mestre , adquiri seus cursos e nao me arrependo , didática otima! ótimo conteudo to utilizando seus videos pra me auxiliar no projeto do senai!
Boa tarde, eu utilizei apenas estes com onclick direto no nav-list funcionou também.... function toggleMenu() { const nav = document.querySelector('nav#nav'); nav.classList.toggle('active') }
Cara, de longe você foi o melhor professor de HTML e CSS que eu tive. Talvez seja pedir muito, mas não custa tentar...poderia criar o layout de um ecommerce com o header/cards dos produtos etc... Com a sua didática ficaria fácil, abçs.
Não sei o que mais legal: Se a explicação direta é simples ou eu entender sendo que comecei a estudar HTML e CSS há menos de 2 meses.... Infelizmente não manjei nada de Javascript pq ainda não iniciei meu estudo dessa linguagem.
