Curso Básico de JavaScript - Primeiro Projeto Web - Aula 1

fala impressionador então você tá num dilema por um lado você quer pratica programação porque é uma parada maneira quanto mais você praticar mais coisas legais você vai conseguir fazer se falar que é uma área aquecida né então pô daqui a pouco você consegue aquele emprego legal Aquele emprego que paga bem bacana né perspectiva boa por outro lado você queria dar uma relaxada escutar sua musiquinha só ficar de boa Ligar teu Spotify assim e só curtir como é que você concilia esses dois eu tenho uma ideia Por que que você não faz o seu próprio player

de música saca só eu fiz aqui o meu player de música igual do Spotify maneiro não é deixa eu te mostrar aqui legal né aí aqui você avança a música você volta você faz tudo que o player faz né bacana curtiu é isso que a gente vai fazer nessa série de vídeo semanal que começa hoje eu vou te ensinar a fazer um Player igual a esse que um Player igual do Spotify do zero mesmo que você não saiba nada beleza Bacana Então deixa o seu like aqui Para sinalizar que você curtiu o projeto que você

vai aqui vai aqui para gramar comigo o seu player de música se inscreve no canal para você não perder nenhum vídeo dessa série que tá maneiríssima E vamos [Música] lá beleza primeiro de tudo deixa eu comentar com vocês que todo esse projeto vai ser feito no visual Studio code então se você não tem ele instalado ou não sabe exatamente o que que é ou tem alguma dúvida em relação a isso dá uma olhada no vídeo que tá linkado aqui na descrição no qual eu ensino justamente como instalar o visual Studio code e como preparar ele

para você poder fazer esses projetos assim de uma forma bem gostosinha Tá bom então vamos lá primeiro de tudo a gente começa aqui com essa opção Open folder a gente vai abrir pasta que que a gente vai fazer aqui você vai abrir aqui a você vai escolher o lugar no computador que sei lá fizer mais sentido para você eu escolhi aqui mesmo eu vou botar aqui nova pasta eu vou botar aqui tocador música tocador de música Pode ser o nome que você quiser Sei lá o nome do seu projeto seu projeto pode ser Spotify por

exemplo vou clicar aqui no sim beleza bacana tá tudo certinho aí agora Olha você tá com o Spotify aberto e ele tá usando como base a pasta que você escolheu aqui ó tocador música e o que que significa isso significa que bom a gente vai fazer a gente vai criar novos arquivos a partir aqui do visual Studio code todos esses arquivos vão estar lá nessa pasta que você selecionou como a pasta base do seu projeto sacou é at uma boa forma de você se localizar assim no seu computador só para você saber então tá bom

isso aqui é um projeto web e quando eu falar de projeto web pensa em site pensa em em Sistemas que rodam na internet sabe site tipo sei lá o Netflix o Spotify por exemplo e quando a gente fala de projeto web eu não tenho como não pensar nas três principais tecnologias desses sistemas web que são HTML CSS e JavaScript tá Daniel o que que é isso mesmo que eu não lembro me dá uma refrescada aí HTML CSS JavaScript é o seguinte ah pensa no corpo humano o corpo humano tal qual no corpo humano Você tem

uma estrutura certo certo que no corpo humano é feita por músculos e ossos certo então no nas páginas nos sites de Internet isso aí é o HTML o HTML define a estrutura da página o corpo humano tem a sua aparência também né repara eu tenho cabelo escuro eu tenho aqui puts bom tenho meu nariz temho aqui meu bigode minha barba certo eu tenho aqui as minhas características a minha aparência da mesma forma um site tem a sua aparência que é definida no CSS e por sua vez bom voltando aqui ao corpo humano eu tô falando

com vocês eu tô gesticulando aqui eu estou desempenhando várias ações o site também pode desempenhar ações o site pode ser dinâmico e Quem é o responsável por deixar o site dinâmico é o JavaScript então o JavaScript é a inteligência do site Então esse é o papel de cada um deles e aí se a gente sabe que esse é o papel de cada um deles concorda comigo que faz muito sentido a gente começar por onde pelo HTML porque a gente vai começar definindo a estrutura da nossa página então eu vou vir aqui E aí aqui nessa

barra lateral eu vou clicar com o botão aqui com o botão esquerdo aqui nessa opção aqui New file novo arquivo e vou clicar aqui vou escrever index pon HTML Lembrando que index P HTML index é um nome padrão assim pra sua primeira página de html sabe pra página base ali do seu projeto index.html.gz bacana enter nesse momento você deve estar se perguntando po Daniel eu até sei sei lá até por exemplo sei que JavaScript é uma linguagem de programação mas HTML também é como é que é isso assim os dois são linguagens de programação é

a mesma coisa são coisas diferentes essa é uma pergunta válida HTML é uma linguagem mas não é de programação é o que a gente chama de uma markup language que é uma linguagem de descrição é uma linguagem que vai descrever Justamente a relação entre elementos vai falar olha isso vem aqui isso aqui vem depois esse aqui é conteúdo desse sacou E aí faz todo o sentido se você pensar aqui ah é isso que vai guiar a minha estrutura que é exatamente isso ele vai dizer ah isso aqui tá em cima isso aqui tá embaixo isso

aqui vem antes desse isso aqui vem depois desse ele vai realmente montar a estrutura da página e aí como é que você começa a escrever esse HTML olha por sorte o visual Studio code Já preparou isso pra gente deixou muito muito facinho repara só eu vou clicar aqui apertar exclamação apertar enter e olha ele já me gerou um código e o que que é esse código Esse é o código base para pros HTML que você vai escrever então ao invés de eu precisar escrever isso aí toda vez que eu for fazer uma um ponto HTML

novo eu vou simplesmente apertar exclamação enter e voa lá o visual Studio code resolveu para mim legal né bacana E aí você talvez seja olhando assim beleza tem um tem vários vários negocinhos que são menor que maior que esse abre e fecha essas chaves assim o que que é isso esse é a tag e tag é um é o elemento do HTML então HTML é todo escrito em tags então repara por isso que aqui a gente tem tag aqui nisso tudo aí Ah tá mas eu tô vendo tags diferentes é porque existem várias delas e

aí a gente vai passar isso aqui vocês vão aprendendo aos poucos né Vocês vão aprendendo na medida em que a gente for fazendo mas deixa eu já adiantar uma coisa de início ele escreveu várias coisas aqui nessa aqui ó R ele escreveu essas várias coisas aqui isso aqui você pode tratar como a informação pro navegador porque o navegador que vai abrir a sua página de internet né ele vai ler isso aí para se Guar e falar ah não beleza Tá então já sei como eu vou montar minha página de internet então o que a gente

vai escrever vai tá na maior parte do tempo aqui dentro desse B aqui do meio Porque ele é o que é responsável por definir o que que vai aparecer na sua página na página que você tá fazendo então deixa eu te te mostrar isso aqui te dando mais um exemplo de tag a tag H1 escrevi a tag H1 aí abri a chave fechei chave escrevi H1 E aí você vai reparar que eu abri chave fechei chave escrevi H1 na mesma hora o visual estudo esperto do jeito que ele é já botou uma outra H1 aqui

com uma barra puts o que que é essa H1 com uma barra como é que é isso aí o que que é isso muito comum pras tags ter aparecerem em pares uma tag que a gente chama de tag de abertura e a outra tag tag de fechamento abertura e fechamento do que Daniel Isso aqui é uma tag eu falei para você da tag H1 mas ainda não te falei o que que é né Isso aqui é uma tag que é boa para escrever título título título de página sabe você vai botar aquele título Zão assim

antes do seu texto aquele título expressivo Então você usa tag H1 E aí por que abertura e fechamento porque meu título fica aqui beleza eu botei isso aqui esse aqui é o meu título de fato ou sei lá eu podia botar um título de Fato né eu podia botar aqui por exemplo player de música do Daniel ou melhor ainda vai melhor ainda player de música hash então assim botei isso aqui e aí a tag de abertura H1 e a tag de encerramento H1 é o que vai definir assim olha o que tá Dent entre essas

duas é o que de fato é o conteúdo é o que de fato é o título que você tá querendo mostrar com essa tag H1 então repara só eu vou salvar e aí antes de eu salvar deixa eu mostrar uma coisa tá vendo essa bolinha branca aqui essa bolinha branca que tá aparecendo aqui no visual sh code isso aqui é o visual sh code sinalizando para mim o seguinte ó tem a alteração nesse arquivo aqui que não tá salva E aí no momento que eu salvar aqui eu vou apertar control S que é o atalho

para salvar Já resolveu ali só um macetinho aí porque é uma coisa boa assim isso aí é visual Studio code te dando bons indicativos É sempre bom isso aí eu vou clicar aqui com o botão direito no index P HTML e vou escolher essa opçãoincorreta super bacana que a gente vai usar aqui durante o projeto porque ela vai ajudar a gente a visualizar o nosso projeto em construção então vamos lá Open with Live server eu cliquei aqui e aí repara player de musica hashtag que é exatamente o título que eu tinha colocado Vou botar aqui

do lado porque aí a gente consegue fazer os dois ao mesmo tempo aumentar assim e aí eu vou até fazer um negócio aqui aumentar a fonte aqui aí eu mostrei PR vocês uma tag H1 Tá mas e é você falou de tags assim eu tô vendo que tem algumas tags diferentes aqui quantas tags tem eu vou ten que saber saber todas as tags Daniel como é que é isso Olha na verdade tem muitas tags e não você não precisa saber todas elas a gente provavelmente com o uso vai sempre vai sempre internalizar as mais importantes

mas aí você tem sempre um Google você tem sempre alguma coisa assim Putz eu quero botar uma conteúdo aqui mas eu não sei que tag usar Você joga ali no Google rapidinho e você vai descobrir isso é muito fácil isso é muito comum mas eu vou te apresentar aqui várias várias hashtags que são muito comuns de você usar no dia a dia então pode ficar tranquilo com isso aliás falando de apresentar novas tags eu disse que H1 era uma tag de título mas H1 por exemplo não é a única tag de título H1 é uma

das tags mas ela pode ir até h6 E aí qual é a diferença delas eu vou mostrar para vocês saca só CRL C eu vou copiar essa linha seis vezes e por que seis vezes porque eu vou fazer de H1 até h6 E aí vamos botar aqui H2 H3 H4 h5 h6 E aí ó mudei na tag de abertura eu tenho que mudar na tag de fechamento porque eu tô sinalizando aqui pro meu navegador as tags tem essas tags tem que acontecer em pares para eu poder sinalizar direito pro meu navegador onde começa o H4

por exemplo e onde termina o H4 que termina aqui então H3 H2 aí aqui eu vou botar aqui só para diferenciar o texto só para você ver aqui exatamente o que tá acontecendo Ah era para escrever segundo segundo Player terceiro aí vou botar aqui quarto quinto e sexto salvei aqui olha só o que aconteceu apareceram aqui todos esses títulos que eu tô escrevendo repara título texto aqui com texto em aqui beleza expressivo só que a fonte foi diminuindo de tamanho reparou então se eu tenho eu tenho tags diferentes para fazer título e cada uma delas

tem a sua particularidade viu bacana não é aí beleza nesse momento eu vou mostrar para vocês um negócio aqui que é uma estratégia que é muito comum e muito boa para você fazer esse tipo de projeto que é o seguinte eu disse para vocês eu mostrei para vocês que eu fiz um tocador de música Um Player é igual do Spotify certo durante todo esse processo Eu tava olhando o player do Spotify eu tava ali com o meu celular na mão e tava olhando para ver como é que ele era para saber puts tá faltando ou

não eu tenho que colocar isso aqui aqui ah não isso aqui vai aqui então o que que eu fiz eu peguei e tirei um print e coloquei aqui já deixei aqui um print preparado do player do Spotify pra gente PR que a gente possa simplesmente olhar e usar como referência aqui sacou então eu vou ficar olhando para essa imagem ao longo desse projeto para vou saber ah não pera tá faltando esse botão aqui do Coração aqui que é o botão do like Então aproveita e já deixa o like aqui o botão aqui do like por

exemplo eu tenho vou olhar para Ah não beleza tá faltando ele aqui deixa eu colocar o botão aqui do repetir a música Tá faltando deixa eu colocar sacou eu vou ficar olhando isso aqui essa vai ser a minha referência do meu projeto então agora deixa eu fazer o seguinte Primeiro de tudo eu vou modificar essas tags aqui porque eu quero mostrar uma outra tag para você eu quero mostrar uma outra tag para vocês a tag P E P O que que significa p p é uma tag de texto corrido tá mas por que P tem

de parágrafo paragraph aí eu vou botar aqui a tag p e eu vou botar tag P assim bastante porque P eu não vou escrever seis títulos na minha página assim seguidos né nem faz tanto sentido poderia ir até sei lá você quer fazer sua página assim a página é sua você faz do jeito que você quiser mas aqui eu vou botar P Beleza eu vou botar p e daqui a pouco eu vou até mudar esse conteúdo dessas tags aqui mas uma coisa de cada vez aí botei aqui a tag P repara só vou salvar e

aí deixa eu diminuir Deixa eu tirar esse print aqui para você ver salvei E aí olha só virou texto normal virou aquele texto que eu tô chamando assim de um texto que não é texto de título sabe não tá em não tá aquela coisa assim mais gritante que é o texto que você coloca que é geralmente como você coloca um título certo e aí agora eu tava dando uma estratégia aqui pra gente seguir ao longo do projeto eu tenho uma outra uma boa dica na verdade se eu disse para vocês que a tag Define um

elemento no HTML e aí o elemento da HTML os elementos de html são os que compõem a página eu vou fazer o seguinte e essa aqui é a minha referência eu vou olhar para essa minha referência eu vou ver mais ou menos Quantos elementos eu consigo contar eu vou usar isso como base e aí eu vou assumir ah sei lá se eu consiguir contar 20 elementos aqui eu vou colocar de início 20 tags aqui no meu Body porque eu vou assumir que ah para cada tag tem um elemento então parece fazer sentido começar desse ponto

Putz tá Daniel Mas e se eu esquecer e se eu contar a menos e se eu contar errado não tem nenhum problema você pode simplesmente vir no seu HTML depois e ajustar é muito fácil aliás gigas passagem a gente vai ajustar HTML bastante ao longo desse processo é só um pontapé é só um ponto de partida pra gente então repara só aqui voltando aqui ao nosso print de referência eu tenho nome da playlist eu tenho capa do disco eu tenho nome da nome da música nome da banda botão de like barra de progresso da música

botão de embaralhar a Playlist voltar música pausar ou dar play avançar música e repetir essa continha aqui dá 11 elementos isso aqui tem 11 elementos aqui nesse Print então eu vou colocar 11 tags ali de começo para mim aí aproveito e já mostro uma tag aqui que eu acho que vai ser interessante porque ela é uma tag bem Coringa bem genérica e que muitas vezes ela Supra o papel assim de outras tags que é a tag na verdade mais frequente que você vai encontrar é a div saca só eu vou botar aqui div aí você

talvez esteja se perguntando Putz nerro T genérica eu vou botar aqui ó ã sétimo elemento e vou salvar aqui por exemplo sétimo elemento por quê Porque eu já tinha seis tags aqui né sétimo elemento salvei repara também apareceu texto aqui então a div Pode mostrar texto Putz Então por que que eu só não uso div essa é uma boa pergunta e eu tenho uma resposta interessante que é a seguinte vamos lá eu vou mostrar um negócio aqui para vocês saca só vamos para isso botar aqui esse vai ser oitavo 99º 10º e 11º né Então

vou botar aqui sou meio preguiçoso Então vou botar ã aqui 11 vou botar um número ao invés de escrever o nome 10 9 8 séo elemento vamos supor que isso aqui é o seu código e aí você escreveu esse código falou Pô maneiro escrevi meu primeiro HTML aí resolve você dar aquela aquelas férias dos seus estudos você vai parar um mês e vai só assistir novela não vai nem tocar no computador tourou ali assistiu para caraca a novela aí agora depois de um mês novela já acabou você voltou assim pro seu computador Beleza agora tá

na hora de voltar lá pro meu tocador de música a você se senta aqui olha pro seu código ml e você vê div div div div e você já nem lembra mais eu PR que que eu botei essa div aí cara eu nem lembro a div ela não é tão Clara justamente por ser mais genérica ela muitas vezes não é tão Clara quanto por exemplo a tag de título aqui H1 se eu olho para uma tag de título H1 daqui é um mês mesmo depois da temporada das novelas eu vou bater aí o olho nesse

H1 e vou pensar Ah não eu botei o H1 porque eu queria botar um título aqui usar tags específicas deixa muito mais claro para você qual é a finalidade que você tá buscando ali pro seu código sacou aliás di esse passagem Se você olhar aqui a imagem de referência isso aqui até um título né é o título da playlist mas ele tá com uma letra bem menor do que essa aqui né E aí como eu Já ensinei para vocês talvez H1 não seja o mais apropriado eu vou colocar aqui então um h5 no h5 acho

que h5 é pequeno o suficiente para ficar ali na medida e aí eu botei ess essa tag aqui h5 como a tag aqui tag aqui do título parece apropriada saca só olha a nossa imagem aqui parece Tá mais ou menos do mesmo tamanho aqui isso aqui e o nosso print sei lá se você achar muito pequeno achou que h5 ficou pequeno demais você pode por exemplo botar um H4 fica vontade o a página que você tá fazendo o play de música que você tá fazendo é seu não é aí botei aqui H4 por exemplo só

que eu disse que eu botei 11 elementos eu botei 11 elementos porque eu tinha contado 11 elementos aqui no nosso print de referência mas eu vou além aqui eu vou fazer o seguinte aqui era o título da playlist né para isso que a gente botou esse H4 certo porque aqui ó título da playlist aqui no nosso print referência é o caminho diário eu vou trocar aqui e vou botar título da playlist e vou botar fazer o seguinte playlist hashtag Esse vai ser o título da minha playlist aí agora nessas outras tags de texto O que

que eu vou fazer eu vou escrever eu vou escrever Qual é o nome do elemento que eu espero que apareça ali por quê Porque eu quero bater o olho eu quero bater o olho ali na minha página e lembrar assim ah não espa tá faltando isso aqui é para eu me localizar então aqui capa do disco aí embaixo vai ser nome da música aí embaixo vai ser nome também da banda depois do nome da música o nome da banda tem ali o botão de like na direita né então botão de like depois barra de progresso

aí aqui vai ter botão de embaralhar aqui vai ter eu vou botar aqui voltar música eu vou botar aqui Play pause eu vou botar aqui avançar música e aqui vai ser repetir Demorou aí o que que eu vou fazer com isso aqui salvei Olha só diminuir isso aqui que agora eu tenho aqui aparecendo eu tenho aqui aparecendo todos os elementos que eu quero que que eu quero que existam aqui na minha página para eu lembrar deles sabe para eu bater o olho na página e ver e se eu não tiver um botão de repetir aparecer

só esse texto repetir eu vou est lendo esse texto aqui lembrando ah não pode querer eu tenho que botar isso aqui isso tudo me ajuda a me guiar ao longo do meu projeto mas agora esse texto aqui obviamente não é o que você quer exibir você não quer exibir o texto capa do disco você quer exibir a própria capa do disco E como é que você vai fazer isso você vai vir aqui você vai modificar essa tag não é uma tag de texto que você quer usar você quer usar a tag IMG que é justamente

a tag de imagem deixa eu apagar esse conteúdo aqui porque eu não quero exibir eu não quero exibir esse texto como é que a tag de imagem funciona primeiro de tudo o que que eu vou fazer eu vou vir aqui ó eu vou pegar aqui umas imagens das Capas dos das Capas dos discos que hoje as músicas eu vou colocar no nosso projeto Então você vai colocar suas capas de disco e as suas próprias músicas você vai fazer a coisa do seu jeito beleza aí aproveita e Deixa eu aproveitar aqui para dizer o seguinte eu

coloquei essas capas de discos aqui que são capas genéricas e as músicas são músicas que pô podem ser tocadas no YouTube mas quando você for tiver fazendo isso aí coloca as suas músicas as suas capas de disco Puts é a é o seu tocador de música então ele tem que ter a sua cara então se você curte Aita ou até Anita exalta samba Exalta Samba Ah não curto Artic monkys vou botar Artic monkys Demorou eu vou colocar isso aqui deixa eu já copiar essas imagens aqui cont contrl C E aí eu vou vir aqui ó

nessa parte aqui do projeto e eu vou clicar aqui em New Folder ele vai criar uma nova pasta no meu projeto e uma pasta essa que eu vou usar para salvar as minhas imagens Demorou VM aqui coloquei aqui as as minhas imagens eu vou colocar elas aqui na verdade não funcionou ele aparentemente não deixou eu copiar aqui então vou só arrastar beleza Problema resolvido super tranquilo então por que que eu vou cque isso aqui agora eu vou pegar uma dessas imagens aqui eu vou pegar essa primeira aqui é essa as juber eu vou botar isso

aqui aí a tag de imagem ela vai ter uma informação adicional que é essa informação aqui source source do inglês significa fonte por que isso porque a fonte do conteúdo que eu quero exibir na tag de imagem e qual é a fonte do conteúdo barra e barra significa o seu logar atual Barra aí eu vou entrar na nova pasta barra images barra e aí eu vou botar as You E aí no momento que eu fizer isso salvar eu tô dizendo para essa tag que o conteúdo que ela tem que exibir tá aqui e aí salvei

Olha só apareceu aqui a minha apareceu aqui a minha imagem maneiro né bacana e putz é legal isso porque agora pela primeira vez você escreveu isso você pela primeira vez você colocou uma parada que não é texto aqui no seu HTML Olha que legal E aí nesse momento talvez você esteja olhando pra nossa imagem aqui de referência e se perguntando cara tá imagem eu até entendi mas como é que eu vou fazer esses ícones aqui eu vou colocar eles do zero como é que fica isso eu vou escrever eu vou desenhar Isso aqui é uma

coisa o botão de avançar é uma coisa que eu consigo fazer com teclado não calma tem uma solução muito simples que é a seguinte felizmente o conjunto de design é conjunto de designers que tem muito mais experiência e um senso estético muito melhor do que o meu fez pra gente uma biblioteca de ícones e Existem várias bibliotecas de ícones Mas a gente pode usar e aí a gente pode usar que a gente mais gostar eu escolhi essa aqui ó Então você vai abrir aqui uma aba vai pesquisar aqui no Google Bootstrap icons Bootstrap icons já

até parece aqui para mim sugerido Bootstrap icons eu vou vir aqui eu vou clicar e aí é isso existe essa biblioteca Bootstrap icls se você rolar Aqui para baixo olha só a gente tem aqui todosos ícones prontos que você consegue usar no seu projeto Olha que legal e a E aí repara só vou voltar aqui a minha imagem de referência Eu queria um botão de play pause então eu vou pesquisar aqui ó vou dar um cont control f e eu vou pesquisar Play ah aí tem muita coisa aqui com Play né você vê que tipo

tem Collection Play Tem várias coisas assim mas repara isso aqui tá em ordem alfabética então como eu sei que Play o que eu tô procurando é só Play eu vou aqui na letra P aí ó repara já tem aqui um pause Olha só já tem um pause aqui que bem parece o pause Parece até o pause que eu quero usar então ó já fica de olho nisso pause Circle E aí olha o play aqui que eu queria mostrar tá aqui ó p e vamos lá aqui um pouquinho mais para baixo olha aqui Play Circle tá

Mas putz irado irado Daniel Como como é que eu uso esse ícone como é que eu trago isso aqui pra minha página eu vou ensinar Na verdade o próprio Bootstrap icons pra gente ensina aqui embaixo você vem aqui nessa sessão de instalação e ele tá te dizendo aqui ó forma diferente de instalar a que a gente vai usar é muito simples nessa sessão aqui CDN ele tem aqui isso aqui ó inclui isso aqui no seu head do seu Website no R do seu Website Beleza então você vai pegar esse conteúdo aqui e aí ó deixa

eu mostrar uma coisa porque a minha tela tá reduzida Mas se a tela tivesse maior o que que ia acontecer ele ia aparecer aqui para você com essa opção Zinha com esse botãozinho de copiar Você clicou aqui ele já vai copiar para você aí saca só eu vou vir aqui eu vou no Red do meu projeto que repara tá justamente aqui e eu vou colocar isso aqui por quê eu vou colocar esse código que ele me mandou copiar E por que isso Lembra que eu falei que aqui no r a gente vai colocar as informações

que a gente quer que o navegador saiba o que que eu tô dizendo aqui pro meu navegador que é ó fica de olho na biblioteca de ícones que tá nesse link aqui aí tem até um linkzinho aqui ó repara que foi Eu já copiei de lá né naquele só de clicar no botão de copiar mas fica de olho nos ícones que estão na biblioteca desse link aqui porque são eles que eu vou utilizar eu botei aqui no R E aí repara só depois que eu boto isso no r o meu navegador já sabe se locar

aqui em relação aos ícones que eu quero usar eu vou voltar aqui pro play Circle que era que acho que a gente tinha encontrado aqui ó Play Circle F esse aqui é o que eu quero esse aqui é o é o ícone do tocador do do botão de play que eu quero aí você vai clicar nele aí você vem aqui embaixo em icon fonte Você vai clicar aqui no copy clipboard também vai copiar esse código eu vou vir aqui no lugar do meu conteúdo de play pause e eu vou colar salvei olha só o que

aconteceu na nossa página apareceu já um iconeinstagram aqui na biblioteca e vou pesquisar cada um deles aí você pode colocar o ícone que melhor que você achar mais legal sabe Eu já fiz uma pesquisa prévia e eu já encontrei alguns que me agradam Ah Daniel mas como é que você fez essa pesquisa Ah simples eu entrei nessa página e eu fiquei rolando aqui o scroll ver qu são uns ícones que eu achava legal por exemplo de coração eu vou pegar esse aqui Hart Hart que é coração em inglês né eu vou pegar isso aqui copiei

aí eu vou botar aqui ó no botão de like eu vou substituir aqui por coração salvei Olha só como é que ficou botou um coraçãozinho aqui maneiro né A propósito aqui já não é mais paragraf até funciona mas eu não quero escrever texto aqui então eu vou trocar isso aqui e vou botar só uma div beleza aliás eu vou fazer isso aqui para vários deles eu vou deixar div aqui e aí depois eu ajusto tô trocando das duas tags tag de abertura e tag de fechamento fique esperto nisso barra de progresso também não vai ser

texto Então deixa eu trocar isso aqui div mas vamos voltar ao nosso processo aqui de colocar ícones tem mais alguns que a gente quer colocar então eu vou pesquisar aqui ó repeat E aí novamente como é que você vai achar o Icone que você quer só olhando aqui olhando aqui p passei aqui para essa biblioteca tem vários ícones maneiros P você que gosta de jogar videogame por exemplo tem até o ícone do Playstation ali que eu passei ali perto eu tava vendo beleza cliquei aqui copiei botão de repetir botei aqui botão de repetir Beleza vou

salvar aqui mas vamos lá vamos botar outro já aí tem o botão de embaralhar que em inglês é shuffle então aqui shuffle é porque o nome o o nome do significado já dá um bom já é uma boa dica pra gente né ah Putz eu quero um ícone de embaralhar Ah como é que embaralhar em inglês shuffle aí eu pesquisei aqui shuffle Ó tem aqui o izinho de embaralhar então aqui vou colar aqui o código do botão de shuffle E aí o de avanar e voltar eu pesquisei é skip o botão que eu quero usar

para isso esse skip end e o skip start aqui skip end Ok copiei avançar aí agora eu venho aqui também pro skiper aqui skip start skip start só que eu quero pegar esse aqui esse aqui que é que é preenchido né que não é só o contorno do botão eu vou clicar aqui em voltar vou colocar aqui o código beleza eu acho que eu coloquei todos os meus ícones então sóc só ficou aqui o meu projeto já com os ícones exatamente como eu espero entrar aqui na versão final do meu projeto né olha é bacana

porque a gente fez muita coisa aqui e a gente conseguiu sair de uma página em branco para uma página em texto e a gente já conseguiu até colocar conteúdo assim mais bacana uma foto ali a capa do disco os ícones Então teve um progresso bem legal mas acho que você vai concordar comigo que a gente ainda tem bastante coisa a fazer então se você gostou fica ligado porque nos próximos vídeos a gente vai estilizar Isso aqui vai deixar com a carinha do Spotify e a gente vai botar toda a inteligência aqui pro nosso Player ficar

funcionando e a gente poder tirar aquela onda lá com os amigos Demorou então fica ligado não perca mais nenhum vídeo e eu vejo você semana que vem valeu