[Imersão Front-End] Revisão: HTML, CSS e JS na Prática

Olá, eu sou Paulo Silveira, sou CEO da Alura e estou aqui para te dar as boas-vindas a Imersão Front-End. Estamos realizando isso que já é um marco na comunidade de tecnologia. A Alura, junto com muitas outras empresas, vem, em momentos como esse, te ajudar no primeiro mergulho em uma tecnologia e dessa vez é em front-end. Tem JavaScript, HTML, CSS e até frameworks. para que você possa ingressar nessa carreira. É o primeiro momento, seus primeiros contatos e vamos te mostrar, em um mergulho excepcional, o que você pode fazer, quais são as dificuldades E você vai sair

daqui com o seu primeiro projeto. Já, já, o Guilherme Lima vai aparecer, junto com as instrutoras, para te explicar mais quem eles são, de onde vieram, e que você pode fazer parte desse movimento de aumentar a comunidade de tecnologia do Brasil, de fazer crescer esse mercado. E a Alura já faz esse evento, essa grande aula, esse momento, há mais de quatro anos. Pois é, a imersão já tomou uma cara única, e para que isso ocorra muito bem, e que você possa ter resultado como dos outros alunos e alunas que você já viu, você precisa se

dedicar. Eu preciso do seu compromisso de mais de duas horas e meia por dia. Isso já precisa ter sido feito. Isso precisa estar na sua agenda, no seu calendário, no seu celular, um espaço de tempo dedicado para assistir, praticar, anotar e tirar dúvidas. Não é à toa que a imersão envolve esses dias, essa semana inteira, e é muito agitado dentro do Discord. Você precisa participar, para não se sentir sozinho, para que você possa encontrar outras pessoas, e você verá que tem muita gente passando pelas mesmas dificuldades que você. Você verá mais do que isso. Durante

a imersão, durante esse encontro com a Alura, você vai perceber que muita gente que ingressou na carreira há alguns anos, passou pela imersão. E vale lembrar, não é só a imersão que vai te colocar num momento, numa posição, numa grande oportunidade de emprego. É a imersão, é a Alura, é a faculdade, é a comunidade, é uma oportunidade de trabalho, é a sua curiosidade, é ir além. Tudo isso é importante. Alguns mais, outros menos. Vai depender de você, vai depender da sua carreira, mas esse momento que você está aqui, pode ser um momento de transformação. Para

isso, não tenha dúvidas, preciso do seu comprometimento. Eu preciso ver você no Discord, mostrando o que você fez, o bug que você encontrou, o problema que você enfrentou, que você vai ver que muita gente está passando pela mesma coisa. E nós vamos juntos, do começo ao fim, nessa imersão. Inclusive, se você participar de todas as aulas dentro da plataforma, você pode emitir seu certificado de participação, tem muita gente buscando isso na Alura. E mais, no momento da sua dúvida, você terá disponível a Luri, que é a inteligência artificial, assim como GPT ou Google Gemini, a

própria Alura tem uma que vai te ajudar a tirar dúvida. Você pode usar aqui, ela aparece, nós vamos te explicar. Mais ainda, para essa imersão de front-end, a gente adicionou, em alguns momentos das cinco aulas, explicações de como você pode e deve tirar proveito da inteligência artificial. Porque você passará por momentos chatos, e preciso que você passe por esse momento, de entender pequenos códigos e problemas e enfrentar essas soluções. Mas também, depois que você aprendeu, você já poderá ter ajuda da inteligência artificial. E essa mistura de código, inteligência artificial, aula e tirar dúvida, é o

que vai te impulsionar nesse momento. E esse momento é muito importante, porque qualquer pequena dúvida, por mais simples que ela seja, pode te travar. Então, use e abuse da inteligência artificial. Tire dúvida com seus amigos e coloque aquilo que você está aprendendo no LinkedIn, no Instagram. Marca a gente, marca a Alura, para que possamos publicar o seu projeto, o que você fez de diferente. Nada mais legal do que você trazer um toque pessoal Para aquilo que o Guilherme Lima vai te ensinar, para aquilo que as instrutoras vão te dar como exemplo, o que elas usam

na Globo, no Banco Itaú, em outros bancos. Você verá que é muito rico esse universo do front-end e da programação. Tudo o que veremos durante as aulas, tem links na descrição. Então, é importante que você veja todas as bases, todos os exemplos, tudo que a gente citou, pois tem muitos links para você ir além. Vai muito além do que mostramos na aula. Claro que, se esse é seu primeiro momento em alguma programação ou tecnologia, é difícil de ir além, mas fica aqui a provocação. Então, eu desejo a você que esse mergulho seja profundo e que

você saiba que esse pode ser, sim, o seu primeiro passo nessa carreira Ou em diversas outras carreiras que passam por programação, que passam por automação, tecnologia, dados, inteligência artificial. Tudo isso que faz parte do ecossistema da Alura e das empresas que estão formando esse sistema inteiro. Então, vou chamar aqui os instrutores dessa imersão e quero ver você com comprometimento, seriedade, agenda e tempo. Tchau! Boa aula. [♪] Eu quero te dar as boas-vindas à Imersão Front-End da Alura, eu estou muito feliz de ter você aqui. Meu nome é Guilherme Lima e vamos criar um projeto durante

essa semana, Simplesmente incrível e inspirado no mundo real. E, para esse desafio, estou com duas pessoas simplesmente maravilhosas, devs altamente competentes. Quero apresentar Fernanda e Mayara, tudo bem com vocês? - Tudo ótimo. - Tudo bem também. O que vamos fazer essa semana e quem são vocês? Primeiramente eu vou me apresentar, e, antes do primeiramente, eu queria agradecer a Alura pelo convite, é uma honra estar aqui para fazer esse projeto tão legal com vocês. Então, eu sou a Fernanda, eu sou dev front-end na Globo, e vamos fazer muita coisa legal aqui essa semana. Eu também queria

agradecer o convite, também é uma honra estar aqui com vocês. E eu sou a Mayara, sou desenvolvedora front-end no Itaú e essa semana eu acho que vamos aprender bastante sobre HTML, CSS e JavaScript. Então, aproveitem todo esse conteúdo que está demais. E quando falamos em front-end, temos dois cases bem diferentes, a Globo e o Itaú atuam em momentos diferentes, provavelmente o front-end será diferente. Você trabalha com determinadas tecnologias que talvez a Mayara não trabalhe. Faz sentido isso? - Faz sentido. - Faz total sentido. E quais tecnologias geralmente vocês usam no dia a dia, que é

muito comum? Bom, eu trabalho numa área no Itaú que é uma área de plataforma. Então, fazemos peças para outros times de desenvolvimento usarem. Então, temos hoje peças em Angular, temos peças em React, temos várias ferramentas, oferecemos várias ferramentas para que esses times consigam trabalhar de uma forma mais abstrata, sem se preocupar tanto com, por exemplo, sem se preocupar com requisitos funcionais e tudo mais. Então trabalhamos bastante, por exemplo, com micro front-ends, trabalhamos com templates diferentes que vão rodar dentro de cenários diferentes do banco, então é bem legal. O time de especialistas da Globo desenvolveu um

framework próprio. Eu desenvolvo para a TV, então toda Globoplay que está na TV, A culpa é do meu time! Mas a base desse framework é em React, então toda especificidade, toda a leitura do código, a base é em React. E assim, o fundamento tanto para o Angular ou para o React é HTML e CSS? - E JavaScript. - E JavaScript. E esse será o nosso 1º passo? Esse será o nosso passo. O que vamos desenvolver nessa semana? Vamos desenvolver... quem chuta aí? Vamos desenvolver uma página inspirada na página do Spotify. Vamos fazer um clone e

mostrar todos os conceitos de HTML, de CSS e JavaScript Dentro da construção dessa página. E antes de você criar os seus códigos e criar o seu próprio clone do Spotify, eu gostaria de te mostrar depoimentos de pessoas que já passaram pela imersão e conseguiram trilhar um caminho com o desenvolvimento front-end, back-end e diversas áreas. Olá, sou Bárbara, tenho 33 anos, sou funcionária pública há 10 anos. Sou professora da Rede Municipal de Educação e esse ano resolvi fazer minha transição de carreira. Eu sou casada com um dev, meu marido ficou um tempo fora do mercado, ano

passado ele resolveu voltar para a área e esse ano ele começou a trabalhar para uma empresa aqui em Portugal. E para isso eu precisava fazer uma pausa na minha carreira, no meu emprego, E eu percebi que esse seria um excelente momento para fazer uma transição de carreira. E ele tem me apoiado muitíssimo nessa minha jornada, nesse meu início de jornada. E a primeira dica brilhante dele foi fazer a assinatura da Alura. Ele me indicou a Alura porque a Alura é uma plataforma onde eu poderia conhecer as principais ferramentas que os devs utilizam desde o início.

E é verdade, eu comecei a fazer os primeiros cursos de programação para iniciantes, eu sou graduada em Geografia, sou professora há 10 anos, eu não tinha absolutamente nenhum conhecimento da área E com a Alura eu realmente desbloqueei essa primeira fase. A Alura tem me ajudado a romper essas primeiras barreiras. E agora eu acabei de sair de uma Imersão Dev. Eu terminei a última aula da Imersão Dev chorando de orgulho, de gratidão e de vontade de saber mais. E foi emocionante, foram 10 dias intensos, quebrando a cabeça, mas percebendo que eu estava no caminho certo, que

eu estou no caminho certo e que eu escolhi uma plataforma, eu escolhi as pessoas certas para estarem comigo nesse momento. A Rafa, o Gui e o Paulo estão sendo fundamentais nessa minha transição de carreira, Nesse meu início de jornada. Eu sei que ainda tem muita coisa para eu conhecer, eu sei que ainda tem uma longa jornada pela frente, mas eu me sinto segura, eu me sinto capaz, eu me sinto forte e munida com as ferramentas para começar esse novo processo, porque a Alura realmente está me deixando acreditar nisso, estou acreditando que eu sou capaz e

a Alura está sendo fundamental nesse processo. Eu trabalhei como designer há 6 anos, mas eu nunca senti, assim... Eu trabalhei mais porque foi o que deu na telha. Eu não escolhi de fato E eu estava ficando frustrado um pouco com isso ao longo dos anos e comecei a ter um leve toque em tecnologia, apenas HTML e CSS em julho, mas nunca levei para frente e foi basicamente isso. Eu conheci a Alura em uma imersão de JavaScript, fiz dois conversores, um conversor de temperaturas e um conversor de moedas, mas eu senti muita dificuldade. Mas essa dificuldade

foi o que fez bater forte em mim e foi onde eu tomei a decisão de me matricular na Alura e desde então segui estudando muito. O que me motivou muito foi, primeiro, eu senti muita credibilidade dos instrutores que estavam fazendo a imersão, isso foi algo que me convenceu muito, Mas, acima disso, foi a qualidade da plataforma. Eu já conhecia um amigo que era assinante e aí eu fui na casa dele, ele foi me mostrando o fórum, como eram feitas as atividades, os modos dos cursos, como que eram as trilhas, então não precisava eu mesmo pesquisar

tal curso, tinha as trilhas prontas, porque, hoje que eu já estou por dentro da tecnologia, é mais fácil eu mesmo montar tal trilha para mim conforme a minha demanda, mas para quem está entrando no início, ter essas trilhas formadas, igual vocês tem curso, podcast, exercício, isso foi algo que me motivou muito, eu senti que a Alura parece que pegou na minha mão E minha única responsabilidade era só estudar, isso foi o que me convenceu a me inscrever. O que eu esperava era muito conhecimento, mas além disso, tive algo que foi muito mais do que isso:

conhecer novas pessoas. Logo nos três primeiros meses eu ficava respondendo o fórum, e com isso eu consegui me conectar com muita gente, aprender muita coisa, para mim a área da tecnologia é mais do que só aprender a sintaxe, o código, é você se conectar com pessoas e você saber... Por exemplo, eu evoluí muito lecionando para outras pessoas, às vezes até para familiares que não estavam nem aí para tecnologia, mas foi algo que me despertou na Alura, essa comunicação que me fez crescer e aprender muito, Consolidar o conhecimento na minha cabeça. Há três meses eu fiz

um post no Linkedin que "hitou" muito, eu tive três oportunidades que apareceram para mim e eu pude escolher elas. Mas a oportunidade que eu escolhi era algo que eu nunca tinha tocado, o Angular. Eu tinha estudado React, já sabia bastante Typescript, Javascript, mas a oportunidade que me chamou a atenção foi com Angular, e na Alura, com um dia, eu consegui fazer quase que um CRUD completo e passei na entrevista! Isso para mim foi algo que... Eu acho que a Alura mostrou que eu não tenho limitações, eu não duvido mais nada de mim. E aí eu

passei na entrevista e falaram "você começará a trabalhar no início de outubro", eu fiz a entrevista no final de setembro, e aí um dia antes de eu entrar no trabalho eu já tinha feito um CRUD completo com Angular, responsivo, lindo, eu tenho orgulho dele até hoje! Então é muito bacana, eu recomendo para todo mundo, novamente pela questão que eu disse, eu sinto que a Alura pega na mão, e a nossa responsabilidade é nos empenhar, que a Alura faz o resto. Então chegou a hora de colocar a mão no código e colocar esse projeto do Spotify

com a nossa versão. Você está com a tela do Spotify aberta, um streaming de música, assim como outros que existem também, e estamos vendo que existem alguns cards, existe ali em cima, no topo, o menu. Como podemos montar essa estrutura? Vamos lá. Acho que antes de falar da página em si e começar a colocar a mão no código mesmo, acho que é bom lembrar o conceito de HTML, CSS e JavaScript para ficar claro para todo mundo. Essas três tecnologias são super importantes no desenvolvimento web, não falamos de desenvolvimento web sem lembrar de HTML, CSS e

JavaScript. Então, o que precisamos ter em mente? HTML vai dar a estrutura da página, é o elemento que está aparecendo para você, o esqueleto dele foi feito com HTML. O CSS vai dar beleza, vai dar o estilo, Vai dar o toque de animação, de cor, de fonte, e aí tudo que for relacionado a estilo, vamos usar o CSS para isso. O JavaScript já vai dar dinamismo. Conseguimos fazer a tela se comportar, interagir com o usuário através do JavaScript. Então, isso aqui não podemos perder e até o final vamos lembrar disso e esses conceitos vão ficar

claros. E um ponto legal que eu até vejo de engraçado, até para fixar melhor o que são essas três, eu digo que HTML é o nosso esqueleto, o CSS é o nosso corpo bonitinho, que estamos montando ali, e o JavaScript é o nosso cérebro, onde é a inteligência do negócio. Sempre gosto de lembrar desse exemplo, que foi assim quando eu aprendi, quando fiz minha primeira imersão, foi isso que fixou na minha cabeça. Que legal. Muito legal, é uma ótima analogia. Vamos lá. Temos aqui essa estrutura da página e eu vou mostrar agora como que essa

página vai ficar no final. Vamos começar com o HTML, criando uma estrutura e tudo mais, e aí no final vamos ter a página dessa forma. Então, mão no código agora. Você que está assistindo vai ter acesso a essa página também. Sim, vamos deixar essa página disponível Para que você que está assistindo possa acompanhar tanto no código, escrevendo enquanto estamos fazendo, mas também depois se quiser inspecionar, quiser voltar, olhar um ponto com mais atenção e aí é bem legal de ter esse conteúdo. Acho que uma observação que podemos fazer é: se você está muito no início

e acha difícil alguma ação, algum trecho de código que escrevemos, eu sempre passo esse conselho para a galera, primeiro só assiste. Só assiste, sem colocar a mão, e depois assiste de novo escrevendo, que talvez fique melhor. "Não, eu já entendo HTML, CSS, consigo ir acompanhando O que vocês estão escrevendo e está indo tudo bem." Aí, sucesso. Ou "eu já consigo criar sozinho isso aqui com o React e ajudar a galera da comunidade", também está bem-vindo. - Vamos lá. - Vamos lá. Primeiro, vamos criar uma pasta para trabalhar com o nosso projeto, criar nossos arquivos. Para

ser um pouco hipsters, vamos no terminal. Vou usar o comando mkdir para criar a pasta e vou colocar spotify-imersao-alura Isso é para que, May? Para criar uma pastinha? - Para criar a pasta. - Ah, legal. Então, o mkdir vai criar essa pasta para gente. A pasta está criada, agora eu vou dar um cd para entrar nessa pasta spotify. Se eu dar um "Tab", ele já vai completar o nome para mim. Então, entrei na pasta. Agora, vamos abrir o VS Code a partir do terminal. Estamos usando o VS Code, que é uma ferramenta muito legal para

desenvolvimento web. E eu acho que é a ferramenta mais usada no mercado. Eu, pelo menos, sempre trabalhei com o VS Code. E ele traz muitas ferramentas legais dentro da própria ferramenta, dentro do próprio VS Code, para trabalhar. Vamos dar um "code .". Eu tenho uma dúvida. Na Globo, vocês usam o VS Code também? - Aham. Sim. - Legal. Então, beleza. Demos um "code .", e aí, temos agora o VS Code aberto, já na nossa pasta, para criar os arquivos. Vamos lá agora. Eu posso ir em New file, eu posso dar um "Ctrl+N" também. E aí

criamos... Ou melhor, "Ctrl+N" não. Vamos clicar no ícone. E aí, vamos criar, primeiro, um index.html. Depois, podemos criar um styles.css. E aqui, depois, criamos um script.js. O basicão para começar está aqui, nesses três arquivos. E aí, ao longo das aulas, vamos mexer nessas estruturas, vamos criar pastas novas, criar alguns arquivos novos também. Mas, basicamente, agora, para começar, são esses três. Uma dúvida. Eu já tive essa ansiedade no início, de querer criar um projeto e achar que precisa ter uma arquitetura com pastas e documento. No início, não é assim. Não precisa ter essa preocupação. Não adianta

ter dez arquivos de CSS, se o projeto nem foi criado ainda. Não faz sentido. Não faz sentido. É passo a passo mesmo. Estou criando meu HTML e vou criar minha folha de estilo. Eu acho que eu preciso criar uma nova folha de estilo porque vai ficar mais organizado. É para isso que serve a arquitetura de pasta e tudo mais. Mas, pode segurar um pouco a ansiedade, que o momento de criar a arquitetura vai vindo ao longo do projeto. E vai chegar na vida real. Uma hora vamos falar "vamos parar antes de continuar escrevendo e criando

mais coisas, vamos dividir e organizar o código de um jeito melhor." E é importante falar que nós vamos sentindo isso. Por exemplo, agora, não faz diferença se temos Dez pastas e vários CSS e tudo mais. Mas, vai chegar um momento que vamos sentir a necessidade, como a Fernanda falou. Acho que agora faz sentido eu ter mais um CSS porque esse arquivo já está ficando extenso demais. Ou, agora eu vou ter imagens, então, acho que faz sentido eu ter uma pasta de imagens. Vamos sentir isso ao longo do desenvolvimento da página. Vamos lá. Primeiro, vamos para

o nosso index.html. Vamos começar com o HTML. E aí, para andar muito rápido, uma dica que costumamos dar: É só, no VS Code, dar uma exclamação e "Enter", - E aí, magicamente... - O site está feito! Tá tudo pronto. Pode ir para produção. Acabou a imersão aqui! Magia acontecendo. Olha, se fosse assim, bem que não seria má ideia. Mas aqui ele vai criar a estrutura básica mesmo, para começarmos a trabalhar com o nosso HTML. Então, vai ter a tag DOCTYPE, vai ter a tag html, que podemos inclusive trocar a linguagem para pt-BR. pt será minúsculo,

BR maiúsculo para falar que essa página está construída no idioma português. Aí depois temos a tag head, que é a cabeça mesmo da página, Que essas informações não necessariamente estarão aparecendo, mas elas vão servir para compor esse documento. E aí ele vai ter o UTF-8, que é a forma de codificação. Ele vai trazer o viewport, que vamos ver mais disso na parte de responsividade. E aqui o title do documento. Podemos colocar "Spotify Imersão", por exemplo. E aqui é aquele título que vai... Nossa. Ê, meu Deus, "Imersão". É o título que vai aparecer na aba do

navegador. Aí beleza, terminou o head, abrimos o body, que é onde vamos, de fato, colocar o conteúdo que vai aparecer na tela. E aí fechamos o HTML. Então, depois do title, na verdade, podemos colocar um ícone. Inclusive, quando acessamos a página do Spotify, vemos que tem um ícone bonitinho e tal. Então, podemos colocar isso. Já temos a estrutura básica da página. E agora precisamos fazer com que essa página chame o CSS para ele começar a dar cara para essa tela. Então, vamos fazer o seguinte. Para carregar o CSS dentro do HTML, vamos usar a tag

link. E aí quando eu escrevo link e dou um "Tab", ele já completa o que precisamos. Então ele vai ter esse rel, que é de relation, que é relacionado ao style. E vamos passar o href desse arquivo style.css que criamos no começo. Então se dermos um... Só vamos passar aqui, comecei a escrever styles.css, ele já trouxe para mim. Então esse link já será carregado na minha página. Agora, vamos no styles.css e vamos começar a brincar com o estilo da página. Vamos usar o seletor, que no nosso caso agora será o body. Então estamos falando que

o estilo que vamos colocar aqui é do body. E aí, já vamos colocar, por exemplo, um background-color. May, esse será um teste para ver se está fazendo link do CSS com HTML? É, fazemos um teste para ver se... Eu sempre faço um teste. Qual background você coloca? Que cor você coloca? - É tipo o console.log no JavaScript. - Exatamente. Colocamos background-color: red e, com isso, sabemos se está funcionando ou não. Aí aqui, background-color. E aí, vamos colocar hash #000, que é o preto. E aí, salvamos. E se colocarmos, no index.html, um H1, por exemplo, escrito

"Spotify"? Podemos colocar. Só escrever H1, dar um "Tab". Vamos colocar "Spotify". O Spotify, ele teoricamente não vai aparecer, porque vai estar na cor preta, que é o padrão. E o fundo também é preto. Então seria legal se, no style, pelo menos mudássemos a cor da fonte. Sim, então já vamos fazer isso. Então podemos vir no styles.css e colocar o H1. E vamos colocar o estilo dele, que será um color, para dar a cor da fonte, que será #FFF. O contrário agora. Já conseguimos ver? - Vamos ver a magia acontecendo. - Vamos ver? Go live? Vamos

usar um snippet do VS Code, que é bem legal. Ele chama Live Server. Que conseguimos fazer como se fosse um servidor para aquela página. Então é só instalar a extensão, o Live Server. Já temos ele instalado. Então é só instalar e já vai aparecer o Go Live aqui embaixo. Aí você só clicou, ele vai abrir uma página já com a sua página "hospedada", vamos dizer assim. Já criando um servidor. E aí, já temos aqui o nosso Spotify. Assim, ele está simples, está humilde. Só está escrito "Spotify" e não tem mais nenhuma informação. - Mas é

um começo. - É um começo. Então ainda temos bastante coisa para brincar. Vamos ver a estrutura da nossa página, no final, como ela vai ficar. Vamos dar um Inspecionar para ver quais são os elementos e tudo mais. Só para termos uma noção. Temos uma sidebar do lado, um menu lateral com uma nav, de navegação. Temos algumas coisas aqui. Vamos lá para o código para desenvolver essa parte. Geralmente, não saímos desenvolvendo a página inteira de uma vez só, sem parar. Às vezes eu tenho essa impressão. "Ah, vou sair codando essa página do Spotify." Aí escreve, escreve,

escreve e sai tudo. Não é assim. Nem no dia a dia é assim. Não. Vocês trabalham criando componentes, partes menores que compõem toda uma aplicação. Sim, faz todo sentido. Tanto que quando vamos desenvolver uma feature, que chamamos de implementar algo novo no trabalho, sempre quebramos em muitos pequenos pedaços. Porque entregar pequenas coisas faz muito sentido. Porque no final será um grande emaranhado do que você fazer tudo e se perder no meio do caminho. Então é sempre importante quebrar muitos pequenos pedaços, que isso será mais fácil para você depois. Vamos fazer só a parte do lado,

então? Vamos fazer só aquela parte do lado. Então, primeiro, vamos colocar uma div. Se quiser até tirar essa parte do lado com "Ctrl + B". De novo, "Cmd + B. Aí tem um negócio legal. Podemos colocar já alguns atributos na hora de escrever a div ou qualquer outro elemento HTML. Por exemplo, já vamos colocar uma classe para ficar mais fácil para já colocar no CSS depois. Então, podemos fazer o seguinte, eu vou escrever div, que é o elemento que eu quero, vou dar um ponto e colocar o nome da classe, que eu vou chamar de

sidebar. Então, ele já criou o div class sidebar. Essa classe vamos usar para colocar estilo na nossa sidebar. Dentro dessa div sidebar... Vamos colocar uma tag nav, para explorá-la também? Vamos colocar uma tag nav. A tag nav é usada para fazer menus e ela veio no HTML5. Até iremos trazer de novo esses conceitos do HTML5, porque ele trouxe bastante semântica para as tags HTML, Coisa que não tínhamos antes. Ao invés de criar uma div e colocar a classe nav, já temos a div nav que já tem aquele peso semântico. E o que é o peso

semântico? O que é semântica? É aquela tag dizer exatamente qual é a função dela. Então, eu não preciso forçar que um link vire um botão. Eu já tenho uma tag de botão para isso. Então ele já vai imprimir esse valor quando ele for declarado. Então, temos uma tag nav. E aí, dentro dela, vamos começar a compor os menus. Podemos colocar um logo nela? Podemos colocar uma imagem. Vamos fazer uma div primeiro, para dar uma englobada, um abraço. E aí, às vezes, vamos usar bastante div para ficar mais fácil de posicionar e organizar o nosso código

e tudo mais. Podemos seguir com um "a" agora, que vai fazer o link. Se você clicar nessa imagem, ela pode te direcionar para outro lugar. Então usamos um "a" para fazer um gancho. Isso. Só "a" não deu certo aqui. Vamos colocar "<a". E, dentro desse "a", colocamos a imagem de fato. Isso. Vamos colocar um href, que é um atributo importante no "a". Não vamos colocar nada agora. E aí, a tag já fechou. Dentro dela, vamos colocar a imagem, então, img. E aí quando eu digitei img, ele já trouxe src e alt. No src, vamos colocar

qual é o link da imagem. No alt, vamos falar qual é o texto alternativo para aquela imagem, que também é importante para acessibilidade. Vamos pegar a pasta assets, que já deixamos separada. E vamos jogar essa pasta, eu dei um "Ctrl+C", e eu vou pegar essa pasta e jogar aqui. E aí ele vai perguntar se eu quero, beleza. Vamos deixar disponível. Vamos deixar esses arquivos disponíveis para você brincar aí em casa. E uma coisa que o Gui falou, de não precisar sair criando tudo, Um monte de pasta. Agora criamos essa pasta de assets porque vimos a

necessidade de ter que pegar essa imagem de algum lugar. Então é por isso que ela foi criada agora. Exatamente. Já temos essa pasta de assets e já temos alguns ícones, algumas coisas que vamos precisar para montar a tela. Então já temos o logo Spotify, que está até com a imagem vazada, sem fundo, que aí ele vai se adequar. Vamos chamar essa imagem lá. Colocamos aqui ./assets/icons/logo-spotify. O ponto e a barra servem para sair desse arquivo e entrar em outra pasta, porque estão em pastas diferentes. Então, compusemos o caminho. E, no texto alternativo, vamos colocar "Logo

do Spotify". Ok. Inclusive, depois podemos até quebrar esse caminho da imagem só para ler o texto alternativo. - Sim, podemos. - Acho que é legal. Vamos voltar no navegador. Ficou bem bonito, olha. O que você achou, Fernanda? - Eu achei que está um pouco grande. - Tá um pouco demais. Talvez esteja um pouco grande. Aí vamos começar a brincar para redimensionar essa imagem, e também para criar o resto do conteúdo. Eu tenho uma dúvida. Quando vocês estão codando, geralmente, qual ação vocês tomam? Por exemplo, nesse caso, eu coloquei uma imagem, que ficou grande, estourou. Vocês

já arrumam? Ou vocês colocam tudo para depois arrumar aquele componente inteiro de uma vez? Olha, eu acho que depende. Às vezes, eu gosto de arrumar logo a imagem, porque me irrita um pouco ver a imagem gigantesca. Ou não ver. Faz só o HTML sem ver. E aí depois vai arrumando. Eu faço tudo primeiro e depois eu tomo um susto olhando. "Meu Deus. Quanta coisa para arrumar." Aí eu arrumo tudo de uma vez. Vamos fazer tudo e arrumamos depois. Pode ser? Já vimos que deu certo. Então está tudo bem. Vamos quebrar o caminho da imagem, só

para ler o texto alternativo? É só tirar o png. Com essa alteração, ele não vai achar a imagem. E aí trocamos lá para ver. Olha, quebrou a imagem, ele não achou. E aí ele vai mostrar "Logo do Spotify". O texto alternativo é importante também por isso. Porque às vezes você não consegue carregar a imagem. Às vezes a página está muito pesada. Então, até fazer esse carregamento, tem o nome "Logo do Spotify". Vamos nesse modo Fer de codar. Vamos fazer toda a estrutura e depois vamos arrumando por etapas. Uma dúvida. No projeto mesmo tem aquele H1

escrito Spotify ou não? No projeto não tem. Então, se quiserem tirar a linha 10, foi só de teste para ver se dava tudo certo. Só para ver se estava funcionando. Deixa só o sidebar com o link mesmo. Vamos matar aqui. - Legal. - Ok. Então já não temos mais. Então, vamos olhar na tela de novo, na nossa página pronta. Já temos aqui o logo, quase do tamanho que está aparecendo lá. - A expectativa e a realidade. - Quase daquele tamanho. E aí, temos mais alguns itens no menu de navegação. Vamos ver aqui. Já temos o

logo Temos também uma lista, na verdade, uma lista sem numeração. Dentro dela, vamos ter "Início" e "Buscar". Vamos fazer isso lá também, dentro do nosso código. Vamos colocar uma div só para separar. E aí aqui vamos colocar a UL. E aí tem um truque legal. Quando estivermos fazendo uma lista no VS Code, podemos fazer assim: Eu tenho uma UL, e, dentro dessa u, vou ter duas LI. Então eu posso colocar LI vezes 2. E aí, dou um "Enter" e ele já vai criar a estrutura bonitinha para a gente. Aí, a primeira LI é "Início" e

a segunda é "Buscar". Então, beleza. Já podemos dar uma olhada lá. - Não, não vamos olhar não. - Vai te irritar! Vai me irritar, vai me estressar e não vou olhar não. Então, já temos aqui a UL. E, dentro dessa UL, vamos ter um link, um "a" com "href". Então, vamos voltar lá e... - E também tem o ícone. - E tem um ícone bonitinho. Vamos fazer o seguinte, nós tiramos esse Início e digitamos "a href". Já digitou o href para mim. Não vou colocar href nenhuma agora. E ele tem um Início aqui. Na verdade...

E se colocássemos dentro desse "a" um span? Para colocar o ícone. Sim, porque aí vai facilitar para mostrar o ícone. Boa. Vamos criar um span com o nome Início. E aí, antes desse span com o nome Início, criamos outro span, que é o que vai receber aquela lupa. E vamos fazer a magia acontecer já. Vamos voltar na tela da expectativa e vamos olhar o que está aparecendo. Tem uma casinha pequena. E aí temos uma classe, não tem nada escrito. Como fazemos isso aqui acontecer? Vamos usar uma ferramenta bem legal, que chama Font Awesome. Ela vai

oferecer alguns itens que são gratuitos. E aí, conseguimos usar isso no nosso dia a dia para ícones, para fontes, para esses estilos CSS. Vamos clicar em "Start for Free" e vamos nos ícones para procurar o ícone de Home, que é o que está aparecendo lá. Cheguei em alguns ícones de Home. Alguns que são pagos, outros são gratuitos. Vamos usar esse pequeno aqui, esse primeiro que é o gratuito. Perceba que não estamos escrevendo nada demais. Só estamos colocando classes. E como que isso vai funcionar? Quando declararmos essa classe, vamos declarar primeiro também a CDN, que é

onde o CSS desse ícone está hospedado, vamos dizer assim. E aí, declaramos a classe, e isso estará importado no nosso código. Vamos fazer isso com calma. Então, vamos fazer um import de uma CDN para usar os ícones que vamos mostrar na tela. Esses links da CDN estarão na descrição. Já importamos. São só folhas de estilo que não estarão dentro do projeto, elas vão estar numa CDN e só vamos fazer o import. E aí para aparecer o ícone na tela, vamos só usar uma classe, que é a classe "fa fa-home". São essas classes que ele vai

usar para compor aquele ícone. Então se olharmos na tela, já está aparecendo o ícone do início com a casinha que queríamos. O próximo será a lupa. Esse aqui será o início, e o próximo será a nossa lupa. Vamos no buscar. Vai ser a mesma estrutura. Um span para o ícone e um span para o texto. Podemos, inclusive, até copiar e colar isso aqui. Vamos pegar essa tag link inteira e vamos duplicar. E aí, só fazemos uma troca. Não será mais fa-home e sim fa-search, que é a classe da lupa. E o texto será "Buscar". Então,

se voltarmos na página para olhar, já temos uma lupa também do buscar. Então, a nossa página já está começando a tomar forma. Mas percebe que temos um quadrado tanto com a imagem quanto com os itens de menu. Vamos ver como isso está lá no inspecionar. Vamos olhar aqui. Ele tem essa nav, e uma classe sidebar__navigation. Vamos colocar essa classe lá e vamos ver, inclusive, como podemos colocar, o que já temos de estilo. Isso é muito legal, porque conseguimos ver o estilo no DevTools e podemos até brincar, por exemplo, vou tirar esse background-color para ver como

fica, Colocar um border-radius maior para ver como vai ficando. Então, dá para brincar no DevTools que não vai afetar nada no código. Então, temos essa sidebar__navigation e os estilos dela. Vamos colocar isso no nosso código. Vamos voltar no VS Code. Temos essa sidebar e essa aqui vai ter uma classe sidebar__navigation. sidebar__navigation. Demos o nome para nossa classe e vamos colocar algumas coisas para estilizar essa sidebar. Primeiro, vou copiar essa classe, para não correr o risco de digitar errado. E vamos colocar .sidebar__navigation. Vamos colocar primeiro a cor do background, que será um cinza um pouco diferente.

Vamos no background-color e vamos colocar um cinza, #121212. Ele também tem uma borda mais arredondada. Então podemos colocar um border-radius de 8px que é para fazer a borda. É 8 mesmo? É 8px. E vamos ter também... Podemos colocar um padding para dar um espaço. O padding vai ter essa função de dar espaçamento. Não é a margem, é o espaçamento do elemento em relação a ele mesmo. - Vamos colocar o padding de? - Vamos colocar um de 16 de altura. Na lateral acho que não precisa, vamos colocar zero, zero também para baixo e 16 para esquerda.

O padding, o que estamos falando, é 16px. O padding sempre vai ter essa ordem. Padding e margem também. Quando declaramos, primeiro é o de cima e o direito. - Tenho problema com esquerda e direita. - Eu também. Quando estou dirigindo, a pessoa fala "vira a direita". - Eu falo "o que que é direita?" - A outra direita. Tenho que lembrar do mouse, "Clica com botão direito". Eu uso relógio para diferenciar, não é para saber a hora. Então, primeiro em cima, depois direita, depois embaixo, depois esquerda. - É só pensar em um relógio. - Ah, no

sentido horário. O sentido eu já não sei qual é. - Eu também não, eu acho. - Eu sei que é um sentido ai. Mas é só pensar em um relógio. Então, vamos olhar na expectativa. Temos aqui essa sidebar menor, já comportada na página. Aqui, temos ela toda quebrada, triste. - Em azul embaixo. - Em azul ainda. Está lamentável. Antes de mexer, só alteramos a sidebar__navigation. Mas ela terá uma div que abraça ela, que é a sidebar. Vamos precisar ver o estilo dela também. Podemos até olhar aqui. Ele tem um position, tem um left. Vamos colocar

isso lá no código. Vamos lá. Vamos começar a maquiar o nosso esqueleto. Sim. Primeiro, vamos colocar .sidebar, que é a classe, o container. E o que vamos fazer? Primeiro, ele tem um position fixed. O position fixed, é importante para dizer que isso tem que ser fixo. Haja o que houver, isso estará fixo na página. Então, tem um position: fixed. E também temos um top: 0. Para ele ficar sempre no top também. Para ele ficar grudado no topo. Um left:0 também, para ficar sempre à esquerda. Sim. Às vezes, vejo muita gente confundir o top com margin-top,

o left com margin-left. Essas propriedades, top, left, right, bottom, sempre vão trabalhar com esses posicionamentos que não são o padrão. O padrão é o estático. Então, top, left, bottom e right, vamos sempre trabalhar eles junto com esse posicionamento fixed Ou posicionamento absoluto, relativo e tudo mais. Então, aqui, vamos colocar um position left, estamos falando que a posição dele é zero na esquerda. Não queremos nenhum espaço na esquerda. Podemos colocar um bottom:0 também, para ficar grudado lá embaixo. E aqui, ele vai ter uma cor? Vamos colocar uma cor nele? Na verdade, o sidebar não tem a

cor. Ele está pegando a cor do fundo. A cor vai estar mesmo no navigation. Vamos deixar a cor dele bonitinha aqui. Na linha 7, tem um ponto e vírgula também. Ah, faltou um ponto e vírgula. A Fernanda falou que ela quebrou o site com ponto e vírgula, E estamos quebrando aqui também. E vamos ter também um padding, que dará o espaçamento. Na outra declaração de padding que fizemos, colocamos quatro valores. Nessa, só vamos colocar um valor. Isso quer dizer que em todos os eixos, em cima, do lado, embaixo, no meio, vai ter um espaçamento de

12 pixels. Então, vamos ver, vamos salvar. Podemos colocar um tamanho para ele também. - Pode. Uma largura? - Uma largura. Sim, porque ele precisa ocupar uma parte da tela. Então, podemos colocar uma largura, por exemplo, de 300px. 300 pixels. Vamos ver como é que está ficando. Olha, poderia estar assim. Mas ele está começando a tomar forma ainda. Olha que interessante. Se voltar, dá para perceber que ele ficou com a barra. Ele está com essa parte vazada. Porque a imagem é muito maior. Vale a pena arrumar essa imagem? Vamos arrumar essa imagem. Vamos arrumar, porque agora

ela está me irritando. Eu estou ficando extremamente... Não, estou brincando. Precisamos arrumar aquela imagem. Ela já está toda quebrada. Vamos lá. Primeiro, vamos colocar uma classe nessa div, para podermos tratar o estilo dela. Vamos colocar um nome "logo". E, vamos fechar essa div, que é para ela englobar só essa parte do logo e fica mais fácil para organizar o CSS. Na linha 24, acho que é logo. Faltou a letra "o". Ah, é verdade. Na verdade, o que você fez é colocar a imagem dentro de uma div. para que todas as manipulações alterem só ela, Não

o resto das outras informações. Exatamente. Isso é bem legal, porque vamos dividindo a tela em pequenos pedaços, como a Fernanda tinha falado, e vamos trabalhando naquela porção para depois fazer tudo funcionar. Então, já temos a imagem, tem essa classe logo. - É só criar o CSS? - Agora é só criar o CSS. Primeiro, vamos declarar aqui a div logo. A div logo tem algo só dela? Podemos colocar o img para manipular o tamanho da imagem. Pode. E aqui, o que estamos falando? A tag imagem que está dentro do elemento que tem a classe logo. Porque

se você coloca só img, todas as outras imagens da página inteira serão alteradas. Certo. Estamos sempre falando o que está dentro do que. Se colocássemos, por exemplo, logo vírgula imagem. estamos falando que o estilo que está dentro é para o logo e para imagem. Então, não iria funcionar aqui. Precisamos tirar e falar "Isso que está dentro disso." Podemos colocar na imagem... Um tamanho 80px? - De largura? - De largura. - Sabe como eu memorizei o width? - Como? Porque o width é meio deitadinho. O texto. Sempre que falar width não vou confundir com a altura.

Porque ele é deitadinho, o w. Você acredita? E o high, pelo "h" ser alto, é sempre a altura. É uma boa analogia também. Eu tenho algumas analogias, que eu não ia memorizar, se fosse... Isso ajuda bastante. - Vamos ver? - Nossa! Agora eu já sei uma coisa, hein? Eu acho que podemos alterar o text-decoration do início e da busca. Sim, porque está aparecendo aquela bolinha do marcador. Já estamos começando a ver a página tomando forma. Já está menor a imagem. Já tem os links também, essa parte menor com um background mais claro. Mas ainda tem

bastante coisa para fazer. E aí, tem até algo que é bom a gente tirar. Se a gente olhar aqui, tem uma bolinha do marcador da LI, que é automático. E se déssemos um reset de CSS? Por que, o que acontece, você está criando sua página HTML, ela já vem com os estilos padrões. Com esse arquivo de reset, ou até mesmo link, que você comentou. Importamos esse reset para dentro do projeto e ele meio que dá uma limpada. Ele varre todos os estilos pré-prontos e deixa a página limpa para a gente. Iinclusive, esse estilo pode mudar

de navegador para navegador. Sim. Então, é uma boa prática falar "CSS comece do zero." Sim, por isso, vamos pegar esse código do reset CSS e vamos criar o arquivo reset.css. E vamos jogar o código dele aqui. Não vamos escrever esse código à mão, pois é humanamente impossível. - Não tem como escrevermos... - De cabeça. É, não vai dar... Chamada oral da faculdade. Mas, podemos pegar isso no Google ou podemos até pedir para uma IA, "Gera um reset CSS para mim". Aí, ela gera todo o conteúdo desse arquivo e só importamos no código. Acho que é

só fazer o link desse CSS agora no HTML? Sim. Eu imagino que deve ter um ponto importante, a ordem que pedimos. Exato, a ordem do CSS é bem importante, porque esses CSS vão ser sobrescritos. Então, se eu coloco primeiro o link X e depois coloco outro link de CSS, sempre vai prevalecer o último. Vamos supor que tenho uma classe ou um estilo aplicado para uma imagem. Embaixo eu tenho outra classe para mesma imagem, mas diferente. Ele vai pegar só o segundo, porque o segundo vai sobrescrever o primeiro. Então, vamos colocar o reset.css depois ou antes?

Antes. Acho que pode ser depois do title, assim garantimos que todos os outros, tanto Font Awesome como do styles... Mas ele tem que ser carregado antes do styles.css. Então já importamos o reset.css. Vamos ver na tela o que aconteceu. Olha aí! Vamos voltar no styles.css. Já colocamos algumas coisas da .sidebar__navigation. Aqui colocamos o estilo da div com a classe logo direto na imagem. Antes disso, precisamos colocar o estilo da própria div logo. Aqui só colocamos da imagem. Nesse logo, podemos colocar um background. Vamos colocar um background. Vamos colocar uma hash de cor #121212. É um

cinza também, um pouco diferente, outro tom. Vamos usar um display: flex agora. Entraremos no detalhe do display: flex mais para frente. Vamos colocar ele agora só para ver como vamos montá-lo. Podemos colocar uma borda também mais arredondada. Vamos colocar uma borda de 8px? Será border-radius: 8px para ficar com a borda arredondada. E vamos colocar o padding igual ao navigation, 16px em cima. Melhor copiar e colar para facilitar a nossa vida. Copiar e colar não tem nada de mais, ok? Inclusive façam, pois adianta bastante. Então, já temos a tag logo. Vocês querem dar uma olhada? Vamos

dar uma olhada em como ele está ficando. Já mudou um pouco parece. Ele já está com a borda meio arredondada mesmo. Já deu uma arredondada. Já pegou o padding aqui. Então já tem algumas coisas. Vamos voltar lá. Temos a classe logo e a imagem já fizemos. Já tem algumas coisas. Está faltando organizar essa parte da navegação, do nav com UL, LI e tudo mais. Vamos voltar no nosso CSS. e vamos colocar... Para organizar melhor, podemos até colocar também .sidebar .logo. Então, estou falando que o elemento que está com a classe .sidebar, dentro dele tem um

elemento com a classe .logo que vamos alterar. Na verdade, sidebar__navigation que tem a classe logo. Vamos colocar .sidebar__navigation .logo. Agora vamos ver como é que ficou. Já colocamos algumas propriedades. Então, se olharmos aqui, já começou a dar mais forma. Já temos padding, já demos mais de estilo. Vamos voltar lá, porque já trabalhamos a imagem, mas precisamos alterar agora o nav com as UL e itens de menu. Vamos voltar no código. Então, vamos colocar o .sidebar nav UL. Vamos ver o que precisa ter nessa UL. Vamos colocar um margin-top de 20px. Para ele não ficar grudado

na imagem. Exato, para não ficar grudado na imagem, está certo. 20px. Podemos dar um padding nele também para ele se ajustar dentro da caixinha. Sim. Que tamanho de padding pode ser? Zero, no topo não precisamos. Podemos dar um 20 de direita. 10 para baixo e 20 para esquerda. Eu gostei dessa associação. 20 para direita e esquerda. Então ficou 0, 20, 10 e 20. - Isso. - Certo? Então, beleza. Poderiamos, por exemplo, fazer padding-top, padding-right... Mas vocês são raízes, então já faz direto. Em vez de declarar quatro... - Vocês fazem isso no mundo real? - Sim.

- Vocês usam um código assim? - Sim. Vamos no mundo real, gente. Eu nunca vi, valendo mesmo, tão fragmentado. - Acho que nem o margin talvez. - Não, nem o margin. Só coloca margin 0, 0, 0, 20. Exato. Quando é tão específico, eu prefiro deixar margin-top. Legal. O que mais podemos colocar? Eu acho que na UL já está ok. Podemos especificar agora as LIs que estão dentro das ULs. Olha, já ficou melhor. Agora vamos para o elemento. Para cada um desses pontos. A LI vai ter bastante coisa para a gente trabalhar. Sidebar, a nav que

está dentro do sidebar, a UL que está dentro da nav e a LI que está dentro da UL. Primeiro, precisamos colocar uma cor. Aquela cor está bem lamentável. Vamos colocar a cor branca para o texto. Podemos colocar um #b3b3b3? Podemos colocar. Eu achei que era branco. É um tom diferente. Então será #b3b3b3. Já fica até bonita aqui a cor. Podemos colocar também o text-decoration: none. Na verdade, nem precisaríamos mais dele, porque já colocamos isso no reset. Mas vamos colocar aqui também, só para garantir. Para não aparecer a bola lá. E também... Vamos colocar um peso

nessa fonte? Peso é quando você a coloca fina, em itálico ou em bold. Então, esse é o peso que a gente dá. Podemos dar um peso de 600. Font-weight. - Está certo? - Está certo. O final "ght" me confunde. Vamos deixar font-weight: 600. Vamos colocar um tamanho de fonte. Vamos de 14. Inclusive, os ícones lá, eles são tratados como fonte também. O tamanho que colocarmos para o texto vai refletir no ícone. Então, o texto será 14px. Vamos ver agora. E esses valores não foram da nossa cabeça. Pegamos lá, inspecionando o site do Spotify. Fomos vendo,

igual estamos fazendo com o nosso real oficial. Exatamente. Só atualizar. -Hora da verdade? -Vamos lá. Não pegou. Vamos ver o que está faltando. Ah, já sei o que aconteceu. O que será que aconteceu? Lá no CSS, temos que colocar no A. Exato. Nós colocamos na LI. Fezendo ao vivo, vimos que não pegou o estilo que a gente gostaria. E isso é super normal no dia a dia. Estamos lá no trabalho, vai mostrar para o coordenador. Olha que legal... e não funciona. Aí a gente fica, "poxa!". É só voltar no código, olhar com calma. Colocar no

lugar certo que tudo vai funcionar. Não é um erro gigante que você vai perder o emprego. -É super normal. -É a vida como ela é. Inclusive, já descobrimos o que aconteceu. Já descobrimos, foi porque aplicamos o estilo na LI e deveríamos colocar no link, na tag a. Então, se a gente salvar, vamos ver como fica. Nossa! E aí está faltando um ponto também. Como colocamos o estilo no link agora, falta colocar o estilo da LI. Já colocamos da UL e do A, agora está faltando da LI. Vamos vir aqui e escrever .sidebar ul li. E

aí, colocamos o estilo dela. Precisa ser no sidebar nav ul li? Não precisa, necessariamente. Por exemplo, se tivesse uma classe no LI, poderíamos colocar direto, enfim. Mas aqui estamos especificando que queremos que aplique esse estilo da LI dentro desse sidebar. São formas diferentes de fazer esse CSS. Podemos colocar um padding para ela, porque ela está muito junta. Qual medida do padding que vamos colocar? Vamos colocar um 10px? Será 10px e 0px. É a primeira vez que usamos só dois valores. Já usamos um, usamos quatro, agora usamos dois. Quando colocamos dois, o primeiro é em cima

e embaixo. Top e bottom. E o segundo é right e left. Esquerda e direita. É isso. Não faço ideia o que é direita e esquerda. Estou confiando em vocês. A gente resolve aqui o que é. E quando colocamos um só, são todos os eixos. Vamos ver como ficou? - Olha aí, hein? - Lindo! Agora ficou bom. O único detalhe que precisamos arrumar agora é a fonte. Se a gente olhar na nossa expectativa, a fonte está diferente. Tem outro tipo de fonte. Vamos alterar isso lá no código. Aqui no link mesmo, na tag a, podemos usar

a font-family. Vamos colocar nessa font-family a fonte que está lá. A DM Sans. E colocamos um sans-serif. Ponto e vírgula. Vamos voltar na tela. Olha aí, hein? Bonito. Agora temos essa navegação do jeito que a gente queria mesmo. Vamos deixar aberto para, se você quiser alterar a cor, fazer um Spotify com a cor do seu time do coração, pode fazer também. Se quiser testar outras possibilidades. Ou até por curiosidade mesmo, de fazer um Spotify muito diferente. Colocar a aba do outro lado, algo desse tipo. Pode fazer também! Pessoal, lembrando que, para que você tenha o

seu certificado, é necessário que você assista todas as aulas da Imersão. Além disso, caso tenha alguma dúvida... "Puxa, o que essa linha do CSS faz?" Também temos a inteligência artificial da Alura, a Luri. Posso pegar aquela linha, copiar e falar: "Luri, o que essa linha faz?" Ela explica, pode testar com outros exemplos também. Lembrando que não tem necessidade de decorar o código. Nenhuma necessidade, gente. Até porque precisamos ter o nosso cérebro muito tranquilo, sem carregar um acúmulo, para aprender coisas novas. Então decorar tags, decorar outras propriedades que você pode pesquisar, é a melhor ideia. Essa

primeira aula foi uma aula de revisão, onde mostramos o passo a passo, fazendo com muita calma. Nas próximas aulas vamos mais rápido, direto ao ponto, criando mais elementos, e fazendo esse Spotify nascer da forma que estamos esperando. Inclusive, teremos um desafio também na Imersão, que é uma tradição. Acaba a aula e falamos: "que legal, consegui fazer!" Aí vem alguém e fala: "vai ter um desafio". A pessoa já fica na dúvida, mas é importante, faz parte do nosso dia a dia. Vamos deixar de desafio, para nossa próxima aula, fazer essa parte do Sua Biblioteca. Não é

para colar o código. É só para ir brincando, porque se ver o código não tem graça. Vou deixar esse desafio para gente ver na próxima aula. E não desligue, porque você ficará com conteúdo extra sobre inteligência artificial. Te vejo amanhã na segunda aula! Boas-vindas ao conteúdo extra dessa nossa primeira aula da imersão de front-end na Alura. Eu sou Fabrício Carraro e estarei sempre no final de cada aula falando sobre inteligência artificial, dando um pouco de conteúdo extra para vocês sobre IA, sobre como implementar IA no seu dia a dia com uma pessoa desenvolvedora ou uma

pessoa que utilizará da tecnologia, do código no seu dia a dia de trabalho, no dia a dia pessoal mesmo. Hoje eu quero falar um pouco sobre a Luri. Você que fez a imersão, essa primeira aula da imersão, com certeza já deve ter notado esse símbolo, esse logo do lado inferior direito da sua tela, Enquanto você estava assistindo às aulas da imersão e essa é a Luri. Para dar o exemplo inicial, eu vou pegar um curso, o curso que é o de nivelamento, que vocês, imagino que muitos tenham feito antes de começar as aulas da imersão

e essa é a última aula, a aula 5 desse curso de HTML e CSS, que como eu falei é o curso de nivelamento para essa imersão. Você vê que é um vídeo curto, o último vídeo disponível realmente nessa aula, nesse curso inteiro e no final, um vídeo de três minutos, já estamos no meio dele e você vê um monte de coisa de código, você vê HEAD, LINK, HEADER, MAIN, STRONG, H1, P, HREF... E quando está fazendo uma coisa pode ser que você se confunda. Claro que essas são coisas talvez mais iniciantes, mas servem também para

cursos mais avançados, para níveis mais avançados de programação, você pode precisar de uma ajuda e é para isso que a Luri serve. Então, você vai só clicar nela aqui do lado e você pode simplesmente selecionar alguma das opções que ela já te oferece. Então, explique a aula usando analogias, faça um resumo da aula, eu vou clicar inicialmente nesse "faça resumo da aula" e ela já começa a cuspir, a responder para a gente. "Nessa aula aprendemos a usar o CSS para estilizar a tag STRONG, mudar a cor, primeiro definimos uma cor..." Enfim, a Luri, a nossa

inteligência artificial, ela está treinada no conteúdo de cada aula, então ela sabe se você pergunta alguma coisa específica, o que era aquela tag depois do FOR ou depois da H1, ela vai saber qual é, porque ela foi treinada, ela sabe o contexto exato dessa aula, desse curso de HTML e CSS. Outra coisa. Imagina que você... "Qual era a tag para marcar links de sites?" Você pode perguntar. Mesmo sem o ponto de interrogação, ela vai entender você. Geralmente é bom colocar, mas não precisa. "A tag utilizada para criar links para outros sites é a A." A

letra A com um abre e fecha, antes e depois dela. "Você precisa utilizar o atributo HREF dentro dessa tag para especificar o endereço do site." Tudo certo. Então é muito fácil, é literalmente como se você estivesse falando com qualquer um desses modelos de linguagem mais conhecidos, mas você está dentro da plataforma da Alura e está treinado específico para os cursos que você vai fazer no futuro na Alura. Um outro exemplo que eu quero dar está no final dessa aula. No finalzinho, você pode ter o projeto final do curso e você pode baixar o arquivo .zip

com todos os conteúdos que foram passados, que foram ensinados nessa aula, Ou você pode simplesmente acessá-los no GitHub. Eu cliquei aqui e já deixei até aberto, se você não sabe como é, tem três arquivos, uma imagem em PNG, um index.html e um style.css. Eu abri o meu index e você vê exatamente o mesmo código que havia na aula, vamos voltar lá, estava em dois minutos e tanto. Olha, é exatamente o mesmo código. Abrindo a Luri, você pode simplesmente copiar esse código inteiro dar um "Ctrl+C" e "Ctrl+V" e pergunta: "me explique esse código inteiro, linha a

linha, como se eu tivesse cinco anos de idade." Ou seja, ele vai passar o código literalmente inteiro, qualquer dúvida que você tiver, será respondida. Então, terminou de responder já, a gente começa a ler: "DOCTYPE é a placa na entrada da nossa casa". Lembrando que eu pedi para ele responder como se eu fosse uma criança de cinco anos de idade, então ele está tentando simplificar o máximo possível. "Vamos lá, pequeno desenvolvedor, pequena desenvolvedora, imagina que estamos construindo uma casa digital". Por isso que ele deu esse exemplo aqui. "O DOCTYPE é a placa na entrada da nossa

casa, dizendo que é uma casa digital feita com HTML, a tag HTML é a porta de entrada da casa e o lang=pt-BR é uma plaquinha dizendo que falamos português do Brasil aqui dentro". Enfim, ele vai explicando literalmente, linha a linha, esse código como se você ou eu fôssemos crianças de cinco anos de idade, então com detalhe bem específico. Se você quisesse outro tipo de explicação, era só falar "me explica de outra maneira" e ela responderia sem problema nenhum. E uma última coisa nesse conteúdo extra, que ele é mais básico, claro, na nossa primeira aula, quero

que vocês fiquem tranquilos e tranquilas, para continuar nos próximos dias, utilizando a Luri dentro da plataforma da imersão, ela também está disponível lá, não só nos cursos. O Gui, em algum momento da aula, falou que precisava gerar um arquivo reset.css, Para limpar tudo do navegador, não ficar com nada pré-definido. Poderíamos simplesmente pedir para Luri: "Luri, você poderia gerar para mim um arquivo reset.css confiável". Talvez seja a melhor palavra, que vai se livrar confiavelmente de tudo que não é importante. E já começou aqui: "Posso te ajudar com isso". Ela te explica o que é o reset.css,

fala do normalize que poderia ser também. Enfim, você pode simplesmente clicar em "Copiar código" que já vai para sua área de transferência, é só dar um colar, um "Ctrl+V" no seu editor de texto, na sua IDE, que você vai conseguir seguir daí em diante sem problema nenhum. Enfim, espero que vocês tenham aproveitado esse conteúdo extra, Mais tranquilo, mais simples, mas nas próximas aulas eu também vou estar sempre no final, com algum conteúdo interessante extra sobre inteligência artificial. Espero você na aula 2, amanhã pela manhã.