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

fala impressionador bem vindo a essa que é a aula 2 do mini curso de desenvolvimento web com JavaScript aqui da hashtag no qual eu tô te ensinando a fazer o seu próprio player de música inspirado no player do Spotify do zero mesmo que você nunca tenha mexido nisso aqui antes então deixa o seu like aqui já Para sinalizar porque você tá curtindo e tá acompanhando o projeto e bora lá para o vídeo [Música] na aula passada a gente construiu o início do nosso HTML estruturando aqui botando alguns elementos já a gente colocou só uma referência

a eles aqui por exemplo um nome que barra de progresso aqui Para sinalizar que a gente ainda tem que colocar aqui de fato uma barra de progresso mas isso aqui ainda não acabou na verdade se a gente olhar para nossa imagem de referência a gente vai perceber que a gente ainda tem muita coisa a fazer beleza e aí esse processo de colocar esses elementos aqui eu apresentei para vocês algumas tags e dentre elas é a tag de vida o que você talvez estejam bem se perguntando e querendo me perguntar é o seguinte beleza Daniel eu

vi que a tag de MG é uma tag de imagem eu vi que a tag p é uma tag de parágrafo Mas e a dívida é uma técnica do que você falou que é uma tag genérica acima Pô sei lá por que que ela tem esse nome é uma técnica de divisão e o que que isso significa que eu tô pegando aqui a minha tela tô pegando aqui a tela do meu projeto e eu tô fazendo uma divisão nela tá fazendo um recorte retangular e eu tô falando olha o conteúdo desse recorte é isso aqui

que tá dentro das tags de abertura e fechamento da dívida sacou É por isso na verdade que a dívida é uma tag genérica porque diferentes de as tags de título por exemplo aqui de h1h6 que eu mostrei para vocês na aula passada ou a tag de p que se você reparou bem quando eu coloquei na aula passada ela até pode ter colocado o texto normal sem estar em sem ser uma fonte grande mas você se você fosse ver o conteúdo da tag P Estava sempre mais espaçado do que o normal isso é porque já tem

um estilo próprio ali essa tag Até que enfim não a tag DIP ela não fez nada ela só estabeleceu a divisão qualquer estilização que eu queira fazer Ali quem vai fazer Sou eu mesmo não é a tag que já faz por padrão sacou a tag Diva então é uma tag genérica por causa disso porque ela não suja nada ela não faz que o ajuste ali ela mesma Você só coloca a tag de eeve e você faz os ajustes em cima dela E aí você pode botar ali dentro também vários tipos de conteúdos diferentes Então ela

acaba fazendo o papel pode fazer o papel de várias outras tags a gente vai usar quando quiser usar uma tag específica a tag específica E aí para usos um pouco mais genéricos até que divide beleza e agora lembra que quando eu lembro que quando a gente estava estruturando esse projeto a gente veio aqui na nossa imagem de referência contou Quantos elementos a gente tinha E aí viu que tinha mais ou menos 11 e colocou lá 11 tags E aí imaginou que tinha alguma relação com isso pois é lembra que eu falei para vocês que não

era para se preocupar com Apesar de eu ter feito isso isso aqui era só um pontapé inicial mas não era para você se preocupar porque a gente ia voltar esse HTML e ia mexer bastante nele lembra disso é isso que a gente vai fazer agora porque repara Só se você olhar aqui direito para esse para nossa imagem de referência você vai reparar que e eu quero fazer isso agora esse aqui tá alinhado esses botões aqui não tão um em cima do outro que nem nosso projeto da mesma forma isso aqui o texto e o nome

da o nome da música e o nome da banda eles podem até estar é um em cima do outro mas eles estão quase como se fosse num conjuntinho só que ali tá tipo sua vez tá alinhado com o botão de like é parou então o que que eu quero fazer eu vou já que eu falei para você que ative é uma tag de divisão da tela eu vou fazer algumas subdivisões porque eu quero agrupar elementos que eu vou organizar juntos sacou é isso que eu vou fazer a primeiro momento e aí Quem são os dois

bons lugares para eu fazer para começar a fazer isso esse aqui repara só esse e esse aqui porque eu quero que essa sessão esteja em cima dessa que esteja em cima dessa mas eu quero que os elementos dessa sessão estejam organizados de uma forma diferente Demorou Ah Daniel mas poxa é como é que eu vou saber qual é a como é que eu vou saber qual é a Quais são os elementos que eu vou botar dentro de uma dívida Quais são as sessões que eu vou fazer cara não se preocupa com isso você vai vendo

na prática e na medida em que Putz eu tô achando que faltava uma dívida aqui você pode sair lá e colocar não tem mistério não tem perigo nenhum assim é super tranquilo aliás eu vou mostrar um negócio aqui para vocês a maior prova de que isso aqui não tem o menor problema é o seguinte eu vou escrever aqui tive apertei enter ele o visor de coach já me ajudou já botou a dívida de fechamento também para acompanhar essa divide a abertura que eu estava escrevendo Você acha que é medívia e apertar ainda ele já vai

fazer pega de abertura e pega de fechamento aí agora eu vou pegar esse conteúdo aqui eu vou cortar a tag de fechamento eu vou cortar tag de fechamento vou colocar só depois do botão de like por que que eu vou fazer isso aqui porque agora eu tô definindo que essa dívida nova que eu criei engloba o nome da música o nome da banda e o botão de like sacou e vamos os três no momento que eu salvar repara nada aconteceu então não precisa ter medo justamente por causa daquilo que eu comentei a Dive ela só

define a sessão mas ela não sujou nada ela não modificou nada tá tudo igualzinho aqui reparou Então pode fazer isso sem medo pode fazer isso sem medo não tem problema nenhum aproveitando se você reparou essa Dib já foi uma das duas que eu falei que ia fazer aqui ó essa aqui que engloba esses três elementos o nome da música nome da banda e o botão de like e ali embaixo tinha a outra dica que eu também pretendia fazer que era que englobava hoje botões então eu vou ver aqui eu vou escrever jive apertar enter e

olha só tem de abertura de fechamento de novo eu vou pegar essa tag de fechamento e vou passar aqui para baixo porque eu quero que ela englobe todos esses elementos aqui para mim E aí o visual Studio code ele fez um negócio Bacana aqui para mim já que foi jogar esses elementos que estão dentro dessa minha dívida mas para frente aqui no HTML porque isso E aí eu vou te explicar já fazendo a mesma coisa aqui porque esse aqui faltou Esse aqui também porque isso aqui me ajuda a bater o olho e analisar Opa esse

elemento tá dentro dessa dívida esse segundo elemento também está dentro dessa div E aí repara só quando ele quando um elemento tá dentro de outro a gente chamou o elemento externo de pai e o elemento interno de filho e aí se esse elemento é pai é filho desse e esse elemento você pode dizer que ele é irmão desse certo porque os dois são filhos do mesmo pai Demorou a mesma coisa para esse aqui isso aqui é importante isso aqui é importante porque o que que eu tô fazendo aqui só para você ter ideia né eu

tô definindo assim uma gibes pais e eu vou organizar os elementos internos com base numa organização do divip pai é isso é isso que eu tô fazendo E aí vamos lá para isso se você lembra da aula passada eu disse que projeto de web existem com base em três principais tecnologias que são HTML CSS e JavaScript e tudo que a gente fez foi o HTML que eu disse que era a estrutura da página só que se o HTML é a estrutura da página agora tá na hora da gente para brincar também com o segundo elemento

o CSS porque eu quero mexer na aparência da página sacou Então vamos lá para o segundo elemento vocês vão vir aqui nesse ó cliquei aqui para casa eu tinha clicado no lugar errado era só clicar aqui Explorer E aí quando você vier aqui e clicar aqui mil file novo arquivo eu vou botar um segundo elemento cujo nome será Style .css sacou eu criei o meu primeiro arquivo CSS a Daniel Style precisava ser style não podia ser banana ponto CSS você precisava ser ponto CSS você precisa ser um arquivo CSS aqui no nosso projeto sacou mas

o nome eu botei está eu porque é um padrão Mas aí você pode botar o que você quiser beleza aí esse aqui é o meu arquivo CSS que antes de mais nada eu tenho que importar no meu HTML o que que é isso eu venho aqui no HTML e vou te dizer Olha você vai vai buscar os estilos dessa página que um arquivo externo um arquivo CSS e como é que eu faço isso exatamente dessa forma aqui eu vou abrir uma tag link link exatamente com uma tag de cima eu vou botar Réu e aqui

vai ser um styleshite exatamente como está escrito em cima também porque o CS é um arquivo styleshite significa folha de estilos que é exatamente o que CSS vai entregar para a gente então vamos lá aí o HF que por sua vez vai me dizer onde está esse arquivo que eu estou linkando com meu HTML e onde é que tá esse meu arquivo está eu ponto CSS beleza fecha a tag Lembrando aqui que link é uma das tag uma daquelas tags particulares que não precisa ter tag de encerramento salvei aqui pronto agora minha página conhece o

conteúdo do meu CSS isso significa tudo que eu estilizar lá vai aparecer no meu HTML sacou E aí deixa eu mostrar um elemento deixa eu mostrar para vocês um exemplo isso aqui ó eu vou escrever isso aqui E aí eu vou abrir e fechar Chaves Daniel O que que significa isso simples eu vim aqui escrever div Abrir fechei Chaves significa que eu quero aplicar o que eu vou escrever aqui dentro para dívidas do meu projeto então eu vou vir aqui e vou escrever background color para dar um exemplo para vocês background color que é do

inglês significa cor de fundo e eu vou escrever aqui Blues Me deu até mais algumas sugestões eu vou escrever que é azul do inglês né Vou salvar Olha o que que aconteceu tudo ficou azul porque que essa parte ficou azul vamos dar uma olhada aqui porque é aqui que começam as minhas dívidas eu tenho uma dívida que englobando esses três elementos Então vou estilizar eles aqui o coração o nome da música o nome da banda porque todos eles estão dentro de dia eu falei tudo que tiver dentro de dívida e você bota o fundo azul

isso aqui barra de progresso também e esses aqui também sacou Beleza a gente já tem então uma folha de estilos na qual a gente vai escrever os estilos da nossa página Tá certo eu vou apagar isso aqui porque não tem Azul basta lembrar na nossa imagem de referência primeiro de tudo dei uma olhada na nossa imagem de referência mais uma vez Então reparando que o fundo dela é muito diferente do fundo do nosso projeto até então eu concordo com isso e o repara só Outra coisa o fundo ele é uma coisa que existe para página

como um todo certo ele é abusos para a página como um todo então eu não vou limitar esse fundo aqui eu acabei de pintar o fundo das gives de azul mas eu não vou ilimitar a dívida ou qualquer outro elemento eu vou pegar o elemento que tá mais lá no início possível quem é esse elemento vamos dar uma olhada no nosso HTML é o Bari lembra do Body que eu falei para vocês da aula passada que era onde a gente ia colocar tudo que a gente queria que aparecesse na tela então o baile é o

que está definindo o que que pertence a tela então se eu vier aqui e escrever Bari não pode pare e aí eu vou escrever aqui background color aí eu vou escrever aqui Aquamarine que aparentemente é uma cor que ele me sugeriu salvei aqui tudo ficou tudo na nossa cor bacana não é pois é é exatamente o que a gente queria fazer só que não é essa cor aqui e como pegar a cor certa então para o nosso projeto eu vou ensinar o macete para vocês vem aqui na imagem de referência e você pode esse aqui

é o pente você tem ele você tem ele no seu computador com Windows já instalado por padrão então você consegue fazer isso exatamente como eu tô fazendo sem nenhum problema o que que eu vou fazer essa aqui não é minha imagem de referência é essa aqui eu vou fazer o seguinte Pego aqui seletor de cor é ser pegador aqui eu vou pegar ele vou colocar aqui embaixo olha cliquei aqui pronto aí eu vou clicar aqui nesse ponto aqui ó Nessa esfera de cores aqui e ele vai me aparecer RGB 29 40 e 42 Essas são

as cores desse elemento Essas são as cores desse elemento então se eu vier aqui e escrever Olha o que que vai acontecer eu venho aqui no nosso projeto escrevo background color RGB exatamente do jeito que ele tava falando RGB E aí quais eram as quais eram as cores vamos dar uma olhada aqui 29 40 e 42 é exatamente como pente ensinou pra gente se você vier aqui e dá uma olhada Olha só ele já botou aquela cor Beleza a gente conseguiu deixar aqui a cor do a gente conseguiu deixar aqui a cor do nosso projeto

após o fundo nosso projeto mais parecida com a cor na nossa imagem de referência só que se a gente voltar para lá a gente vai reparar o seguinte o Spotify ele não usa uma cor única de fundo ele não usa uma cor assim plana ele faz o que a gente chama de um gradiente de cor que é ele pega uma cor e ele vai variando Ela até ela virar outra cor reparou aqui embaixo tem um verde mais escuro aqui em cima tem um verde mais claro então como a gente faz isso aqui no nosso eh

como a gente faz isso aqui no nosso projeto é simples vou ensinar para vocês aqui um macetinho que é muito prático primeiro a gente vai ter que entender isso aqui não como uma cor não como uma cor de fundo mas como uma imagem de fundo para o nosso projeto beleza bacana combinado A gente vai transformar isso aqui então numa imagem de fundo já é E aí eu vou vir aqui então no nosso CSS Vamos mudar esse texto aqui de background color para background image beleza que é uma outra propriedade CSS tanto que aqui o visual

já me sugeriu só que ela tem informações a mais e quais são as informações a mais bom no background eu consigo escrever isso aqui ó eu quero fazer de imagem de imagem de fundo do meu Bari um Gradiente linear beleza e aí aqui ó repara escrevi Gradiente linear Gradiente apertei Enter o visual Studio code já pegou ali já montou para mim é essa frase aqui linear Gradiente abre e fecha parênteses porque abre e fecha parênteses porque para ele fazer esse Gradiente ele precisa de informação que a gente vai passar e quais são essas informações bom

a cor de início e a cor de fim a cor lá de cima e a cor aqui de baixo então eu vou pegar essa cor de baixo eu vou pegar essa cor de baixo e aí saca só isso aqui é importante eu vou tirar ela aqui vou tá ela aqui né vou recortar e vou colocar ela dentro aqui dessa operação de Gradiente linear tá aqui por acaso até Sobrou um ponto e vírgula mas eu já tirei ele vou colocar ela dentro dessa operação de Gradiente linear só que ela é a segunda parte da operação ela

é o ponto no qual eu terminei no Gradiente só que aonde eu comecei é na cor que fica lá em cima então Volto ao pente vou pegar aqui ferramentas pensa que essa seletor aqui de cor de novo ou clicar aqui e vou escolher aqui a cor e olha repara é RGB 5988 93 59 88 93 então eu vou escrever aqui exatamente assim RGB RGB aí abre e fecha parênteses abre fecha parentes aqui o visual show de code quando você abre parentes ele já fecha para você 59,88,93 aí porque a vírgula porque ela separa uma informação

da outra e da mesma forma já que a gente está passando para nossa operação de Gradiente linear duas informações a gente vai separar elas por vírgula também tá bom então as informações aqui quando a gente tá botando dentro dos parênteses a gente vai separar por vírgula aqui no CSS beleza é isso aqui Aí salvei e olha só o que aconteceu nossa o meu Player já ficou com um pouco mais daquela cara ali Olha que bacana legal não é Tá bom mas se a gente olhar aqui na nossa imagem de referência a gente vai perceber que

tem uma coisa meio esquisita Putz era para fazer isso aqui só que ele tá se repetindo repara se você não vê ele tá repetindo aqui né ele tava com a cor de início a cor de vinho aqui ele voltou pra cor de início aqui por que que que está acontecendo porque o Bari ele é configurado por padrão para isso para pegar esse background e ficar repetindo essa imagem ali no fundo aí eu vou pegar então e vou botar uma nova propriedade aqui para esse baile Hight tá bom Raid que do inglês significa altura na verdade

antes eu vou só fazer o seguinte eu vou botar aqui um ponto e vírgula porque porque isso aqui background e todo esse conteúdo é uma propriedade desse CSS é uma propriedade desse estilo aqui que eu tô definindo então de uma propriedade para outra eu vou botar ponto e vírgula e raite é uma nova propriedade right eu vou definir a altura desse elemento bari e o que que eu vou escrever aqui nesse Raid eu vou escrever sem VH O que que significa sem VH E aí botei bom ter vírgula para finalizar essa propriedade salvei pronto mas

o que que é isso o que que eu escrevi o que que isso significa VH significa a altura vertical que eu tenho disponível a outra vertical que eu tenho disponível é essa altura aqui da página e aí o que que eu disse na altura da página eu quero que o Bari ocupe 100% sacou é isso que estava acontecendo porque antes o que que estava acontecendo o Bari não tava não tava pegando 100%. ele tá pegando só o suficiente para acomodar todos os elementos dele era isso que estava acontecendo agora não agora eu falei Vale se

estica aí preocupa a página inteira e aí no momento que eu ocupei o que que aconteceu a imagem de fundo do baile que é a nossa cor em Gradiente ocupou também a página inteira Então olha que bacana a gente já tá mais perto da nossa imagem de referência maneiro não é E aí aproveitando que eu sei que você tá no gás assim você tá gostando por negócio tá ficando legal tá ficando bonito vamos fazer duas modificações aqui que eu sei que vão ser bem interessante a primeira delas vamos botar aqui color eu vou botar salvei

eu quero que por padrão ele usa a cor branca aí depois a gente faz alguns ajustes aqui numa coisinha ou em outra mas eu quero que ele tenha a cor branca porque a cor que predomina aqui dos meus elementos no nossa imagem de referência concorda E aí já que eu apliquei esse estilo no Bari ele aplicou para todo mundo a Daniel Mas e se eu quisesse pô de um tivesse um elemento em particular que eu queria que quisesse botar a cor azul assim que o texto vai ser azul não tem problema você vai pega esse

elemento é particular e bota a cor dele Azul Demorou mas aqui a base vai ser usar a cor branca pra pra escrever as coisas e para botar as coisas aqui na nossa página é por isso que a gente colocou isso agora a gente vai fazer mais uma alteração que é a seguinte fonte family E aí aqui fonte Family é o seguinte Ele tá te entregando o visual já até completo aqui te entregando opções de fontes que você vai usar na página né para mudar o seu texto utilizar o seu texto eu quero essa aqui ó

times New Roman times na verdade não eu quero ver Dana Geneva tahoma e sansery vou salvar beleza isso aqui não tá muito com a cara do Spotify Na verdade essa aqui não tá muito com a cara do Spotify e o que que eu vou fazer eu já adianto para vocês o seguinte eu fui pesquisar e o Spotify usa Sunset por isso que eu tinha escolhido dessa aqui só que ela tá aqui atrás nesse conjunto de opções né Eu não quero isso porque o que que tá acontecendo ele tá lendo aqui fonte Family Ah qual é

a fonte que eu vou usar Verdana se não tiver usa essa aqui Geneva se não tivesse essa aqui da Roma se não tiver isso aqui serve Mas eu não quero isso eu quero que ele use direta Essa serve eu vou apagar essas outras aqui salvei beleza bacana é isso então por hora esse é a utilização do nosso baile por hora essa é a colonização do nosso bar e assim a gente já deixou ele com uma carinha bem mais amigável E aí nesse momento muita atenção porque eu vou fazer uma coisa inédita e uma coisa muito

importante que vai ajudar muito a gente aqui no projeto que é eu vou definir como o body ou como Body tem que fazer comportar em relação aos elementos dele e como o Bari é o que abriga todo mundo ele vai ajustar todos os elementos saca só eu vou fazer isso aqui da seguinte forma Flex Beleza vou te fazer display flags e vou clicar no salvar e no momento que no momento que eu clicar no salvar você vai ver o que vai acontecer mais uma vez display Flex aí botei aqui um bom ter vírgula no final

Porque essa já era uma propriedade nova também salvei display Flex Putz mudou tudo caramba Daniel na vacilou não acredito nisso não calma o que acontece é o seguinte ele mudou a disposição dos elementos que tava dentro do Bali agora aí a disposição dos elementos respeita essa organização aqui Flex Só que essa organização por padrão eu organizo os elementos em linha então tu que veio nome da playlist logo em seguida da capa do disco depois dos outros elementos só que na hora que eu quero a coluna Tava um pouco mais parecido com o que eu tava

querendo né então eu vou mudar isso aqui se o padrão é linha eu vou mudar para Flex Direction flats Direction O que que significa significa que eu tenho um display Flex mas eu quero definir a direção desse display Flex dos elementos desse tipo inflex e não é Row que é linha porque esse é o padrão esse padrão não me interessa eu quero colo como ele tá me sugerindo aqui e aí no momento que eu cliquei em Colombo control vs olha só o elemento voltou a ter a volta vai ficar um em cima do outro aí

você deve estar se perguntando tá Daniel Mas você fez isso aqui só que a imagem ela só ficou grande na verdade isso aqui ganhou uma coisa isso aqui ganhou uma característica muito legal muito interessante é a seguinte se eu se eu aumentar o tamanho da tela aqui mas já aumentou por exemplo na verdade tudo aumentou o barice alargou E aí Maju está só ocupando todo o baile mas se eu diminuir a imagem diminuiu junto beleza E por que que isso é legal porque eu tô fazendo o que a gente chama de um site responsivo eu

tô fazendo um site que se ajusta o tamanho da minha tela olha que maneiro isso é muito legal sabe se você já teve a experiência de usar internet se o de usar internet no celular tentar acessar um site aí você tem que ficar dando Zoom porque a letrinha toda pequena porque ele é um site que foi pensado para ser usado no computador então você sabe o quão importante é ter um projeto que se ajusta ali ao tamanho da tela sacou para você não precisar ficar fazendo esses filmes assim zoados Exatamente isso esse é o nosso

display flex com flats Direction Colon beleza assim a gente organizou os elementos aqui do bari só que é da mesma forma eu vou organizar alguns outros elementos mas a estilização dos próximos elementos eu vou deixar pra próxima aula até porque por hoje a gente já viu bastante coisa E aí você gostou do seu primeiro contato com o CSS você já tinha tido um contato com o CSS antes você gostou do como Player Tá ficando tá vendo que ele já tá ficando bem mais parecido com o do Spotify deixa aqui nos comentários fala para mim Você

gostou do CSS se preferiu mexer ali com o HTML já conhecia os dois também aqui para mim deixa o like se você gostou do vídeo e se inscreve no canal para não perder a continuação dessa aula e a continuidade do nosso projeto não é por hoje é só Valeu galera até semana que vem