Como Criar o Spotify Usando HTML, CSS E JAVASCRIPT do Zero!

Рет қаралды 9,399

Күн бұрын

→ Vou te ajudar com Programação: go.rodolfomori...
→ Coloque seu Site no AR com a Hostgator: bit.ly/dev-clu...
Imagens do Projeto: ibb.co/album/y...
Script do Projeto: drive.google.c...
____________
Quer entender como criar seu próprio aplicativo de música estilo Spotify? Neste vídeo: "Como Criar o Spotify Usando HTML, CSS e JavaScript do Zero!", você aprenderá a construir essa interface passo a passo.
Descubra como usar HTML para estruturar a página, CSS para estilizar a interface e JavaScript para adicionar interatividade. Desde a criação dos componentes principais até a implementação das funcionalidades, esse tutorial tem tudo o que você precisa para começar.
Prepare-se para criar um projeto incrível e dominar as ferramentas essenciais do desenvolvimento web!
____________
Assista a esses vídeos também:
→Crie sua primeira aplicação animada com HTML, CSS e Javascript [Passo a Passo] - • Crie sua primeira apli...
→ Criando API do Zero com Node e Express | Passo a passo - • Criando API do Zero co...
→ Projeto Prático de Programação |Criando uma Tela de Login | HTML + CSS - • Projeto Prático de Pro...
→ Como Criar Sites em HTML e CSS usando o Claude - • Como Criar Sites em HT...
→ Como Fazer Aplicação Animada com HTML, Javascript e CSS [Passo a Passo] - • Como Fazer Aplicação A...
___________
→ Inscreva-se no Canal: bit.ly/3h1xtJ5
→ Loja do canal: loja.devclub.c...
→ DevClub PRO: / @devclubpro
→ Nosso suporte: go.rodolfomori...
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
📸 Insta: @rodolfomorii / rodolfomorii
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!
___________
00:00 - Como Criar o Spotify Usando HTML, CSS E JAVASCRIPT do Zero!

Пікірлер: 91

@canaldevclub 3 ай бұрын

→ Vou te ajudar com Programação: go.rodolfomori.com.br/aprendacomigo

@fernandobarros1911 3 ай бұрын

35:42 - Rock e programação é vida, mano 🙌. Se eu aprendi a tocar bateria, então eu consigo aprender programação também 💪

@canaldevclub 3 ай бұрын

kkkkkk isso ai

@FilmFX_Flashes 13 күн бұрын

tenho 14 anos estou estudando ainda, mas acho seus vídeos de prohetos super legais para colocar no github, e dar uma praticada TMJ🙌🏻!!!

@victorterradev 3 ай бұрын

Projetinho muito bom pra praticar html, css e javascript. O meu deploy eu fiz pelo github pages mesmo... Grato pelos ensinamentos

@AndersonGomes-zs6mg Ай бұрын

Estou em busca de um emprego de programador, seus videos tem me ajudado muito no meu desenvolvimento, grato

@GabrielPortela-fx3uh 3 ай бұрын

O álbum da Liniker e do Racionais são os melhores da lista

@danilobertolucci6734 3 ай бұрын

Debaixo do Explore Podcast, incrementei a previsão do tempo que ensinou em outra aula, ficou top demais

@canaldevclub 3 ай бұрын

Booa

@rayanekelly7066 3 ай бұрын

Valeu Rodolfo, estou aprendendo muito no seu canal, parabéns.

@canaldevclub 3 ай бұрын

Fico feliz em saber! Tmj

@kauazin82 Ай бұрын

Por enquanto nao tenho condições de ser um DevClub mais estou treinando com esses videos maravilhosos

@canaldevclub Ай бұрын

Bora irmão!

@canaldevclub Ай бұрын

Vai ter blackfriday, fica de olho

@paulorogeriocatarin 3 ай бұрын

Hypei o vídeo!!

@Veruscaaf 3 ай бұрын

Ameeeei, não conhecia o Font Awesome, aula sensacional !

@canaldevclub 3 ай бұрын

Ah que legal q gostou

@guizincrazzy7950 3 ай бұрын

conteudo fod4 rodolfo slk parabens

@canaldevclub 3 ай бұрын

Valeu irmão!

@danilobertolucci6734 3 ай бұрын

Estou fazendo o seu curso no KZbin, já sou programador PHP porém sem sucesso, agora busco o javascript e emprego

@eucryt 3 ай бұрын

Hyper de número mil..😁 🎉

@canaldevclub 3 ай бұрын

Boraaaaaa

@Nelson_977 Ай бұрын

Onde ta o código JS das img ?

@iudiiudi9675 3 ай бұрын

to aprendendo a programar

@kauazin82 Ай бұрын

Impressão mkinha ou teve um corte nos minutos entre mais ou menos 56:00 á 57:00 sobre o Main ???

@thomazcomunicacao9523 3 ай бұрын

No minuto 23:28 volta p 21:17. Olha o cuidado do professor para com seus alunos. Parece que foi editado para mostrar uma maneira mais prática de aplicar o estilo né... Obrigado pelo cuidado. Muito obrigado, sempre.

@canaldevclub 3 ай бұрын

Tmjj

@LINUX-y9p 3 ай бұрын

Você é foda irmão.🗿🍷

@canaldevclub 3 ай бұрын

TMJ, bora aprender Programação e mudar de vida!

@gabrielxgamer3010 Ай бұрын

to estudando muito, estou desempregado e meu foco é entrar na área de programação, tô vendo as vídeo aulas do do canal , tô tentando fazer meu próprio projeto, mas tô um pouco perdido, nao sei organizar direito as divs, esperando a black friday do DevClub kkk pra ver se consigo comprar, preciso muito que alguém me guie e mostre a direção, sozinho é muito dificil.

@canaldevclub 17 күн бұрын

TMJ irmão, vamos pra cima. Precisar de algo, me chama no insta!

@yannfernandes4978 3 ай бұрын

Eu estou aprendendo Front-End, mas já estou na reta final.

@viniciuszanetti699 3 ай бұрын

vamo estudar junto man?

@canaldevclub 3 ай бұрын

BOAAAA

@kauazin82 Ай бұрын

Não sei se é por causa que a tela do meu nootbok é pequena, mas nao conseguir botar um encima do outro os artistas encima e os albuns embaixo

@dyndmr 2 ай бұрын

hahahah, eu codando meu Dynify(DYN+Spotify) e pensando, vou bem arrumar umas imagens de rock, quero sertanejo não. Ai vc fala que curte Rock 🥰

@canaldevclub Ай бұрын

kkkkkkk DEMAIS

@CasaBombarecords 3 ай бұрын

Eita top🎉🎉

@diniz_arthurr 2 ай бұрын

Professor, conteudo ta top como sempre!!!! (só uma obs: eu não estou achando o codigo do JS la do começo do Js sabe)

@canaldevclub 2 ай бұрын

Valeu irmao! vou colocar aqui

@kauazin82 Ай бұрын

O meu só ficou os nomes dos albuns e artistas as imagens nao foi pq ?

@RenanCoppola 2 ай бұрын

Ainda não tenho emprego como programador, apenas estudando muito.

@canaldevclub 2 ай бұрын

Bora atrás desse emprego!

@DeadPool1648-c2i 2 ай бұрын

Projeto top estou aprendendo com os projetos do canal, mas não achei o código do JS do inicio na descrição. Ai eu digitei mesmo kkkk

@canaldevclub 2 ай бұрын

Opa, vou pedir pra minha equipe colocar!

@JoãoLucas-q8h6h 3 ай бұрын

Olá, bom dia, esqueceu de colocar o link das imagens na descrição

@canaldevclub 3 ай бұрын

Está na descrição

@guizincrazzy7950 3 ай бұрын

top dms

@wallaceleonne 3 ай бұрын

Faz vídeo de como funciona css no SAP ui5

@canaldevclub 3 ай бұрын

SAP eu nunca mexi, vou dar uma olhada!

@paulorogeriocatarin 3 ай бұрын

Fala Rodolfo blz... Acompanho seus conteúdos direto, inclusive fiz uma landing page para uma amiga, e usei muito das orientações dos seus vídeos, gostaria que você visse e me desse sua opinião... Ps: Tem um momento no vídeo que você fala criar uma variável, mas const é constante não é? Obrigado

@canaldevclub 3 ай бұрын

Então. Mas const é uma variável rsrs... const, let e var são tipos de variáveis no javascript

@eotrem6509 2 ай бұрын

onde está o código de javascript do 36:38 ? não achei

@canaldevclub Ай бұрын

Coloquei

@roberto.santos7 3 ай бұрын

Faz a loja do flamengo pra gente professor🙏

@canaldevclub 3 ай бұрын

kkkkkk ai não

@renanglrt7 3 ай бұрын

Rodolfo, Parabéns pelo vídeo. Poderia colocar as imagens e se possível o código ?

@EduardoGarcia-uj9xy 3 ай бұрын

document.addEventListener('DOMContentLoaded', () => { const artistsData = [ { name: 'Henrique & Juliano', image: './img/artista-henrique-juliano.jpg' }, { name: 'Jorge & Mateus', image: './img/artista-jorge-mateus.jpg' }, { name: 'Zé Neto & Cristiano', image: './img/artista-ze-neto.jpg' }, { name: 'Gustavo Lima', image: './img/artista-gustavo-limma.jpg' }, { name: 'Luan Santana', image: './img/artista-luan-santana.jpg' }, { name: 'Matheus & Kauan', image: './img/artista-mateus-kauan.jpg' } ]; const albumData = [ { name: 'white Noise (Sleep & Relaxation Sounds)', artist: 'Sleepy John', image: './img/album-white-noise.jpeg' }, { name: 'O Céu Explica tudo (Ao Vivo)', artist: 'Henrique & Juliano', image: './img/album-ceu-explica.jpeg' }, { name: 'Nada como um dia após o outro', artist: 'Racionais', image: './img/album-vida-loka.jpeg' }, { name: 'HIT ME HARD AND SOFT', artist: 'Billie Eilish', image: './img/album-hit-me.jpeg' }, { name: 'CAJU', artist: 'Liniker', image: './img/album-caju.jpeg' }, { name: 'Escâdalo Intimo', artist: 'Luísa Sonza', image: './img/album-escandalo.jpeg' } ]; const artistGrid = document.querySelector('.artists-grid') const albumsGrid = document.querySelector('.albums-grid') artistsData.forEach(artist => { const artistCard = document.createElement('div') artistCard.classList.add('artist-card') artistCard.innerHTML = ` ${artist.name} artista ` artistGrid.appendChild(artistCard) }) })

@canaldevclub 3 ай бұрын

Está na descrição

@Cipriano123Hacker-vm5sp 3 ай бұрын

Rodolfo boa noite sou novo aqui nao encontrei o link das imagens nem o link do codigo do javascript ?

@canaldevclub 3 ай бұрын

Está na descrição man...tmj

@EvilEmperorBR 3 ай бұрын

ensina a fazer uma landing page sobre qualquer coisa? e como colocar slides e comentarios nela.

@canaldevclub 3 ай бұрын

Anotado!

@tigrehard2023 3 ай бұрын

Rodolfo não achei o link do codigo JS

@canaldevclub 3 ай бұрын

Não tem..Eu não coloco, pra vcs terem q digitar, é assim que aprende kkkk

@leandropagano8269 Ай бұрын

Estou muito triste comigo, quanto mais assisto e tento fazer às aulas menos eu entendo e assimilo. não quero apenas copiar, quero compreender todas as linhas,mas nao estou conseguindo. hoje desisto, infelizmente! 😥

@canaldevclub Ай бұрын

É igual aprender um idioma novo. Passo a passo, dia a dia...Sempre melhorando um pouco! Tenha paciencia que o resultado vai vir!