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
@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!
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.
Aula sensacional, finalmente consegui compreender perfeitamente a estrutura de animações e a lógica de como fazer, agradeço pelo seu empenho em transmitir de forma eficiente todo esse conhecimento e ainda entregar um pequeno projeto incrível.
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!!!
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!!!
tudo que o cara fez eu entendi e aprendikkkkkkk eu já vi esse mesmo menu sendo desenvolvido por umas 4 pessoas com premio de n sei oq que trabalham na empresa n sei oq q n lançaram a braba na didática igual esse mano
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!
Cara, que trabalho primoroso!! Fui fazendo junto e é muiiito fácil de entender. Mas já esqueci tudo obviamente e se for pra fazer sozinho não consigo, sou iniciante ainda. Mas o jeito que o cara explica é de outro mundo!! Diferente de muito youtuberzinho por ai… aqui o nível é outro mesmo!!
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. 👍
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.
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
Muito bom! Didático demais, não fica só no faz isso, faz aquilo. Tudo foi muito bem explicado em detalhes. Por causa disso, em breve vou adquirir um curso da Origamid! Parabéns.
A melhor aula e explicação que vi até hoje. Apesar de já fazer com algumas ferramentas, sempre quis aprender usando um código limpo e seu tutorial é perfeito. Parabéns e muito sucesso pra você!
Cara que video excelente!! Um ótimo profissional, queira eu um dia chegar ao seu nível. Muito obrigado por compartilhar esse conhecimento. Estou aqui fazendo meu primeiro site, e depois de muito pesquisar, achei seu video e fiquei surpreso com a riqueza de detalhes, isto sim é um menu feito de forma profissional!! Obrigado!!
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
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!
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
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.
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.
@@jorgevargas5834 obg funcionou agora. :)
@@jorgevargas5834 Esse linkar que vc fala e usar o include para chamar o doc js? Grato
@@airtonnba3580 É usar a tag
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!
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.
Ele faz isso no curso de Woocommerce
Muito bom mesmo, a gente não fica perdido, sabe exatamente o que está acontecendo.
Recomendo muito o conteúdo da origamid. Melhor curso de front end que já comprei
Onde tem?
@@lucaspraciano4640 procura o site Origamid.
Qual outros cursos você tem para fazer a comparação?
Aula sensacional, finalmente consegui compreender perfeitamente a estrutura de animações e a lógica de como fazer, agradeço pelo seu empenho em transmitir de forma eficiente todo esse conhecimento e ainda entregar um pequeno projeto incrível.
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!!!
Realmente muito bom mesmo.
e ai man, como estao os seus conhecimentos em programaçao 9 meses depois desse video?
up
Rapaz, a cada vídeo que o Rafael posta aqui, fico feliz demais! Obrigado meu amigo, vamos evoluir!
cada video é um melhor que o outro
Esse é o video mais completo que ja vi.. quase ninguém fala de acessibilidade, mesmo sendo um ponto tão importante.
Professor. Não consigo te agradecer o suficiente. Eu assisti um vídeo de 4h em inglês e não deu certo. Parabéns. Deus te abençoe sempre.
Que aula absurda de boa, comprei o seu curso e não me arrependo. Muito obrigado por transmitir seu conhecimento.
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!!!
Você é o melhor!!!!!! comprei seu curso e não me arrependo nada!! Sucesso André, você merece o mundo irmão!
tudo que o cara fez eu entendi e aprendikkkkkkk eu já vi esse mesmo menu sendo desenvolvido por umas 4 pessoas com premio de n sei oq que trabalham na empresa n sei oq q n lançaram a braba na didática igual esse mano
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!
Cara, que trabalho primoroso!! Fui fazendo junto e é muiiito fácil de entender. Mas já esqueci tudo obviamente e se for pra fazer sozinho não consigo, sou iniciante ainda. Mas o jeito que o cara explica é de outro mundo!! Diferente de muito youtuberzinho por ai… aqui o nível é outro mesmo!!
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. 👍
Eu realmente não entendo quem da deslike em um video desses. Bom vídeo !! Parabéns !
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
teu video me salvou muito em um teste pra vaga de emprego, achei muito completo e com ótimas dicas, parabéns
Minha cabeça chegou a doer de tanta informação.
É ótimo que ele explica cada linha de código
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.
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
Estou a fazer um projeto grande e quero agradecer... Muito obrigado por fornecer seu tempo para ensinar fazer tal coisa que me atromenta durante anos.
sem duvida vc é o melhor passei o dia tentando resolver o botão hambúrguer e vc me deu a luz. Gratidão!!!!
Muito bom! Didático demais, não fica só no faz isso, faz aquilo. Tudo foi muito bem explicado em detalhes.
Por causa disso, em breve vou adquirir um curso da Origamid! Parabéns.
A melhor aula e explicação que vi até hoje.
Apesar de já fazer com algumas ferramentas, sempre quis aprender usando um código limpo e seu tutorial é perfeito.
Parabéns e muito sucesso pra você!
Cara que video excelente!! Um ótimo profissional, queira eu um dia chegar ao seu nível. Muito obrigado por compartilhar esse conhecimento. Estou aqui fazendo meu primeiro site, e depois de muito pesquisar, achei seu video e fiquei surpreso com a riqueza de detalhes, isto sim é um menu feito de forma profissional!! Obrigado!!
Olha, eu não sei mensurar o tanto que aprendi nessa aula. Muito muito obrigado!!!!
O cara tem um conhecimento absurdo dessas tecnologias.
Melhor investimento que eu fiz, recomendo de mais esse curso !
toda vez que vou fazer um menu venho ver as dicas de acessibilidade hahaha muito bom !
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
Vale mto a pena o investimento nos cursos da Origamid só conteúdo top
Sou iniciante, vejo seus vídeos e aprendo muito. Obrigado.
Você é muito bom professor!! Sempre que preciso aprender algo é só correr aqui que o problema tá resolvido!!
Caraca, que aula da hora. Eu ainda não tinha visto em lugar nenhum essa questão da acessibilidade.
Várias dúvidas esclarecidas em um só vídeo! Obrigado, Origamid
yeah,what box hidden and visible transition is very useful!thanks!
Origamid te amo! kkkk
fiz só umas pequenas mudanças aqui e ficou do jeito que eu queria.
Muito Obrigado!
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!
Rapaz que aula em parabéns
Bem explicativa me ajudou muito a entender as tags
Oii, aula incrível, abriu meus horizontes em css, muito obrigado por essa aula 😆!
Caramba, que aula, meus amigos! Gostei muito, já me inscrevi pra aprender mais ainda com esses conteúdo show! Suceso
esse e de longe o melhor tutorial que ja vi
S E N S A C I O N A L ! TUDO Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
cara, vc me convenceu a comprar seu curso com esse video. parabens! didática foda!
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
@@Elldevv eae irmão como você tá hoje em dia, conseguiu algum job com esses cursos ?
@@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
Isso é um conteudo muito fantastico muitos parabens explica muito melhor que muitos professor da universidade
Sua explicação foi espetacular. Consegui resolver um problema que vinha tentando resolver há dias.👋👋👋👋👋
TE AMO
Que aula maluco _ A melhor vista ate hj, Parabéns .
Começando a assistir agora, mas ja deixei o like pq seus conteúdos são f#das!!! Obrigado por disponibilizar no youtube
que didática foda, sem enrolação e mt bem explicado!
Da gosto de assitir!
Cara, parabéns pelo conteúdo transmitido. Estou impressionado pela gama de conteúdos disponíveis no canal e no site.
Melhor curso que eu comprei até hoje!
Eu simplesmente adorei o vídeo, explicação muito fácil de se compreender.... Vlw e parabéns!!!
👍muito bom este vídeo. É o primeiro que eu vejo que ensina essas tecnicas
Só tenho a agradecer, é muito bom praticar com a ajuda de seus vídeos, muito obrigado!!!!
Obrigado, muito bem explicado. Conteúdo do canal parece bom, vou rever esse e procurar mais dps
Gratidão, moço. Explica de forma muuuuito clara. Tu é foda!
Cara! Que aula top! Nem vi o tempo passar. Bom demais!
Muito obrigado. Conhecimento e didática de outro nível!
Sensacional, me interessou mais em conhecer a plataforma de ensino, muito bom mesmo o conteudo. Parabens.
Já vou atualizar o menu do meu portifólio q estou montando rsrs, sem dúvidas esse é mil vezes melhor hahaha
Top d+!!!! Sempre conteúdo de qualidade e direto ao ponto!!!!
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.
Topppppp d+, curti a vídeo aula, muito bem explicadinho.
Parabéns irmão
melhor aula de front que já vi
Didática muito boa com os mínimos detalhes. Mais um inscrito!
Gostei muito da didática, conteúdo proveitoso sem dificuldades.
Parabéns! Ótimas explicações sobre menu responsivo. Provando como pode ser simples a sua construção.
Aula incrível
Simpl3smente o melhor curso do mercado
Conteúdo brazuca de altissimo nível! Parabéns
Excelente conteúdo, muito prático e objetivo.
Parabéns por compartilhar!
O maluco é brabo.
Parabéns.
Didática Incrível, ótima aula!
Top, vc é fera... Mto obrigado pela aula..
gostei o prof fala certinha os macete encina mt bem +1 inscrito
melhor professor de todos, obrigado pela aula
Isso é tão incrível, eu queria muuuuito ter inteligência para trabalhar como web design/programador web. Eu jamais conseguiria fazer algo assim :'(
Parabéns, melhor explicação sobre menu que assisti.
Excelente vídeo !! Espero chegar um dia nesse nível...
cara muito bom seus videos,parabéns mesmo,muito conhecimento para aprender com voce,ganhou um novo seguidor xD
Nossa! Muito obrigado! finalmente aprendi como programar esse menu
Show!!! Tomara que continue com esses tutoriais.
incrivel ! muito legal aprendiz de dev aki
Que aula fera, mano do céu 👏🏾👏🏾👏🏾👏🏾
Manjo nd de front mas agora fiquei com vontade de aprender!
Comecei a aprender ontem, é viciante haha
Dois cara!! Eu comecei a estudar lógica de programação há quase dois meses. E decidi que vou seguir front end, achei muito louco o vídeo.
ótimo video. Fiz aqui e funcionou bém. Obrigado!
Realmente sensacional! Obrigada por compartilhar um conteúdo tão bom! :)
Excelente didática. Obrigado
Assa aula muito foi muito boa, sempre trazendo novidades
Melhor vídeo aula!!!
conteúdo de ouro e de graça. muito obrigado msm.
Você é foda Andre Rafael!
Aula de excelente qualidade.
Sensacional! Parabéns pelo conteúdo!
Muito obrigado pelo conteúdo, muito bom!
conteúdo bom pra carai ❤️❤️❤️❤️