No video
Projeto criativo com HTML, CSS e JavaScript: A criação de um site com animações
Рет қаралды 47,374
Күн бұрынVou te ajudar com Programação: go.rodolfomori...
Neste vídeo, você aprenderá a criar um site interativo e visualmente atraente usando HTML, CSS e JavaScript.
Vamos estruturar o site com HTML, estilizar com CSS para um design moderno e responsivo, e adicionar animações dinâmicas com CSS e JavaScript para uma experiência de usuário envolvente.
Cada passo será explicado em detalhes para garantir sua compreensão.
Coloque seu site no ar com a Hostinger: www.hostg.xyz/...
Cupom: DEVCLUB
Este projeto é perfeito para aprimorar suas habilidades de programador e criar algo impressionante.
__________
Loja do canal: Https://loja.devclub.c...
__________
Meu Canal Rodolfo Mori: / @canalrodolfomori
CURSO DE HTML: • Curso de HTML | Tornan...
CURSO DE CSS: • Curso de CSS | Tornand...
CURSO DE JAVASCRIPT: • Curso de JavaScript pa...
Imagens do Projeto: ibb.co/album/B...
Inscreva-se no Canal: bit.ly/3h1xtJ5
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Assista também:
Projeto SLIDER com CSS, HTML e JavaScript: • Projeto SLIDER com CSS...
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Meus Links 👇👇
🔥 LIVE toda Segunda: go.rodolfomori...
📸 Insta: @rodolfomorii / rodolfomorii
👥 Fale com nossa equipe: go.rodolfomori...
Criei este canal para ajudar você que quer sair do ZERO, iniciar sua jornada e se tornar um programador!
Se já é um programador e quer evoluir na carreira de programação, também está no lugar certo, aqui você vai encontrar conteúdos relevantes que vão te ajudar!
Capítulos
00:00 Introdução
01:38 Abrindo o VSCode
01:51 Estruturando o site com HTML
05:24 Preciso da sua Ajuda
05:40 Continuando a Estruturar o site com HTML
14:23 Estilizando com CSS
55:00 Criando Efeito (com CSS, e ajuda do JavaScript)
1:08:43 Adicionando interatividade com JavaScript
1:35:09 Colocando o Site no ar
@canaldevclub 2 ай бұрын
Vou te ajudar com Programação: go.rodolfomori.com.br/aprendacomigo
@anddremarcelino3816 17 күн бұрын
Muito obrigado meu amigo Deus te abençoe muito.
@theta-vittopayver 14 күн бұрын
Olá, tudo bom! Estou desenvolvendo um site explicativo de html em Geral. Estou aqui para pedir permissão para adicionar seus vídeos no site... Estou aguardando sua resposta.... assim que possível vou divulgar o nome do site. E seu nome de Programador e KZfaqr estára na área de Devs Proficional do site.
@bk6934 23 сағат бұрын
Muito bom, continua fazendo vídeos nesse estilo 👏
@marcusgarim Ай бұрын
Esse estilo de projeto é perfeito para quem está iniciando, (pode ser a minha bolha do algoritmo, masss) tem muito conteúdo por aqui de tecnologias mais avançadas como Js, Node Js e React, e os projetos de HTML e CSS são muito feios e não tem uma pitada de Js. Esse conteúdo é ideal pra quem ta começando, pq ele não é nem avançado em Js e nem básico em HTML e CSS!
@Everaldobass 2 ай бұрын
Muito bom. faz um CRUD com Backend com NodeJS e Front com HTML, CSS e JS.
@canaldevclub 2 ай бұрын
HAHAHAH acabei de fazer, da uma olhada aqui no canal!
@r3msolucoesdigitais34 26 күн бұрын
Que aula showwwww professor. Que venha mais projetos práticos.
@canaldevclub 23 күн бұрын
Tmjj
@henzoarruda4582 2 ай бұрын
Mano que demais, ce é fera e trás muito conteúdo de qualidade. Uma sugestão: criar um portfólio pra dev, com pagina de projetos, experiências, cursos/certificados, contatos...
@carlosmagno3506 2 ай бұрын
Sensacional. Esses videos com projetos, abrem muitos nossos olhos para que estamos iniciando em relação a codar. Gostaria de sugerir uma parte 2 desse video, colocando esse site responsivo para outros dispositivos, precisamente mobile. Seria um conteúdo de grande valia e ajudaria muito a todos! Obrigado por tudo desde já!
@noanalmeida3341 27 күн бұрын
Gostaria muito de mais projetos. Você é simples e direto, e isso é muito bom !
@canaldevclub 23 күн бұрын
Muuito obrigado!
@josiemeneses8522 2 ай бұрын
hum... se eu pudesse pedir!! adoraria de mais projetos como esse frontend!! seus projetos sao muito massa!! ja estou concluindo os modulos de JS no devclub!!!! vamos que vamos!!!!
@jeanmaicon0607 2 ай бұрын
Muito bom o conteúdo. Já tenho noção bem básica do assunto, e esse vídeo me ajudou a lembrar algumas coisas. Gostaria de uma segunda parte fazendo ligações entre telas. (Exemplo: clicar no "saiba mais" e detalhar o veiculo, clicar no "Veículos" e listar eles.)
@kaiqueoliveira4448 10 күн бұрын
simplesmente o melhor video que eu ja vi sobre programação
@canaldevclub 9 күн бұрын
Obrigado mano!
@alexoliveira1947 27 күн бұрын
Projeto sensacional Rodolfo. Sou professor de informática e estou dando esse conteúdo para os meus alunos. Fiz um passo a passo no word para eles acompanharem tudo que você fala. Obrigado por compartilhar seus conhecimentos. Espero em breve fazer parte da DevClub. Grande abraço.😉
@canaldevclub 23 күн бұрын
Fico feliz em saber mano, tmjj
@user-qu3gx6vr1g 2 ай бұрын
Projeto muito bom, com esta base da para fazer várias outras coisas.
@memgood8683 3 ай бұрын
Sempre trazendo os melhores projetos
@canaldevclub 2 ай бұрын
Valeu irmão!
@Marcelo-gn7xf Ай бұрын
Você foi melhor professor que já conheci, aprender com você de torna mais fácil, parabens e obrigado 👏
@canaldevclub Ай бұрын
Eu que agradeço
@daianyday481 2 ай бұрын
Alo Rodolfo.. você é um excelente treinador, amei todas as suas didáticas, obrigada pelas suas aulas, que Deus te abençoe muito estou muito grata ta por você nos proporcionar esses conteúdos aqui no You Tube, Obrigada.. meu jovem. Rodolfo Mori
@canaldevclub Ай бұрын
Muito obrigado vc!
@RoberiodosBicho 2 ай бұрын
MUIIITO TOP! por favor mano, faz a parte de deixar responsivo!
@adrianorocha.dev17 2 ай бұрын
Seus projetos de front-end para iniciantes, são muito bons Mori! Só um feedback...coloque neles no final, a parte de design responsivo.
@gleissoncalebe2259 2 ай бұрын
Pra mim a sugestão é mais projetos, pq ajuda bastante no aprendizado.
@thalesaugustoeuzebioalvesd4117 2 ай бұрын
up
@eduardohenrique1095 2 ай бұрын
up
@joaopaulosantos475 3 ай бұрын
top mano, sugestão, poderia ensinar a criar um sistema de cadastro 100% profissional
@canaldevclub 2 ай бұрын
Anotado!
@llbarros7983 2 ай бұрын
esse seria legal
@noea.oliveira 2 ай бұрын
Up!
@davidsyllva 2 ай бұрын
@@canaldevclubCom banco de dados noSQL
@kaiogabriel3768 2 ай бұрын
Projeto bem interessante e com ferramentas ótimas, posta mais projetos com react rodolfo
@rodolfih Ай бұрын
Mano e muito estranho ver alguém que tem o seu nome dando vídeo aula, toda hora que fala "RODOLFO" lembro dos professores chamando minha atenção na sala de aula kkkkkkkkk. Ótimo conteúdo mano, comecei a pouco tempo a estudar programação, estava vendo umas vídeo aulas e seu vídeo apareceu pra mim, acabei caindo aqui de paraquedas, acabei gostando do conteúdo, vou continuar acompanhando.
@canaldevclub Ай бұрын
kkkkkkkkkkkkk TMJ irmão
@jao934 18 күн бұрын
Brabo, Mori! gratidão pelo projeto!
@canaldevclub 17 күн бұрын
Tmjj
@capozzoliify Ай бұрын
Mais projetos pára nois praticar!
@thiagomacedo4191 2 ай бұрын
Muito bacana Rodolfo, na parte de CSS aprendi muita coisa
@viniciuspereira6039 2 ай бұрын
Mais projetos como esse muito topp mano
@llbarros7983 2 ай бұрын
muito bom professor! mais um projeto espetacular vai pra minha coleção
@canaldevclub 2 ай бұрын
Booa, tmj
@christiansanchez2084 3 ай бұрын
Bom dia! Gostaria de ver mais projetos com as tecnologias mais requisitadas pelo mercado atual, Obrigado!
@canaldevclub 2 ай бұрын
Sugestão anotada!
@mensagemdosenhorilustrada 2 ай бұрын
Top. Parabéns .Continue com estes projetos
@SamuelSantos-xs2pr 2 ай бұрын
Acabei de Fazer ADS e estou aprofundando mais na area, me interessei muito pelo desenvolvimento web, seu video é muito bom e explicativo. Gostei demais, conheci agora e tem mais um inscrito fiel haha !!!
@canaldevclub 2 ай бұрын
Tmjjj
@fernandoapcr 2 ай бұрын
cara que fera, por mais projetos assim
@bielxsfps 2 ай бұрын
Rodolfo, traz mais projetos desses mais só q em react 😄
@oficialgabriel6601 3 ай бұрын
bom dia na minha humilde opiniao gostaria de ver mais projetos para aprender mais com vc e tbm falar sobre carreira para poder conseguir uma vaga com suas dicas
@PeKenoDev 2 ай бұрын
Fala rodolfão, excelente conteúdo, Cara seria massa se tu mostrasse a respeito de projetos práticos com back-end usando requisições e banco de dados além de react native pra fazer aplicativos Android e ios
@Tais-santos 2 ай бұрын
Rodolfo,mais projetos com react.
@felipedoamaral1205 2 ай бұрын
Aprendendo muito com esses projetos, Rodolfo ensina o projeto do Iphone!!!!
@rafaelfaruel6463 2 ай бұрын
Muito bom ... Sou devclub e tô amando .
@canaldevclub 2 ай бұрын
Fico feliz em saber, tmjj man
@mateuszuck7153 2 ай бұрын
Muito bom, RODRIGO FAZ UM COM REACT HTML E CSS POR FAVOR
@gleluis15 3 ай бұрын
Mais um projetinho top. Wlw Professor 👏🏻
@FB3Crazygames1234567 21 күн бұрын
olá, bom dia, boa tarde, boa noite. estou vendo seus videos e gostando pa karamba, + um inscrito e + um like, tô começando agr na programação, e só achei ate agr 3 profs q ensinam realmente pra quem tá começando... posta mais relacionado a Js... vlw tmj
@canaldevclub 6 күн бұрын
Ah posto sim! Tem uma playlist de JS aqui no canal
@eliana59324 2 ай бұрын
rodolfo adorei sua explicação😊
@canaldevclub 2 ай бұрын
Tmjj
@dibrasul6528 2 ай бұрын
Nossa,esse prometo é massa demais!
@marcosv368 3 ай бұрын
Top de verdade, obrigado por tudo professor!
@pernafriston 2 ай бұрын
Rodolfo quero mais projetos para ficar praticando mais
@canaldevclub 2 ай бұрын
Anotado! Tmj
@AndreiaBorges-md1hf 2 ай бұрын
muito bom! queria um video seu ensinando a criar um blog
@Duduzinho2408 Ай бұрын
Muito bom o conteúdo.
@canaldevclub Ай бұрын
Muito obrigado
@duanesamuel4919 2 ай бұрын
muito bom! faça um projeto de site de Petshop e pizzaria!
@UXDesire 2 ай бұрын
Tem uma coisa, interessante ! Que achei que você poderia fazer ! Algo como Checkout para quem vai comprar os carros , implementar nesse projeto ! Digo isso porque ele ficou totalmente front-End , então fazer algo que pudesse efetuar uma transação de compra iria ser legal, talvez usar um código do paypal ou algo similar ficaria completo. Para fins de teste de publicação usaria o Netlify , visto que já é possível colocar no ar gratuitamente e talvez depois mudar para hostingator. Por finalizar estou procurando forma de fazer a venda, algo como contrato de orçamento para sites e contrato para as partes envolvidas já tenho o material mas estou vendo como facilitar tudo isso via online para o cliente Obrigado pelo conteúdo !
@wocwoc 2 ай бұрын
top , gostei de realizar o projeto. me trouxe outras formas que não conhecia..
@canaldevclub 2 ай бұрын
Booa, tmjj
@wocwoc 2 ай бұрын
@@canaldevclub Me escrevi em seu canal. O que acho legal , é que você não vai dar código pronto . Se quiser assistir e aprender e entender, só dê play .
@jorgeluizcamposmelo3844 2 ай бұрын
Achei! Fp Project... vou analisar seu código e comparar com o meu...
@canaldevclub 2 ай бұрын
Vamos pra cima!
@marianamartins2956 3 ай бұрын
Aula maravilhosa
@canaldevclub 2 ай бұрын
Obrigado 😃
@thiagosoares5052 2 ай бұрын
Mano, fiquei fâ do seu canal e ja me inscrevi
@canaldevclub 2 ай бұрын
Tmjjj
@AbeljorgeSouza 16 күн бұрын
Boa noite meu amigo, não estou conseguindo abrir esse site ibb onde tem as imagens dos carros, todos conseguiram abrir ?
@AdrianaDrikaFraga 3 ай бұрын
Grande!! Grata 🙏👏👏
@canaldevclub 2 ай бұрын
Obg!
@EmelsonMuquissi 2 ай бұрын
Muito Bom 👏👏
@canaldevclub 2 ай бұрын
Valeuu, tmj
@paulussanctus2761 3 ай бұрын
Sugestão: fazer um CRUD. Obrigado
@canaldevclub 2 ай бұрын
Sugestão anotada!
@janedeispraca1102 3 ай бұрын
Tô sem notebook pra refazer esses projetos mas dia 22 vou compra outro e continua estudando no dev club fullstack
@canaldevclub 2 ай бұрын
Boaaaaa
@igjunio 10 күн бұрын
Add o código desde projeto no Github ou algo assim
@IGNACIOMALESSA 16 күн бұрын
Ótimo vídeo, acho que a única coisa que faltou foi o figma para ter uma dimensão maior do projeto ou até mesmo tentarmos sozinhos antes de ver o vídeo.
@canaldevclub 6 күн бұрын
Pior que esse foi de cabeça, não teve figma!
@user-ig7sf8ik9i 2 ай бұрын
muito bom seu videos
@canaldevclub 2 ай бұрын
Valeuu, tmj
@enzo-6655 2 ай бұрын
Sensacional
@canaldevclub 2 ай бұрын
Valeuu, tmj
@wellyngtongoncalves9599 2 ай бұрын
Poderia montar um loja online mostrando também quantidade em estoque
@leonardocardoso884 3 ай бұрын
Maravilhoso
@josiascordeiroful 2 ай бұрын
Projeto com node e com React e Native
@user-fb7cj4tj4j 3 ай бұрын
Muito top
@canaldevclub 2 ай бұрын
Valeu irmão!
@Eliasafe_dev 3 ай бұрын
projeto brabo
@canaldevclub 2 ай бұрын
Valeu mano!
@penseprogramando626 2 ай бұрын
Show de bola, parabéns consegui fazer, porém o botão da direita não funciona o evento onclick. Só pega quando eu abro o inspecionar e redimensiono a tela. Alguém poderia me ajudar?
@canaldevclub Ай бұрын
Estranho irmao, me manda o codigo no insta q eu t ajudo
@thiagohenssuchi7619 2 ай бұрын
kkkk brabo, só o editor que ignorou os trechos dos vds q vc foi pedindo no video kkk
@canaldevclub 2 ай бұрын
HAHAHAHAHA
@user-no6ct6tk6f 2 ай бұрын
Eu gostaria de pedir cursos mais completos e projetos com diversas linguagem
@jorgeluizcamposmelo3844 2 ай бұрын
Top demais!, mas meus botões não funcionaram!!!! Vou refazer o projeto a partir desse ponto...
@davidfrancisco5412 6 күн бұрын
Rodolfo tem os códigos no git? No eu não sei o que fiz de errado, não mostra erros, porém quando eu vou no Live Server para ver se o site está ficando parecido com o seu da diversos problemas como a descrição não ficando aonde eu quero, as setas não ficarem dentro das bolinhas, e ao invés da cor neon que era pra ser somente denteo da bolinha quando clica ela faz uma linha
@canaldevclub 6 күн бұрын
github.com/rodolfomori/fp-project
@isabellagouveias 2 ай бұрын
Sugestão: projetos em angular 17
@canaldevclub 2 ай бұрын
Anotado!
@danielamaral8972 2 ай бұрын
Depois que faz o site como coloca um forma de pagamento fácil sem usar gatery de pagamento de terceiro tem como ?
@canaldevclub Ай бұрын
Trabalhar com meio de pagamento o buraco é mais embaixo. Tenho que fazer integração com o gateway
@GabrielMoraes-bw8bb 2 ай бұрын
Ola Rodolfo, eu estou fazendo passo a passo, igualzinho voce esta fazendo. mais eu não sei o motivo que o site não esta mais atualizando as coisas que adiciono pelo VScode. Voce poderia me ajudar por favor???
@canaldevclub 2 ай бұрын
Cara, reinicia o computador..deve funcionar rsrs
@claHize 8 күн бұрын
tem o codigo no git ? pois o meu ta dando errado queria comparar
@canaldevclub 6 күн бұрын
github.com/rodolfomori/fp-project
@carlosgomes8323 9 күн бұрын
A gente estuda programação mas sempre sobre conteudos ,mas no caso de empregos ,o que um front end faria em uma empresa? nunca vi um dev em uma empresa codando para saber quais são as demandas diarias.
@canaldevclub 6 күн бұрын
Opa, vou criar um conteúdo sobre isso!
@allananderson658 2 ай бұрын
Já me inscrevi e estou comentando também pra contribuir. Me responde uma coisa: você acha que dá pra ganhar dinheiro só com HTML, css, e javascript? Pq as vagas que vejo é um montão de habilidades que a pessoa tem que ter! Eu nunca vi uma vaga, tipo: pra pessoas com habilidades em HTML, css e javascript. Me responde aí
@canaldevclub 2 ай бұрын
Assiste esse vídeo kzfaq.info/get/bejne/Z6udaNeSzrfTe6c.html&lc=Ugwl3q1-mrnnEi2ebG54AaABAg
@robertofilho7932 2 ай бұрын
Rumo aos 500k
@canaldevclub 2 ай бұрын
Boraaa pra cima!
@jorgeluizcamposmelo3844 2 ай бұрын
Corrigido! Fiz umas múltiplas cagadas...kkkkkkk agora tá sussa!!!!!!
@canaldevclub 2 ай бұрын
HAHAHAHA BOA
@decaastro96 2 ай бұрын
Ótima aula prof. Tira uma duvida inseri tudo dentro da função global e mantive nos botões apenas a validação da posição do active, percebi que você deixou o classList add no seu, mas o meu funcionou perfeitamente sem, tem algum problema??
@canaldevclub 2 ай бұрын
Não, sem problemas. Tem vários jeitos de fazer a mesma coisa!
@josiascordeiroful 2 ай бұрын
Projeto backend
@davidm.1263 Ай бұрын
Amigão, onde voce consegue essas imagens?
@canaldevclub 22 күн бұрын
ibb.co/album/BnWNgx
@gabrielmoraes275 22 күн бұрын
Como fazer imagens iguais a essa me responde pfffff
@davidm.1263 21 күн бұрын
@@canaldevclub não brother, eu quis dizer: “você que faz essas imagens? Ou consegue elas em algum site específico?”
@fabiomartins4720 2 ай бұрын
uma pergunta esse projeto esta responsivo?
@canaldevclub 2 ай бұрын
Não man
@EriveltonBrasilBatista 2 ай бұрын
Meu deu um erro nesta linha do js let items = container.querySelectorAll(".list .item")
@canaldevclub Ай бұрын
Me chama no insta q eu t ajudo
@jean_fellype00 2 ай бұрын
Bom dia, gostaria de mais projetos para nos auxiliar.
@canaldevclub 2 ай бұрын
Será um prazer
@gabrielmoraes275 22 күн бұрын
Como consigo fazer imagens desse tipo???
@canaldevclub 6 күн бұрын
Eu pesquiso no google
@mikaellynagazaki 2 ай бұрын
Queria muito esse código completo pfvr
@PedroBosse-rz6hh 3 ай бұрын
Mais projetos prof
@canaldevclub 2 ай бұрын
Opa!
@CardosoPauloAndre 2 ай бұрын
Show
@cleberfeitoza4854 21 күн бұрын
Faaaaala Rodolfo top de mais seus vídeos cara muito bom já aprendi muitas coisas com vc, mais me tira uma duvida no final do vídeo onde vc codificou os botões para que os imagens viessem da direção respectiva ao botão selecionados a um pequeno detalhe, onde vc clica no botão e ele vem da direção oposta uma vez e em seguida ele se corrige automaticamente teria como solucionar esse problema?
@canaldevclub 6 күн бұрын
TUdo tem jeito de arrumar kkkk Vou dar uma olhadinha no que você ta falando, que não me recordo!
@LuanBressanin 3 ай бұрын
Otimo video prof, disponibiliza as imagens pra nos plss
@canaldevclub 3 ай бұрын
ibb.co/album/BnWNgx
@mizael06 2 ай бұрын
faz um curso de REACTJS
@canaldevclub 2 ай бұрын
Acabou de sair no canal. kzfaq.info/get/bejne/lc14pZWBypuwc40.html
@jubisninha 2 ай бұрын
qual a previsão de de abertura de inscrições do devclub?
@canaldevclub 2 ай бұрын
rodolfomori.typeform.com/devclub-espera
@13mvincius 3 ай бұрын
Projetos com react js
@canaldevclub 2 ай бұрын
Opa, anotado!
@guilhermemartins5943 2 ай бұрын
Teria o link para que possamos ver os códigos/estrutura desse projeto?
@canaldevclub Ай бұрын
Me chama no insta q t mando
@ESMAELARTUR258 15 күн бұрын
qualquer cousa🎉, ta ai meu comentario😅.
@canaldevclub 14 күн бұрын
kkkkkk
@erickhenrique-mk6uz 2 ай бұрын
como eu baixo as imagens
@canaldevclub Ай бұрын
Está na descrição o link
@zpandoraG0LDz 24 күн бұрын
Rodolfo, como que faz pra aumentar o tamanho daquelas letras de cima? (Home, carros e fale conosco)?
@reuelsiIva 14 күн бұрын
no css header nav ul li { font-size: ; }
@canaldevclub 8 күн бұрын
Isso ai, só aumentar o font-size
@thiagodcsantos 2 ай бұрын
Fala mestre blza. Quanto cobrar mais ou menos por uma aplicação dessa modificada.
@canaldevclub 2 ай бұрын
Olha, eu cobraria de 500 á 1000 reais
@thiagodcsantos 2 ай бұрын
Muito obrigado. Vcs estão de parabéns. ❤️
@jorgeluizcamposmelo3844 2 ай бұрын
Rodrolfo, vc subiu o código para o github? Não estou conseguindo verificar onde está meu erro. O botão foi colocado na section corretamente, mas ele não aciona, nem dá o hover. Eu queria comparar os códigos... já tô chutando tudo pra cima aqui... kkkkkkk
@canaldevclub 2 ай бұрын
github.com/rodolfomori/fp-project
DevClub | Programação
Рет қаралды 8 М.
Family Games Media
Рет қаралды 29 МЛН
Fernanda Kipper | Dev
Рет қаралды 131 М.
DevClub | Programação
Рет қаралды 60 М.
DevClub | Programação
Рет қаралды 13 М.