Тёмный

Slide estilo Stories com HTML, CSS e JavaScript do zero. 

Origamid
Подписаться 59 тыс.
Просмотров 27 тыс.
50% 1

Arquivos da aula:
github.com/origamid/slide-sto...
Aprenda a criar um slide do tipo stories do zero.
Quer aprender HTML, CSS e JavaScript do zero?
www.origamid.com/

Опубликовано:

 

5 авг 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 94   
@kaiofelipejs
@kaiofelipejs 3 года назад
Meta é estudar muito pra conseguir fazer algo tão massa assim em 30 minutos igual o André. Bom demais!!!
@brnheavymetal
@brnheavymetal 3 года назад
O vídeo é ótimo e o André manja muito, mas dica, tenta não se cobrar pra fazer algo assim em pouco tempo quando ele e outros canais fazem, isso é uma dica que já vi outros canais fazendo pq normalmente fazem o projeto bem pensado em mais tempo antes de gravar
@Rafael-ht9xo
@Rafael-ht9xo 3 года назад
@@brnheavymetal Realmente. O André é foda tanto na programação quanto design. Mas ele não fez isso em 30min de primeira mesmo. A maioria dos tutoriais levam tempo para serem feitos, primeiro os projetos são feitos, depois o desenvolvedor só deixa o código dele pronto em uma tela e só vai replicando na outra, por isso quase não existe erros na hora que eles estão codando para gravação. Pq mesmo um projetinho desse talvez demorasse mais de 1 hora pra fazer, tanto na organização e refatoração do código e os bugs que vão aparecendo na meio do caminho
@pirilampoVermelho
@pirilampoVermelho 2 месяца назад
Você ensina maravilhosamente, mas não vou falar que foi fácil, porque apesar do vídeo ter 31min, eu to a 2 dias pelejando porque to adaptando isso para uma outra situação, felizmente deu certo. Eu ainda não tenho capacidade de entender extamente o que fiz, então minha manutenção nesse código vai ficar limitada. mas estou realmente feliz de ter conseguido reproduzir no meu contexto e espero que em mais alguns meses eu consiga chegar pelo menos perto de você. MUITO OBRIGADO!
@williamdavid6256
@williamdavid6256 3 года назад
Show! Muito massa que o canal ensina fazer as coisas sem o uso de bibliotecas, isso ajuda muito o dev à se desenvolver como profissional.
@Elisha_Barros
@Elisha_Barros 9 месяцев назад
Comprei o curso da Origamid e foi o melhor curso que eu ja comprei , gratidão
@marcosdelvalle3655
@marcosdelvalle3655 3 года назад
Depois dessa percebi que preciso estudar mais e colocar mais em prática tudo o que eu aprendo nos seus cursos!!
@jeffersonm.5
@jeffersonm.5 Год назад
Muito bom amigo, merece um premio por deixar os arquivos para estudarmos. Obrigado
@dolfera1962
@dolfera1962 2 года назад
Esse vídeo foi um dos mais sensacionais que já vi. Realmente é um conteúdo diferenciado, tudo feito na unha e com uma didática incrível. Parabéns!!!
@vitorcosta5402
@vitorcosta5402 3 года назад
Conteúdo absurdo, MUUUTO profissional. Parabéns msm!!!!!
@felipebatista7469
@felipebatista7469 3 года назад
esse cara é sinistro demais!! OBG professor!
@CaiqueMoraes93
@CaiqueMoraes93 3 года назад
Genial! Eu te amo André!
@AsaDeltaComunicacoes
@AsaDeltaComunicacoes 3 года назад
Muito legal. Parabéns pelo trabalho desenvolvido e obrigado por compartilhar conosco.
@ronaldobezerra6703
@ronaldobezerra6703 2 года назад
Esse cara é fera. Show!
@saulotarsobc
@saulotarsobc 3 года назад
Cara... Isso que tava procurando. Muito obrigado. Nota 10
@robsonrdsaraiva
@robsonrdsaraiva 3 года назад
Aula sensacional! Parabéns pelo conteúdo incrível.
@carloseduardo8547
@carloseduardo8547 3 года назад
Muito bom! Parabéns.
@estevaolibardi
@estevaolibardi 2 года назад
Obrigado André!
@luizalmeida4884
@luizalmeida4884 3 года назад
Muito legal! Esse canal é ótimo a didática é de fácil entendimento e o conteúdo sempre é interessante. Obrigado por compartilhar conhecimento com a gente!
@matheusalves1848
@matheusalves1848 7 месяцев назад
Cara, que vídeo! Virei seu fã! Muito obrigado!
@asamadoasa6517
@asamadoasa6517 3 года назад
Esse cara é muito bom!!! obrigado por compartilhar seus conhecimentos! abs
@robertofeitosa1141
@robertofeitosa1141 2 года назад
que cara foda, ótima aula
3 года назад
Tuas coisas são sempre muito bem feitas, muito lindinhas
@RemoteJuniorJobs
@RemoteJuniorJobs Год назад
Este conteúdo é puro ouro! 🏅 Super interessante o uso de Class para a criação da animação em JS e ainda o uso de Flex e Grid no CSS. Irei assistir a playlist de JS a seguir 🏃‍♀️
@victorgd
@victorgd 3 года назад
André, você poderia fazer um vídeo falando sobre suas configurações do Visual Studio Code? Como fonte, ícones e tema.
@AlexsanderGabriel369
@AlexsanderGabriel369 3 года назад
Estudar muito pra um dia ser tão profissional assim, incrível.
@dariocosta8419
@dariocosta8419 Год назад
o cara é um gênio
@battlefield4707
@battlefield4707 Год назад
Meu Deus, que vídeo bom na terra, amém. Muito obrigado pelo conteúdo, Mano
@netomoraes3931
@netomoraes3931 3 года назад
Incrível!
@antonioedinadson
@antonioedinadson 2 года назад
Esse cara é muito fera.
@LucroaLucro
@LucroaLucro Год назад
Tu é o cara muito obrigado ajudou bastante eu precisava implantar isso em um sistema meu com banco de dados deu certinho. Parabéns.
3 года назад
Essa aula me salvou, eu estava precisando de um tipo de slide desses para apresentar meus trabalhos...
@bl1tz_x
@bl1tz_x 2 года назад
Carai, tava procurando justamente isso e ainda encontrei logo do André 🤤🤩
3 года назад
Uma Girafa embaixo da outra! Valeu, André. Melhores vídeos de programação do youtube
@hugoalmeida883
@hugoalmeida883 Год назад
Adorei esta aula, fiquei fascinado com o que conseguimos criar! E pareceu muito fácil 😂
@pelosmeusolhos938
@pelosmeusolhos938 3 года назад
Muito bom! Parabens
@alexalannunes
@alexalannunes 3 года назад
muito showwwww Parabens viu!
@marcoscruz1845
@marcoscruz1845 3 года назад
Cara Muito bom Muito bom mesmo!
@tonysjc
@tonysjc 3 года назад
Genial, parabéns
@Sharmeiro
@Sharmeiro 3 года назад
Show de bola
@daSilvaPlay
@daSilvaPlay 3 года назад
Conhecimentos incríveis
@dionismarquesvalada8839
@dionismarquesvalada8839 3 года назад
Muito bonito e bem explicado. Parece um slide de aplicativo.
@rayanmarcus
@rayanmarcus 3 года назад
Demais, André! Esculacha no CSS e no JS!
@williamfrazao5690
@williamfrazao5690 3 года назад
maravilhoso!!!!
@RenatoSilva-vb8kq
@RenatoSilva-vb8kq 3 года назад
Brabo dms!!!
@matheussalesq
@matheussalesq 3 года назад
👏🏼👏🏼👏🏼
@pfd1925
@pfd1925 2 года назад
👏👏👏
@diogosouza9380
@diogosouza9380 3 года назад
TOP
@patrickgroot4497
@patrickgroot4497 2 года назад
Thanks for this tutorial! Would be nice to include a pause/freeze carousel option on hover and continue on mouseleave.
@luanscar6371
@luanscar6371 3 года назад
Que legalllll
@diemecomperdefante5473
@diemecomperdefante5473 3 года назад
perfeito
@lobandev3388
@lobandev3388 3 года назад
Sou aluno do curso, e recomendo 100%, o André é muito fera, legal seria se tivesse um grupo com os alunos, pra gente compartilhar conhecimento.. haha!
@DanielTolentino42
@DanielTolentino42 3 года назад
Grupo do discord ia ser massa
@juniiormendes937
@juniiormendes937 3 года назад
Só criar galera
@Klenodev
@Klenodev 2 года назад
E ai, depois de um ano desse comentário, como estão os seus conhecimentos? Ainda estuda?
@vagnerferreira5012
@vagnerferreira5012 3 года назад
Caralho ficou top!
@omidghadiri5431
@omidghadiri5431 Год назад
Thanx , i Like very much
@ElpidioNLimaJunior
@ElpidioNLimaJunior 7 месяцев назад
Parabéns pelo video!! Teria como definir um time da animação de forma dinâmica? Exemplo. Se eu colocar um video e pegar o .duration dele e definir a duração da animação e do timeout. É possível mandar um exemplo assim ? Mais uma vez, parabéns!!
@charlesmontilla
@charlesmontilla 3 года назад
Puta que pariu, coisa linda de ver!
@bernardostogmuller2256
@bernardostogmuller2256 3 года назад
Ainda nem vi, mas sei que é um conteúdo excelente, sou fã do canal! Obrigado pelo conteúdo gratuito. Um dia espero poder pagar os cursos para ter acesso a todos os cursos.
@luispaulocavalcante1459
@luispaulocavalcante1459 3 года назад
Tá rolando a promoção mano
@bernardostogmuller2256
@bernardostogmuller2256 3 года назад
@@luispaulocavalcante1459 tô ligado, to tentando ver se consigo pegar antes de acabar a promo.
@thiagorussi4401
@thiagorussi4401 3 года назад
muito show ! queria saber como faz tbm a animação de arrastar pro lado os stories, quando você puxa e solta o mouse ele vem andando
@rayanmarcus
@rayanmarcus 3 года назад
Acho que isso é usando alguma coisa relacionado a "touch" no CSS ou no JS
@JoaoNeto-rh6lx
@JoaoNeto-rh6lx 3 года назад
André. Parabéns pelo trabalho, ficou show o slide! Tenho uma dúvida. Estou criando várias matérias para o meu blog usando o WordPress. Praticamente quase todas as matérias vão ter galerias de fotos. Cada post vou ter que alterar o HTML e adicionar um novo class? Ex.: HTML: data-slide="slide" - HTML: data-slide="slide01" - JS: new SlideStories('slide'); - new SlideStories('slide01'); ... como faço para deixar o slide universal, adicionar várias galerias sem ter que ficar mudando o nome?
@alexsirbu5911
@alexsirbu5911 2 года назад
Oi, como faço para adicionar vídeos em vez de imagens? Obrigado pelo vídeo, foi muito útil
@iranymoledo
@iranymoledo 3 года назад
como faz para quando segurar com o dedo parar de correr o tempo ?
@ricardocruz6350
@ricardocruz6350 3 года назад
Professor, sou aluno do Origamid. Existe um manual com esse tópicos no Html, CSS e Java Script, tipo (Atrubuto, body, head e outros) para se memorizado?
@dariocosta8419
@dariocosta8419 Год назад
na raça, sem plugins
@robsonsilva561
@robsonsilva561 3 года назад
Qual editor de código e tema você está utilizando?
@Origamid
@Origamid 3 года назад
VS Code, com meu tema. Se chama Origamid Next
@lglf77
@lglf77 3 года назад
Irmão. Tava pensando em você hoje. Fui e pesquisei seu nome de canal no you tube. Será que você poderia me atender em algo sobre RN e React.Js? To na dúvida aou até bonzinho no front end dos dois. Mais tenho falhas em concentrar código em consumo de crud e bancos. n9 Javascript desses frameworks acima. Como ta o preço dos teus cursos?
@Maves_
@Maves_ 2 года назад
Como colocar no lugar da imagem , um vídeo ?
@djvavs5760
@djvavs5760 3 года назад
como eu faço para colocar videos no lugar das imagens ?
@Lenioth
@Lenioth Год назад
to tentado fazer que quando o mouse ou se for no mobile fique em cima da imagem ele pause a transição, mas nao encontrei nada na internet
@pixsupershoes200
@pixsupershoes200 3 года назад
deu certo olhe de novo
@AlanSilva-cm8wc
@AlanSilva-cm8wc 3 года назад
Quero ser seu melhor amigo kkkkkkkkk
@luisasoriano8174
@luisasoriano8174 3 года назад
E se eu tiver uma div somente com um elemento dentro dela? 15:52
@painjoker4889
@painjoker4889 3 года назад
essa aula tem no curso ?
@JonnathanNascimento
@JonnathanNascimento 3 года назад
E num já tá aqui?
@painjoker4889
@painjoker4889 3 года назад
@@JonnathanNascimento ?????
@marisousa2272
@marisousa2272 2 года назад
Como eu faço para ter vários slides desse? Tipo, quando clica em um perfil aparece as fotos daquele perfil, se clicar em outros, as fotos do outros perfil? Tipo no Instagram mesmo. Alguém poderia me ajudar, pfvr?
@ksecbr3496
@ksecbr3496 3 года назад
Isso é ensinado no curso?
@WesleyGameplayOficial
@WesleyGameplayOficial 2 года назад
Sera que alguem pode me ajuda, tentei fazer o projeto e aparece os seguintes erro para mim: Slide-stories.js:9 Uncaught ReferenceError: active_Slide is not defined at Slide-stories.js:9 (anonymous) @ Slide-stories.js:9 slide-stories.js:1 Uncaught SyntaxError: Identifier 'slideStories' has already been declared
@wmarketing9660
@wmarketing9660 3 года назад
Vale a pena fazer o curso html CSS e JS dele ?
@christopherfelix7322
@christopherfelix7322 3 года назад
Muito!
@l.lawliet4268
@l.lawliet4268 3 года назад
Demais
@pixsupershoes200
@pixsupershoes200 3 года назад
o meu não esta funcionando esta aparecendo null no console do navegador
@duelgd
@duelgd 2 года назад
bot excluiu meu comentario ;-;, mas 12:20, o meu da erro sempre q coloco o this.init();, alguem sabe como resolver? imagem do erro: * prnt (ponto) sc / 1v 6v z 0l (só remover os espaços e trocar o ponto)* erro: slide.js:25 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at slideStories.addNavigation (slide.js:25) at slideStories.init (slide.js:30) at new slideStories (slide.js:7) at slide.js:40
@monarca2846
@monarca2846 2 года назад
Alguem conhece um projeto parecido, onde eu consiga adaptar para classificar imagens? A ideia seria marcar as que interessam e depois poder listar a seleção.
@mayerwag
@mayerwag 3 года назад
André para presidente
@domingosmanhique3547
@domingosmanhique3547 2 года назад
tenho um erro na linha onde vem: this.items = this.slide.querySelectorAll('.slide-items > *'); diz *Uncaught Type Error cannot read properities of null (readend 'querySelectorAll')* e deve ser por isso que nao consigo ver nada quando ponho opacity o para todos... nem se quer mostra o ativo.. peço uma soluçao!!
@pfd1925
@pfd1925 2 года назад
Estava com o mesmo erro, conferindo aqui percebi que estava usando as aspas erradas na primeira linha do constructor, ela deve ficar assim: this.slide = document.querySelector(`[data-slide="${id}"]`); com esses acentos graves no lugar das aspas, tenta ai
Далее
Menu Mobile - HTML, CSS e JavaScript
33:13
Просмотров 176 тыс.
Background images with HTML & CSS
20:19
Просмотров 343 тыс.
I Built 7 EXTREME Rooms in My House!
1:22:07
Просмотров 8 млн
Creating an SPA Router in Vanilla JS
3:42
Просмотров 69 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
Como fazer um SLIDESHOW com HTML e CSS | Higor Feijó
38:18
Aprenda a fazer um slider carousel [ HTML & CSS ]
9:02
⭐ Minicurso Animações CSS
53:01
Просмотров 127 тыс.
Origamid 10 Anos - História
1:39:28
Просмотров 20 тыс.
SLIDE DE IMAGENS COM HTML CSS E JAVASCRIPT!
27:26
Просмотров 29 тыс.
I Built 7 EXTREME Rooms in My House!
1:22:07
Просмотров 8 млн