Meu povo, teve um detalhe que acabei esquecendo de citar no vídeo. Para que as barrar de abrir o menu mobile suma da versão de desktop basta você adicionar esse código no seu css (fora das medias queries): .btn-abrir-menu{ display: none; } E para que ela apareça apenas na versão mobile, basta adicionar esse código abaixo DENTRO DAS MEDIA QUERIES: .btn-abrir-menu{ display: block; } Peço desculpa pelo esquecimento 😁😁
@@dreamer3153 Fala mano, tudo bem? No vídeo anterior a esse, onde eu falo sobre responsividade, eu falei sobre as medias queries. Mas para resumir é uma regra do CSS que possibilita a gente adaptar o nosso site para vários tamanhos de telas. Você pode identificar ele no seu código assim: @media screan and (max-width: 1020px){}
vc é mt monstro mano, sempre aprendi pelos vídeos do Gustavo Guanabara pois acho a didática dele perfeita, e agora conheci você também e sua didática é maravilhosa! Com certeza vou acompanhar o canal e pegar umas dicas :)
Muito obrigado pela ajuda, estou inciando agora e estou procurando meios para aprimorar meu conhecimentos, graças ao seu trabalho estou aprendendo muito e se divertindo e ficando ainda mais confiante no que sou capaz de fazer e criar. eternamente grato
Bruno parabens maninho, vc me ajudu muito a evoluir meus conhecimento, parabens soram perfeitos os video bem explicado e direto. Sucesso ganhou um novo membro
Muito obrigado por esses tutoriais incríveis, criei um landingpage com html e css, mas graças a vc estou conseguindo fazer o meu site ficar responsivo, sua didática é incrível!!!
Muitooooo bom, que forma tranquila que você explica, e que boa vontade que você tem. Parece que eu encontrei um tesouro kkk Como é raro alguém com uma didática tão boa. Parabéns 👏🏻👏🏻👏🏻👏🏻
Muito obrigado pela sua ótima explicação, eu estava tendo muitas dúvidas e dificuldades, devido ser novo na área, mais a sua forma de ensinar foi muito boa e eu aprendi bastante coisa com teus ensinos. Valeu!!!!!
só aula top nesse canal, fico boba ! uma coisinha, sobre o X em 31:48, é so adicionar cursor: pointer em "menu-mobile .btn-fechar i "e ele se torna funcional
Seus video tem me ajudado muito. Porem neste fiquei com uma dúvida se puderem me ajudar, se a configuração mobile é até 1020px como determinou no exemplo pq ele passou todos elementos mobile fora do @media and (max-width: 1020px)?
Nossa não tenho palavras pra dizer o quanto você foi necessário pro meu projeto da faculdade, ficou muito top obrigada mesmo, agora vou aprender a linkar as coisas e passar as infos do formulário
Muito obrigada, eu consegui finalizar mas o meu deus uns probleminhas não estava fechando menu mesmo eu colocando o código no css e no media quereis, meu filho me ajudou adicionando display: none; no .menu-mobile e display: block; no .menu-mobile.abrir-menu ai deu certo.
Olá, Bruno, boa tarde, tudo bem? Primeiro quero te parabenizar para o projeto, vi todos os vídeos do portfólio e ficou bom, porém a uma parte que se você puder adicionar ao código ou até criar outro video é a parte em que você coloca uma função. Para quando você clicar em qualquer parte do menu ele o leve ao que você deseja e clicou. Acha que consegue colocar este video para nós? Abraços, Lucas Souza
Fala Lucas, tudo bem? Já ensinei a criar essa funcionalidade aqui no canal, se chama "Menu Scroll", dá uns confere aí e vc pode usar o msm conceito😁 ua-cam.com/video/86OWrZEKkKs/v-deo.html
Mano, essa foi a única parte do projeto inteiro que não funcionou. Quando abro o menu no mobile, não aparece conteudo nenhum, ta tudo preto. Só aparece quando está na tela grande de desktop, não consigo resolver.
Meu amigo, tudo bem? como faço para deixar um vídeo 16:9 responsivo nessa versão? Posso usar o site e por ele no ar? 😂 Serio msm, estou utilizando esse trabalho que vc nos ensinou pra me socorrer aqui.
fiz o projeto todinho mas o meu código sô aparece o menu mobile quando esta na versão desktop ja tentei jogar direto dentro do media mas mesmo assim não aparece me ajuda
Finalizei o meu agora, sou estudante da area, estou muito feliz com tudo que pude aprender fazendo esse portfolio, so tem um probleminha, meu botão de menu nao esta funcionando, voce ensina em outra aula ou eu fiz algo de errado mesmo ? rsrs
Vc pode ter feito algo errado kkkkkk no vídeo eu ensinei como fazer ele abrir, então se vc fez algo que fuja minimamente do que ensinei o seu não vai funcionar kkkkk olha se vc trabalhou certinho no Javascript. Se houver uma vírgula fora do lugar vai dar erro
Olá, Bruno! Conteúdos incrivéis, adiquiri muito conhecimento atráves dos seus videos. Me tira uma duvida por favor, o menu desktop ficou um em cima do outro depois que voltar para a versão desktop, como faço para deixa-los igual antes um ao lado do outro?
Querido gostei bastante desse seu projeto. teria como vc tirar o menu mobile, quando ele estiver em tela normal sem ser de celular? Pois ele fica mostrando quando esta em tela normal. so queria que ele aparecesse quando a tela ficar em modo mobile.
olá boa noite, meu botão de abrir menu não funciona sempre, tipo ele funciona 2 vezes ai para alguem com esperiencia para me ajudar ??????? to nessesitado
Você pode colocar os nomes das classes ou ids que você usou para cada div ou section que tenha o conteúdo que você deseja que ele redirecione no menu. É só substituir onde tem o "#", você pode por exemplo colocar "#especialidades"...
Pode me ajudar, por favor? Deu tudo certinho aqui só a interação no mobile do minhas especialidades e do portifolio não aparece com um click no safari, tenho que apertar e segura, porém no chrome funciona perfeitamente
Mano obrigado por esses videos tem me ajudado muito, to estudando para futuramente ser um baita profissional que nem voce! man so uma pergunta eu tava fazendo uns testes com o menu rolagem nesse portfolio, tem algum jeito de deixar as animaçoes do portfolio sem passar em cima do menu?
Fala mano, primeiramente muito obrigado ❣️ pra vc deixar um elemento atrás do outro (ou na frente) vc pode usar a propriedade z-index. Quanto maior for o valor do z-index, mais pra frente ficará o elemento q vc selecionou. Só lembrando que o elemento q vc for aplicar o z-index precisa ter um position relative ou absolute 😁
Fiz todas as aulas, projeto finalizado. 🥳 Professor, qual é esse tema que o senhor usa, e qual é o truque para aparecer aquele comentário quando o senhor cria uma tag?
Senhor? kkkkkkk calma que ainda to muito jovem kkkkkk. Sobre o tema eu utilizo o pacote de temas da RAINGLOW, ele ta disponível na loja de extensões do VS Code. E sobre o truque é apenas uma boa prática kkkkkk basicamente eu crio uma tag e dou uma classe para ela, aí eu vou até onde essa tag de fecha e adiciono um comentário com o nome da classe que dei para ela entende? Então meio que não é um truque, é algo manual que faço kkkkkk Agora se vc quiser o atalho para criar comentários, você pode apertar CTRL + ;
Basta usa no menu a propriedade position:absolute e escolher a direção ex: top:0; ou right,left,bottom. Espero ter ajudado,mas só asta adicionar a propriedade position absolute e definir a direção.
ta, mas pra que serve esse menu pq se clicar neles nao vai direto pra parte clicada, tipo clico em "sobre" mas nao vai pra sobre, fiquei sem entender isso
desculpa tanta pergunta, é q eu pretendo usar esse portfolio como meu proprio portfolio pra procurar emprego, por isso to perguntando esses detalhes kkkkk
Oi Emilly, fique tranquila, pode perguntar a vontade kkkkkk vamos por partes 😁 Para criar a rolagem automática ao clicar no menu vc pode usar o msm conceito desse vídeo aqui ó: ua-cam.com/video/86OWrZEKkKs/v-deo.html É muito simples, só replicar a msm ideia. Sobre os links para as redes sociais vc precisa adicionar os seus links dentro do "href" da tag Exemplo:
Ah e no mobile tem o botão de contato, então vc precisa criar um link de conversa do whatsapp para inserir no "href" da msm forma que usamos no exemplo q te passei no comentário anterior. Para criar um link de conversa, vc pode chegar no Google e pesquisar "criar link de whatsapp". Vão ter várias opções de site, pode entrar no primeiro, inserir o número do whatsapp q deseja, pode personalizar uma mensagem também e aí só gerar e copiar o link, aí pode colocar no href da tag 😁
Meu povo, teve um detalhe que acabei esquecendo de citar no vídeo. Para que as barrar de abrir o menu mobile suma da versão de desktop basta você adicionar esse código no seu css (fora das medias queries):
.btn-abrir-menu{
display: none;
}
E para que ela apareça apenas na versão mobile, basta adicionar esse código abaixo DENTRO DAS MEDIA QUERIES:
.btn-abrir-menu{
display: block;
}
Peço desculpa pelo esquecimento 😁😁
sou iniciante, o que seria as medias queries?
@@dreamer3153 Fala mano, tudo bem? No vídeo anterior a esse, onde eu falo sobre responsividade, eu falei sobre as medias queries. Mas para resumir é uma regra do CSS que possibilita a gente adaptar o nosso site para vários tamanhos de telas. Você pode identificar ele no seu código assim:
@media screan and (max-width: 1020px){}
@@InteliogiaDev quebrei um pouco a cabeça mas consegui consertar aqui, muito obrigado
que mal pergunte mas, como faço pra página rolar automaticamente para a seção criada no html ?
@@Jailondanet-tn8li tb estou com essa dúvida. Como faz Mestre?
Caracas que fd. Gostei de sua forma de ensinar bem direta sem enrolação, meus parabéns
vc é mt monstro mano, sempre aprendi pelos vídeos do Gustavo Guanabara pois acho a didática dele perfeita, e agora conheci você também e sua didática é maravilhosa! Com certeza vou acompanhar o canal e pegar umas dicas :)
Ser igualado ao mestre Guanabara é sempre uma honra pra mim 😁😁 muito obrigado msm, de verdade
olha cara, eu adorei muito com o seu tutorial. finalmente, fechei meu projecto..
OBRIGADO MANO!
Muito obrigado pela ajuda, estou inciando agora e estou procurando meios para aprimorar meu conhecimentos, graças ao seu trabalho estou aprendendo muito e se divertindo e ficando ainda mais confiante no que sou capaz de fazer e criar. eternamente grato
Bruno parabens maninho, vc me ajudu muito a evoluir meus conhecimento, parabens soram perfeitos os video bem explicado e direto.
Sucesso ganhou um novo membro
Muito obrigado por esses tutoriais incríveis, criei um landingpage com html e css, mas graças a vc estou conseguindo fazer o meu site ficar responsivo, sua didática é incrível!!!
Muitooooo bom, que forma tranquila que você explica, e que boa vontade que você tem. Parece que eu encontrei um tesouro kkk Como é raro alguém com uma didática tão boa. Parabéns 👏🏻👏🏻👏🏻👏🏻
Muito obrigado Graça, de verdade mesmo 😍
Muito obrigado pela sua ótima explicação, eu estava tendo muitas dúvidas e dificuldades, devido ser novo na área, mais a sua forma de ensinar foi muito boa e eu aprendi bastante coisa com teus ensinos. Valeu!!!!!
Muito boa! Me baseei e apliquei muito do seu conteúdo no meu portfoio, que ainda nao terminei Parabens!!
só aula top nesse canal, fico boba !
uma coisinha, sobre o X em 31:48, é so adicionar cursor: pointer em "menu-mobile .btn-fechar i "e ele se torna funcional
finalizei meu esboço agora, mano vc e mt brabo de vdd, vc tem didatica e isso e mt importante pro ensino de vdd, obrigado por esse projeto
Fala mano! Muito obrigado de vdd msm. TMJ👊🏾
O projeto ficou lindo d+. Aprendi muito. Você está de parabéns. Vamos que vamos
Ótimo projeto, fiz do começo ao fim.
Parabéns, espero poder fazer seu treinamento!!
Obrigado, que forma simples e boa de aprender. Parabéns!
Bah estava só por está aula 👏🏾👏🏾👏🏾
Seus video tem me ajudado muito. Porem neste fiquei com uma dúvida se puderem me ajudar, se a configuração mobile é até 1020px como determinou no exemplo pq ele passou todos elementos mobile fora do @media and (max-width: 1020px)?
Mano, obrigado pelo projeto. Aprendi muito com ele, meu css evoluiu muito só com esse portifolio! Abraço
Rei do front, obrigado cara.
hahahahah obrigado Wellybton kkkkkk rei do front é ótimo 😅
Projeto senssacional!!🚀🚀🚀🚀🚀🚀
Nossa não tenho palavras pra dizer o quanto você foi necessário pro meu projeto da faculdade, ficou muito top obrigada mesmo, agora vou aprender a linkar as coisas e passar as infos do formulário
Oi, você conseguiu linkar e passar as infos do formularios?
@@sbgcursos2527 consegui colocar o javascript no formulario agr linkar nao :c
Projeto incrível
Obrigada pela aula!!
Obrigado a vc, Duda 😁
amei! parabéns!
muito obrigado! por esse projeto incrível
Parabéns Professor!
Brabo, muito bom, pode me tira ruma dúvida? no desktop continua aparecendo o botão do menu mobile, como faço pra ele não aparecer?
Você pode fazer:
@media screen and (min-width: 1020px){
.btn-abrir-menu{
display: none;
}
}
Quando a tela for maior que 1020px o ícone desaparece.
Muito bom!
Vc é fera!
agradeço mt pelo projeto vai me ajudar mt
melhor projeto do mundo
Muito obrigada, eu consegui finalizar mas o meu deus uns probleminhas não estava fechando menu mesmo eu colocando o código no css e no media quereis, meu filho me ajudou adicionando display: none; no .menu-mobile e display: block; no .menu-mobile.abrir-menu ai deu certo.
Hahaha faz parte, esses erros que as vezes não entendemos o pq tá acontecendo kkkkk mas fico feliz em saber q tá tudo certo
Vc eh muito foda! ❤❤❤
Excelente video amigo, ajudou d+ poderia fazer um modulo so de JavaScript também
Olá, Bruno, boa tarde, tudo bem?
Primeiro quero te parabenizar para o projeto, vi todos os vídeos do portfólio e ficou bom, porém a uma parte que se você puder adicionar ao código ou até criar outro video é a parte em que você coloca uma função. Para quando você clicar em qualquer parte do menu ele o leve ao que você deseja e clicou. Acha que consegue colocar este video para nós?
Abraços,
Lucas Souza
Fala Lucas, tudo bem? Já ensinei a criar essa funcionalidade aqui no canal, se chama "Menu Scroll", dá uns confere aí e vc pode usar o msm conceito😁 ua-cam.com/video/86OWrZEKkKs/v-deo.html
obrigado pela resposta@@InteliogiaDev
@@InteliogiaDev eu fiz, mas a versão mobile quando carrega a pagina abre direto para a pagina sobre. pode me ajudar?
Muito bom, obrigado por tudo !
O meu website quebra quando volto pra o tamanho do computador? O que fiz de errado ? 😢
Muito explicado🙏
22:57 é massa demais codar fazendo essas analogias kkkk
Top de mais mano!
como faco para o menu aparecer somente quando esta aberto em mobile? ele esta aparecendo no desktop tbm
Top muito bom mesmo tmj já me escrevi rsrs
Eu já assistir varias vezes do começo e os meus botões de fechar e abrir o menu não funcionar! Da um help aqui.
Mano, essa foi a única parte do projeto inteiro que não funcionou. Quando abro o menu no mobile, não aparece conteudo nenhum, ta tudo preto. Só aparece quando está na tela grande de desktop, não consigo resolver.
Meu amigo, tudo bem? como faço para deixar um vídeo 16:9 responsivo nessa versão?
Posso usar o site e por ele no ar? 😂 Serio msm, estou utilizando esse trabalho que vc nos ensinou pra me socorrer aqui.
Ficou faltando o scroll 😢, será que tem um video desse projeto criando o scroll? 😂
fiz o projeto todinho mas o meu código sô aparece o menu mobile quando esta na versão desktop ja tentei jogar direto dentro do media mas mesmo assim não aparece me ajuda
Finalizei o meu agora, sou estudante da area, estou muito feliz com tudo que pude aprender fazendo esse portfolio, so tem um probleminha, meu botão de menu nao esta funcionando, voce ensina em outra aula ou eu fiz algo de errado mesmo ? rsrs
Vc pode ter feito algo errado kkkkkk no vídeo eu ensinei como fazer ele abrir, então se vc fez algo que fuja minimamente do que ensinei o seu não vai funcionar kkkkk olha se vc trabalhou certinho no Javascript. Se houver uma vírgula fora do lugar vai dar erro
muito foda
Amei!
O menu mobile não está aparecendo na versão para celular mesmo colocando o display block na mídia queris oque faço?
Muitoo Bom!! valeuu
Olá, Bruno!
Conteúdos incrivéis, adiquiri muito conhecimento atráves dos seus videos.
Me tira uma duvida por favor, o menu desktop ficou um em cima do outro depois que voltar para a versão desktop, como faço para deixa-los igual antes um ao lado do outro?
Fala mano, tudo bem? No comentário fixado eu deixei uma explicação para resolver isso 😁
Ameiii, mas moço eu tenho uma dúvida como eu faria pro ícone não aparecer na tela do site normal sem ser mobile????
Deixei um comentário fixada com a explicação. Cara eu literalmente deixei isso passar no vídeo kkkkkkkkkkkk
Meu menu não está aparecendo 😕
Querido gostei bastante desse seu projeto. teria como vc tirar o menu mobile, quando ele estiver em tela normal sem ser de celular? Pois ele fica mostrando quando esta em tela normal. so queria que ele aparecesse quando a tela ficar em modo mobile.
le o comentario fixado dos comentaios desse video, ele explicou sobre isso
@@emillyferrao29 Brigado querido, realmente ta lá. Eu que não vi.
olá boa noite, meu botão de abrir menu não funciona sempre, tipo ele funciona 2 vezes ai para
alguem com esperiencia para me ajudar ??????? to nessesitado
Qual biblioteca eu devo importar no header para usar o bootstrap5?
E como fica o código para que o menu mobile redirecione para cada tópico?
Você pode colocar os nomes das classes ou ids que você usou para cada div ou section que tenha o conteúdo que você deseja que ele redirecione no menu. É só substituir onde tem o "#", você pode por exemplo colocar "#especialidades"...
Pode me ajudar, por favor? Deu tudo certinho aqui só a interação no mobile do minhas especialidades e do portifolio não aparece com um click no safari, tenho que apertar e segura, porém no chrome funciona perfeitamente
Oi Sarah, tudo bem? Pode explicar melhor, pq n entendi muito bem sua dúvida kkkkkk
o meu JS não funciona
vlw man, tu é foda
A barra do menu mobile desconfigurou a versão desktop do meu site. Já modifiquei os códigos desse jeito mas continua. O que pode ser?
No comentário fixado tem a solução 😁
Mano obrigado por esses videos tem me ajudado muito, to estudando para futuramente ser um baita profissional que nem voce! man so uma pergunta eu tava fazendo uns testes com o menu rolagem nesse portfolio, tem algum jeito de deixar as animaçoes do portfolio sem passar em cima do menu?
Fala mano, primeiramente muito obrigado ❣️ pra vc deixar um elemento atrás do outro (ou na frente) vc pode usar a propriedade z-index. Quanto maior for o valor do z-index, mais pra frente ficará o elemento q vc selecionou. Só lembrando que o elemento q vc for aplicar o z-index precisa ter um position relative ou absolute 😁
cara nao achei a parque que voce seleciona o o icone do dropdown do menu mobile
Alguém conseguiu abrir no celular? O meu abre certinho no simulador de celular, porém quando eu realmente abro no celular ele não carrega
Gostei muito, muito bem explicado.
Fiz todas as aulas, projeto finalizado. 🥳
Professor, qual é esse tema que o senhor usa, e qual é o truque para aparecer aquele comentário quando o senhor cria uma tag?
Senhor? kkkkkkk calma que ainda to muito jovem kkkkkk. Sobre o tema eu utilizo o pacote de temas da RAINGLOW, ele ta disponível na loja de extensões do VS Code. E sobre o truque é apenas uma boa prática kkkkkk basicamente eu crio uma tag e dou uma classe para ela, aí eu vou até onde essa tag de fecha e adiciono um comentário com o nome da classe que dei para ela entende? Então meio que não é um truque, é algo manual que faço kkkkkk
Agora se vc quiser o atalho para criar comentários, você pode apertar CTRL + ;
@@InteliogiaDev sobre chamar de senhor, é questão de costume. Muito obrigado pela dicas, vou usar.🤝
Boa noite, esse projeto ficou incrivel!
teria como vincular aquele formulário ao enviar a mensagem ir para o Email?
Opa Gustavo, muito obrigado! Olha esse vídeo aqui, acho q pode te ajudar: ua-cam.com/video/OGs5bW5l8AE/v-deo.html
Estou com uma dificuldade, o padding na tag a do menu-mobile não está sendo aplicado, consegue me ajudar?
No X ou nos elementos listados ?
Mano como fazer aquele polígno da foto
como faço pra fixar o menu para que fique enquanto eu rolo pela página?
Basta usa no menu a propriedade position:absolute e escolher a direção ex: top:0; ou right,left,bottom.
Espero ter ajudado,mas só asta adicionar a propriedade position absolute e definir a direção.
Ou ultiliza a propriedade position fixed e aumenta o z-index se a imagem estiver embaixo.espero ter ajudado mano.
ta, mas pra que serve esse menu pq se clicar neles nao vai direto pra parte clicada, tipo clico em "sobre" mas nao vai pra sobre, fiquei sem entender isso
e tbm o botão contato nao tem link nenhum dentro, os icones das redes sociais tbm etc, como faz isso??
outra coisa q tbm reparei, é q no mobile nao tem o botão de entrar em contato, q na minha ideia cairia direto no whatApp
desculpa tanta pergunta, é q eu pretendo usar esse portfolio como meu proprio portfolio pra procurar emprego, por isso to perguntando esses detalhes kkkkk
Oi Emilly, fique tranquila, pode perguntar a vontade kkkkkk vamos por partes 😁
Para criar a rolagem automática ao clicar no menu vc pode usar o msm conceito desse vídeo aqui ó: ua-cam.com/video/86OWrZEKkKs/v-deo.html
É muito simples, só replicar a msm ideia.
Sobre os links para as redes sociais vc precisa adicionar os seus links dentro do "href" da tag
Exemplo:
Ah e no mobile tem o botão de contato, então vc precisa criar um link de conversa do whatsapp para inserir no "href" da msm forma que usamos no exemplo q te passei no comentário anterior.
Para criar um link de conversa, vc pode chegar no Google e pesquisar "criar link de whatsapp". Vão ter várias opções de site, pode entrar no primeiro, inserir o número do whatsapp q deseja, pode personalizar uma mensagem também e aí só gerar e copiar o link, aí pode colocar no href da tag 😁