Aprenda HTML, CSS e Javascript com esse projeto do Guardiões da Galáxia!
Вставка
- Опубліковано 22 тра 2023
- Neste tutorial, você aprenderá a criar o incrível site dos Guardiões da Galáxia usando HTML, CSS e Javascript. Através deste projeto prático, você explorará técnicas de CSS para aplicar um efeito gradiente em um texto, animações de transição, um carrousel de imagens fácil de aplicar. E com o Javascript vamos adicionar interatividade e recursos dinâmicos ao nosso site.
Visualizar projeto: guardioes-da-galaxia.leonardo...
Link do template: github.com/leovargasdev/youtu...
Arquivo no drive: drive.google.com/file/d/1_4id...
Não esqueça de se inscrever!
🎥 𝗩𝗜𝗗𝗘𝗢𝗦 𝗖𝗜𝗧𝗔𝗗𝗢𝗦
• Tutorial do menu toggle
• Domine o Menu Toggle -...
• Efeito de trocar os caracteres
• The Ultimate Hacker Ef...
• Criando o site do filme Super Mario Bros com HTML e CSS
• Criando o site do film...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
🏘 𝗖𝗢𝗠𝗨𝗡𝗜𝗗𝗔𝗗𝗘 𝗡𝗢 𝗗𝗜𝗦𝗖𝗢𝗥𝗗
/ discord
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦
Twitch: / leovargasdev
Instagram: / leuvargas
Twitter: / leovargasdev
Linkedin: / leonardo-luis-de-vargas
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💻 𝗦𝗘𝗧𝗨𝗣
Notebook Dell (amzn.to/48080ra)
Tela 1: Monitor AOC(amzn.to/3NAJq8L)
Suporte Ergonômico ELG (amzn.to/3t0i1G5)
Hub USB C p/ usar na 2ª tela (amzn.to/3uI2jjs)
Webcam Logitech BRIO (amzn.to/3RDm4BP)
Microfone Blue Yeticaster (amzn.to/3sW32wW)
Teclado Redragon Varuna (amzn.to/3T8Dkji)
Mouse Logitech G300s (amzn.to/3Rtnfn4)
Mouse Pad (amzn.to/3Rtnfn4)
Estante (amzn.to/46KgVfr)
Cadeira (amzn.to/3Rtwa71)
Fone de ouvido (amzn.to/3R5yZe9)
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
#HTML #CSS #Javascript #GuardiõesdaGaláxia #DesenvolvimentoWeb #CriarSite #Tutorial #WebDesign #Programação #SitePersonalizado - Наука та технологія
Didática sensacional como sempre! Aguardando mais vídeos com projetos
Obrigado Beatriz!! Spoiler: Na próxima semana sai o projeto da Barbie
Ficou lindão. Parabéns, excelente conteúdo.
Obrigado Peter!
Parabéns, projeto ficou muito top !!!
Muito obrigado Luan!
Show de bola!! parabéns
Obrigado Misael!!
Cara, show! Mais um incrito! ➕
Obrigadão Jeferson
Cara que projeto top, cai de para-quedas aqui e já me inscrevi , espero um dia conseguir fazer algumas telas assim! hehehe
Obrigado jovem, com a prática você consegue. Se ficou alguma dúvida é só chamar!
seus vídeos são incríveis e da pra aprender muito bem! tem me ajudado muito, vlw vlw
Fico feliz em saber, e obrigado pelo feedback!!
Ficou foda dms!!!
Muito obrigado Rafael!
tu merece 1 Milhão de Inscrito, campeão
Obrigado Jorden!!! Um dia chegamos lá 🙏🏼
Vídeo Incrível!! Foi vc que fez os ícones dos membros dos guardiões. Queria fazer uma versão do projeto da akatsuki
Que bom que gostou! Eu não fiz os ícones, achei eles na internet
quando eu coloco o "overflow:hidden" todas as imagens somem e quando eu clico nos botões avançar e voltar não acontece nada, não sei o que eu fiz de errado meu código está exatamente igual ao seu até o minuto 12:00 que foi onde começou a dar problemas pra mim e eu acabei parando :/
sensacional , só existe um pequeno detalhe a ser melhorado para o usuário, quando o menu lateral estiver aberto, oculte os botões de navegação os de avançar e voltar, merece milhões amigo. da gosto de ver seu conteúdo.
Muito obrigado Johnny✌🏻e valeu pela sugestão!
muito top conteúdo mano , sobre esses card como você fez eles ? , quero replicar esse projeto mas fazer uma alterações
Obrigado jovem! Sobre os cards, eu gerei a partir desse post aqui do dribbble dribbble.com/shots/3554982-Guardians-of-the-Galaxy-vol-2
toppppp
🚀🚀🚀
@@leovargas coloca um projetinho completo aí com responsividade, Java, banco de dados etc.... :)
@@arthur-hero7110 eu conheço bem pouco de Java kkkkk, tenho no meu backlog um projeto com reactJS + Firebase.
Ainda não codei ele e provavelmente demore para sair aqui no UA-cam, mas algum dia vai sair kkkk
Valeu a pena os 45 minutos + 13 minutos do video de toggler!
Amigo gostaria de tirar uma duvida com você, estou focando bastante no JS porém ando bem inseguro quanto a minha habilidade de HTML e CSS, nesse video mesmo em relação a propriedades desconhecia apenas cerca de 7% ou menos, já em relação a saber como unificar essas propriedades para formar um elemento significante eu realmente desconhecia bastante.
É interessante continuar assistindo esses videos de landing page ou outros como o seu para aumentar o 'arsenal' ou existe outra forma melhor de adquirir essa confiança?
Você não precisa saber todas as tags HTML e propriedades do CSS, o básico já é o suficiente e o resto você aprende com a prática.
O interessante é ver vídeos que envolvam JS para melhorar a lógica de programação, criar elementos dinâmicos, eventos de formulário, eventos de click, integrar com API e etc, e dessa forma você aprende coisas novas sobre HTML e CSS por tabela.
tem alguma extensão diferente q vc usou?, tava vendo no browser e fica tudo bugado, não foi direto com scroll e os botoes ficaram embaixo da imagens e não saem
Olá Clarissa, não usei nenhuma extensão no navegador. Você quer me mandar o seu código? Dai eu posso lhe ajudar
Poderia colocar uma api para exibir informações desses personagens?
Olá, é possível fazer, posso subir o JSON em um endpoint
Sobe aí. ..
fala Leo, eu sei que o vídeo da explicação do JS (o letreiro hacker lá) é bem curtinho e completo, mas tu consegue fazer uma versão BR não? Tive dificuldade em entender algumas coisas, se puder fazer eu ficaria mt agradecido!
aliás, na parte de escolher o membro pelo menu navigation eu apenas acrescentei isso no JS e funcionou:
const setMember = (memberId) => {
activeMember = 0;
navigationMember(memberId);
}
sem a necessidade de criar as outras funções e altera-lás
Olá, eu não conheço esse vídeo "o letreiro hacker", poderia me enviar?
@@leovargas é o que vc citou na descriçao, o efeito de caractere lá kkkkkk acho q eu traduzi o nome do video
show.. como se chama essa tecnica na programação.. sou iniciante e estou querendo fazer uma pagina onde clico e uma foto de uma professor e do lado vai aparecer outra foto e sua biografia...
Olá Jerry, esse projeto usa programação voltada para a web com eventos via javascript.
Baita ideia, não é muito dificil de fazer, você só vai precisar alterar os dados da variavel members e atualizar fotos.
ok.. o obrigado
@@leovargas
Mano como fazer esse reset rs
Opa, qual reset?
Boa noite Leo, tudo bem?
Fiquei com uma duvida na parte do codigo.
Quantos = você colocou? tentei usar =, == e ===. Ambos não funcionaram
Qual o correto ali neste parte? Pode me ajduar?
const prev = document.getElementById('button__prev')
const isFirst = activeMember == 0
prev.disable = isFirst
const next = document.getElementById('button__next')
const isLast = activeMember == members.length - 1
next.disable = isLast
Olá Emerson, eu usei três(===), mas com dois também deve funcionar. Como eu uso uma fonte com ligatures, ela une alguns caracteres.
Mais info sobre os iguais: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Equality_comparisons_and_sameness
Sobre a fonte, eu tenho um vídeo explicando ela e como funciona, link:
Aprenda a personalizar o VSCode - Tema, configurações, extensões e dicas
ua-cam.com/video/W2KPdh4F4t8/v-deo.html
Se o seu código não está funcionando, me chame no discord, posso lhe ajudar
o meu ta dando o erro de que so aparece a primiera imagem da lista sabe o poeque?
Olá, em qual lista? do menu lateral?
o seu código está no github?
Cara, tudo bem?? Estava com este mesmo problema... resolvi da seguinte forma:
- Dentro de styles, você abre o arquivo global.css.
- em 'body' você (temporáriamente, enquanto desenvolve o codigo, remove a linha Overflow inteira.
Faz o teste, mas quase certeza q é isso!
to exatamente com o mesmo problema, só aparece a imagem do Peter Quill, as outras imagens nem aparecem e os botões não funcionam
cara muita dificuldade em entender esse seu JS, simples mas na minha cabeça nao sei como replicar
Opa Teodoro, mas qual parte vc ficou com mais dúvida? A parte inicial, com a navegação no array?
Acabei o projeto agorinha, quero agradecer mais uma vez pelo projeto INCRÍVEL! 💜 É difícil encontrar projetos tão phodas assim até em vídeos da gringa, então respeito máximo pelo trabalho e também pela parte educacional com a gente! 🚀🚀📚📚💻💻🔥🔥 Vou marcar lá no linkedIn. Só um detalhe, no botão ali em baixo para avançar e voltar. Depois das ultimas alterações, quando clico nele meio que buga tudo e trava tudo. Ou era pra funcionar certinho?
Leooo, consegui!!!! Tudo rodando! Noissssssss
Ainda bem de deu boa!!! 🙏🏻🙏🏻
mals pela demora :/