[Imersão Front-end] Estilo Avançado e Posicionamento: Transformando Layouts

Quero te dar boas-vindas à segunda aula da Imersão Front-end, estou aqui com elas, Fernanda e Mayara, como é que vocês estão? Maravilhoso! E aí, estão ansiosas pra segunda aula?

Bastante! Vamos lá! Beleza!

Na primeira aula a gente criou aquele nosso primeiro componente, aplicou todos os estilos, fez a marcação com HTML, o que vamos ver hoje? Vamos ver agora, Gui! Então é isso aqui que o Gui acabou de falar, que a gente criou, agora vamos ver no modo expectativa, então vamos trabalhar todo esse bloco do menu lateral.

Bacana! Lembrando que na Imersão temos uma comunidade no Discord para você se conectar com outras pessoas também, também temos a nossa inteligência artificial para ajudar, caso a gente tenha alguma dúvida no código ou um resultado diferente do que a gente estava esperando, podemos também perguntar para a Luri. Vamos começar!

Então essa segunda parte, visualmente, parece com o que vimos na primeira aula, faz sentido? Faz todo sentido! Então temos o ícone, tem o texto, um sinalzinho de mais ali embaixo, cria sua playlist e esses outros botões.

Vamos lá, meninas, é com vocês! Vamos voltar aqui para o código, primeiramente eu só queria fazer uma correção aqui, que dentro da ul, fora dela na verdade. A gente criou uma div sem classe, então não precisamos dessa div, já vamos tirar ela aqui do início do código e do fechamento dela, aí você pode fazer isso em casa também, pra ficarmos com o código igual, vocês aí e a gente aqui.

Vamos começar? Vamos! Então bora lá, mas só me ajuda numa coisa, a gente faz esse outro bloco dentro do nav?

Não, agora vamos criar uma outra div aí, que é onde vamos trabalhar todo aquele bloco lá, que cria sua playlist de biblioteca. Então podemos declarar uma div aí e aí podemos colocar a classe dela como library, só pra gente separar esse código. Beleza, perfeito!

Dentro dessa div podemos criar outra, que seria a library content, que é a parte do conteúdo. Podemos deixar uma dica para vocês pesquisarem depois sobre o BEM CSS, que é uma metodologia de organização de CSS, de escrita de CSS, e aí ele tem essa premissa de organizar pelo bloco, o que modifica, então ali a gente colocou o content, library__content, porque ele está dentro do library, então se a gente tivesse algo dentro do content, seria library__content__x, por exemplo. Fizemos na primeira aula também.

Já estava usando esse padrão. A gente não fez isso na primeira aula não. Ah sim, a gente já estava usando o padrão, mas a gente não falou, é verdade, sim.

É por costume. É muito usado no dia-a-dia mesmo. Sim, às vezes a gente usa e nem percebe as coisas.

Vamos lá. E aí dentro dessa div, podemos colocar um botão, que vai ser o botão da biblioteca. Sua biblioteca.

Vamos colocar uma classe nela aqui. Vamos colocar a classe library__button. Parecido com o de cima.

Dentro desse button, vamos colocar dois spans? Vamos colocar dois spans, que vai ser um para aquele ícone da biblioteca e o outro para o texto mesmo, "sua biblioteca" que aparece lá. E aqui do icone, vamos usar o mesmo padrão que a gente usou lá em cima.

Isso, como a gente já importou na outra aula. O font-awesome, mas não precisamos mexer. Daqui para frente é só usar as classes dele mesmo.

E estamos indo um pouquinho mais rápido nesse nome das classes, porque a gente já sabe quais são os ícones. Mas caso você queira colocar um outro ícone, pode também. É, é só ir brincando e acessar a documentação também que está disponível com todos os ícones e tudo mais.

Podemos até deixar no link aqui também. Boa. E o segundo span só com o texto mesmo?

Só com o texto. Agora pode parecer estranho, mas vamos criar um outro span do lado de fora do button, porque ele vai ser aquele botãozinho de mais que vocês veem lá no projeto expectativa. Ah, legal.

Vamos colocar a classe aqui também. Aqui é o mesmo, fa-plus, que é o nome da tag. Perfeito.

Então, temos o primeiro bloco aqui. Eu vou fechar o nav aqui só para ficar organizadinho. Então, isso aqui é o primeiro bloco, esse é o segundo bloco.

Boa. Então, aí essa parte a gente fechou. Vamos seguir no HTML ou você quer ir para o CSS agora?

Vamos para o HTML para deixar aquele friozinho na barriga, depois a gente mostra tudo de uma vez. É, a gente vê tudo quebrado, depois a gente arruma. Então, dentro da library mesmo, mas fora da content.

Podemos criar uma section aí, uma seção, só pra gente brincar com as tags do HTML5. A section vai ser uma seção ali do código onde vamos trabalhar porções diferentes. Vamos usar essa tag semântica.

É como se todo o conteúdo fosse relacionado ao mesmo assunto. Exato. Essa section vai ser só essa parte de playlists.

De criar uma playlist e tudo mais. É como se fosse uma casa. A casa é a div e as sections são os cômodos.

Isso, Fernanda é muito boa com as analogias. É, muito legal. Vamos colocar a section playlist aí, o nome dessa div, só pra gente brincar com o estilo dela depois.

Perfeito, dentro desse nosso cômodo. Podemos colocar uma div que vai englobar essa parte dos textos. As duas frases que vamos ter, mais o botão.

Podemos colocar a section playlist-content. Vamos dar um nome aqui para classe, section-playlist__content, conteúdo. Mas são dois spans também?

Dois spans também. Olha, o Gui está com colinha, hein? Pior que não.

Ou então está com o inspecionar aberto, hein? Ou com o DevTools aberto? Pior que também não.

Também não? Não, então está, já está ficando craque aí na imersão Vamos colocar aí, nesse primeiro, podemos colocar uma classe text e uma classe title também pra gente brincar aí com o estilo. Mas tem uma questão.

Aqui, estamos colocando duas classes. Até esse momento, a gente não colocou mais de uma classe por elemento. E isso é comum de acontecer.

Podemos ter mais de uma classe, não tem problema. Não é legal colocar mil classes lá também, porque aí já perdeu. Já vi muito na comunidade, até três classes no elemento é aceitável.

E por que vamos repetir aí? Porque no item de baixo vamos ter alguns pontos que são comuns entre eles. Então, o que for comum, a gente coloca nessa classe text e o que for específico, a gente coloca na outra classe.

Que é o title ali. Isso, o title, e na de baixo pode até copiar e colar e só colocar subtitle. Vamos copiar e colar aqui.

Então, aqui o text, a gente muda para subtitle. Isso. No primeiro texto, vamos colocar, criei sua primeira playlist.

Primeira frase. E na segunda, vamos colocar, "é fácil, vamos te ajudar". Vamos dar uma olhadinha como está o nosso layout real oficial.

Podemos ver que temos a primeira spam que a gente criou, a segunda spam e agora o botão que vamos colocar no VS Code. Vamos lá para tag button. Belezinha, vamos colocar uma classe para esse botão.

Vamos colocar uma classe, podemos colocar a section-playlist__button. Aí dentro, a gente põe um span que vai ser o criar playlist, na verdade. Que é o texto que aparece lá no botão.

Você pode voltar lá, Fernanda, rapidinho na tela pra gente ver o que mais que temos de elementos ali. Ali temos um link de cookies que podemos também já colocar lá no nosso HTML. Vamos para lá, então.

Aqui no VS Code, ainda dentro da seção. Na verdade, a seção a gente acabou. Estamos dentro ainda da library.

Antes da gente fechar essa div da 58. Isso, agora vamos lá, vamos criar uma div e vamos colocar cookies como a classe dela. Dentro dela, vamos colocar um href vazio mesmo, porque não vamos direcionar para nada, escrito" cookies" mesmo.

Beleza, esse é todo o CSS lá do cookies. HTML, na verdade. Estou ansiosa para ir para o CSS.

E aquela parte do português do Brasil? Aí é o próximo que vamos criar agora. Vamos criar mais uma div, que podemos chamar de languages.

Que é onde a pessoa vai escolher qual que é o idioma. Vamos criar a classe aqui. Languages, no plural.

E ela parece um botão. Vamos colocar um botão aí. Podemos colocar a classe languages-button.

E aí, dentro dela, vamos ter um span também. Na verdade, vamos ter dois spans aí. Mais uma vez, vamos usar nosso font-awesome para mostrar um iconezinho.

E o outro do texto. E o outro do texto. Caramba, está craque, hein, Guilherme?

Já vou alterar o currículo hoje. Tá, pode colocar. CSS avançado.

E aqui a gente coloca português do Brasil. Ali a gente usou o globe. Que é o ícone que mostra a bolinha do globo.

Esse mundinho aqui. Ah, legal. Como ajuda essa fonte aqui com os ícones.

Imagina fazer isso à mão. Muito legal. Ia ser bem bacana.

Bom, conseguimos visualizar isso? Vamos visualizar. Provavelmente vai ficar estranho porque a parte do Spotify está em cima.

ele já não deixou tudo visivelmente aparecendo, as cores estão estranhas, mas vimos que os ícones já estão aparecendo. Os ícones já. Agora é só ser feliz com CSS.

Então, legal. Vamos para o CSS e vamos fazendo por etapas. Vamos fazendo por etapas.

Desafios legais, hein? Gui e May adoram esse desafio e você também vai gostar muito de fazer. Então, bora lá.

Vamos começar aqui. Puro CSS? Puro CSS.

Então, bora lá. Library. Vamos colocar lá o background color primeiro.

Vamos começar com o library. Vamos colocar o background color dele, que vai ser o #121212. Nosso cinza.

Vamos deixar as bordas arredondadas com border-radius de 8px. Aí, vamos usar nosso querido display: flex. E o que isso quer dizer?

O flexbox é uma técnica do CSS e ele traz umas formas de fazer a orientação do código. De uma forma mais flexível, é uma associação aí. Então, quando a gente coloca o display: flex, conseguimos alterar a forma, a orientação, o posicionamento desses objetos na tela de uma forma muito mais fácil.

Seja em colunas, em linhas, enfim. E vamos ver isso aqui. Só de colocar essa linha, display: flex, no lugar do texto que vai ocupar todo o espaço, ele já começa a mudar.

Já. E aí, vamos ter outras propriedades junto com o display flex que vão ajudar a gente a deixar exatamente na posição que queremos. Então, podemos colocar, por exemplo, o justify-content.

O justify-content vai deixar um posicionamento justificado daqueles objetos. E aí, podemos usar, nesse caso aqui, o space-between, que ele vai colocar um espaço, vai deixar tudo justificado com um espaço entre esses objetos. Então, o justify-content vai trabalhar junto com o display: flex.

É quase um trava-língua. E aí, outra propriedade que vai trabalhar junto com o display: flex é o flex-direction. Estamos falando, esse posicionamento vai estar flexível em que direção?

Mais ou menos nesse raciocínio. Então, aqui, estamos falando de colunas. Temos lá o botãozinho.

. . Volta lá rapidinho, no código.

Vamos ter lá o ícone lá de. . .

Da biblioteca. Da biblioteca, temos o texto e lá na frente temos o mais. Estamos falando de três colunas ali.

A gente colocou ali o flex-direction em colunas para mostrar, senão ficaria tudo um abaixo do outro. Usando o DevTools aqui, como a gente já colocou essa propriedade ali no nosso código, se você vir aqui e clicar nesse flex, ele vai mostrar certinho como ele está dividindo aqui. Como a gente colocou em coluna, olha, já está uma coluna aqui, uma aqui, outra aqui e outra aqui.

Isso, lembrando que o library é todo esse componente. Desde a sua biblioteca até lá o Português do Brasil. Exatamente.

Então, aqui já estamos começando a posicionar os componentes ali dentro daquele library. Aí, vamos lá. .

. vamos colocar mais uns estilos. Que ainda temos algumas coisinhas para escrever.

Então, podemos colocar um padding aí de 4px, de 4 e 8. 4px de altura e bottom e 8 de lateral. Isso.

Podemos colocar a cor da fonte, também muito importante. A gente coloca o #B3B3B3 que é aquele cinza lá que vai aparecer. Eu vou dar um autocomplete aqui, o VSCode me deu a dica, não vou ignorar ele.

Por favor, nunca ignore. Nunca ignore você aí de casa também. font-weight, vamos colocar um peso de 600.

Vamos colocar um font-size. Um font-size, por favor. Pode ser de 14px.

Estamos conectadas. E vamos colocar também um margin-top para ele não ficar grudado lá em cima. Colocar um top.

E aí, lógico, a nossa. . .

10px. 10px, isso mesmo. E aí, a gente montou o CSS daquele conteúdo todo que vai aparecer.

Biblioteca, playlist e tudo mais. Vamos ver? Vamos ver como está ficando.

Olha, quase achei que era a expectativa. Começou a mudar, mas ainda tem coisas para trabalhar ai. Sim, mas a gente já consegue enxergar ele todo.

Está um quadradinho, é só ir trabalhando em cada um desses espaços. Isso. Mais uma dica aqui do Flex.

Você pode apertar aqui. Quando você vem aqui também, o Library está pegando a classe certinha. Aqui no display: flex, você consegue abrir um boxzinho que é tudo aquilo que a gente coloca no código.

Você pode testar antes aqui no seu navegador também. Então, ele tem o flex-direction: column. Mas você pode testar outros aí na sua casa também.

flex-wrap, que é uma outra propriedade. E todas essas outras aqui que dá para você brincar bastante e deixar o seu layout lindão. Isso, é bem legal.

E aí, ok. Agora vamos. .

. A gente estilizou o Library. Agora podemos estilizar o library__content.

Que é o que está ali dentro da library. Vamos pela mesma ordem que está lá no HTML. Isso é uma dica.

. . Eu não sei de verdade se é ou não um padrão do mercado, mas eu gosto de fazer CSS seguindo a mesma lógica, a mesma ordem do HTML.

Eu acho que ajuda bastante quando você tem algum problema. Vamos lá no library__content. Vamos colocar o library aqui primeiro, que é o nosso guia.

Sim. Vamos colocar a próxima classe aqui, que é o. .

. library__content. Content ou vamos para o button?

Content. É o Content que está logo na sequência ali. Beleza.

E aí, vamos usar nosso querido display: flex de novo, para a gente poder organizar. Podemos colocar um justify-content também, de space-between, para ele organizar ali o conteúdo. De forma justificada.

Quer dar uma olhada lá ou vamos seguindo? Vamos seguindo? Vamos seguindo.

Vamos deixar o Guilherme aqui na curiosidade. Na curiosidade, como é que vai ficar isso aí? Já era.

Mas quem está em casa pode ver? Pode ver. Pode assistir, gente.

Só eu mesmo que fui presenteado e não vou conseguir. É só olhar lá no navegador. Brincadeira, hein?

Vamos seguir a próxima classe aqui, que é do button? Vamos seguir. Vamos colocar lá o library__button.

Vamos colocar aqui o library__button. E aí, vamos usar a classe FA para. .

. Na verdade, estamos no button ainda. É, vamos usar o button primeiro.

Para deixar ele certinho. Isso. Vamos lá.

O button vai ter. . .

Podemos colocar o margin-right nele. Para ele também não ficar lá em cima. Beleza.

10px? 10px. A cor também vai ser o mesmo, #b3b3b3.

De cima. Aí, tem um ponto importante. Vamos usar o background transparente.

Para ele ficar com o background transparente e não ter aquele problema. . .

Não criar aquele corpo ali no botão. Porque não vamos mostrar um botão exatamente definido ali. Porque a tag do botão já vem com um estilo carregado de ter uma corzinha no fundo.

Com o background transparente, eliminamos isso e botamos o estilo que queremos. Exato. Aí, vamos fazer mais ou menos nessa linha também o border: 0.

Pode ser 0, 0px. Porque aí também ele vai tirar aquele contorno ali da borda do botão. Aí podemos colocar um font-size aí também.

E vamos brincar com. . .

Vamos colocar 1rem. Que isso! Mudou o px agora para o rem?

Boa pergunta. Por que será que a gente mudou de 1px? Eu acho que é um spoiler da próxima aula que vai ser responsividade.

Sim. Vamos fazer o seguinte. Tira o rem e vamos colocar 14 px aí também.

Tá bom. Mas você fez a conversão de cabeça? Fiz.

Caramba! Não, mentira, não foi, não. Eu já sabia que era.

. . Ah, está.

Entendeu. Então, está tudo bem. Vamos colocar um font-width aí.

De 700. Um font-family aí que a gente já tinha utilizado antes. O DM Sans que a gente usou na outra.

Eu vou até copiar aqui de novo. Não é um problema para você que está de casa. Pode copiar suas propriedades.

É até melhor para não ter problema de digitar errado. Vamos colocar um text-align também para ele ficar centralizado. Para ele centralizar o texto.

A gente coloca ele no centro. Vamos colocar um text-decoration: none para ele não criar algumas propriedades que não vamos querer. Por exemplo, sublinhar e tudo mais.

Aqui também. O text-transform também. O text-transform também.

Vamos zerar. E aí a gente coloca um padding aí nele também. De 20 e 10.

20 de altura e de baixo. . .

E nas laterais 10px. E aí podemos colocar o nosso querido display: flex aí também. Porque dentro lá do botão temos os ícones e tudo que a gente usa.

Vamos deixar um display: flex aí para a gente poder brincar com ele lá. Beleza. Como ele é um reizinho, display: flex, vou colocar ele aqui no topo.

Boa, boa. Vamos dar uma olhada lá como é que está ficando. Beleza.

Olha aí, hein? Já agora que eu estou vendo. Vocês entenderam porque eu falei isso.

Ficou incrível, hein, gente? Ficou e vai ficar ainda mais. Vai ficar ainda mais porque temos mais estilos aqui para colocar.

Vamos lá. A gente estilizou o botão, agora vamos estilizar o ícone lá, o FA. Porque ele está em cima, né?

Ele está em cima. Se a gente olhar lá no projeto, o texto está centralizado e o botão está em cima. Está em cima, isso.

Precisamos alterar isso. E outra coisa, ele está muito pequeno. Vamos usar um font-size para isso.

Ah, legal. Vamos lá no CSS. Nesse span aqui que vamos trabalhar agora.

Vamos colocar a classe dele aqui. Vamos lá, library. Aí, ele é também o library__button .

fa. Isso mesmo. Então, como a May falou, vamos já trabalhar o tamanho da fonte dele para a gente deixar um pouquinho maior.

Vamos de 20px? Vamos, vamos sim. Beleza.

Vamos colocar um margin-right aí de 10px. Para ele não ficar grudado ali na direita. Trazer um pouco para cá.

A gente põe a margin na direita e vai trazer para a esquerda. É bem legal. Vai entender.

É, tipo a persiana lá. Vamos colocar um font-weight aí de 30. De 30 não, desculpa.

De 300. Nem existe font-weight de 30. E um padding-right.

Só para ele criar um espaçamento em torno dele ali na direita. De 8px. Isso.

Então, beleza. Essa parte está ok. Aí, temos.

. . Isso aí fizemos genérico lá para os.

. . Para os.

. . Como é que chama?

As classes dos ícones aqui. Agora, vamos fazer para aquele fa-plus ali, porque ele tem. .

. Ele está bem em cima, ele tem umas coisinhas que precisa arrumar ali. Vamos focar nele.

Isso. Vamos colocar lá os nossos. .

. Para agilizar, vamos utilizar ao nosso favor aqui. Mas aqui, em vez de ser só fa, a gente coloca um plus.

Isso. Certo? Certo.

E aí, a gente só coloca um margin aí. Podemos colocar 24px em relação à altura, cima e baixo. E 10px nas laterais.

Já temos o nosso estilo bonitinho lá. Vamos dar uma olhada? Vamos ver?

Belezinha, gente. Vimos que o fa-plus aqui, ele não seguiu o estilo que a gente queria. Vamos ver no código para ver onde podemos ter causado algo.

Vamos ver aqui no HTML, fa-plus. O nome está certo, aparentemente, e ele está dentro de. .

. Ele está dentro de content e não de button. O button fecha.

Isso. Então, aqui, a gente substitui por content. Eu falei de copiar, mas, às vezes, copiar dá um errinho.

Mas é só voltar que está tudo bem de novo. Vamos ver agora? Ah lá!

Olha aí! Agora vai, hein? Agora ficou bonito.

Agora, mais bonito que isso, impossível. Olha o detalhe. Caramba, o Mickey, hein?

Ah, e agora, temos essa parte lá, se você quiser, no texto. Crie sua playlist ali, que precisamos organizar, porque está bem estranho ainda. Vamos ver na expectativa, mais ou menos, o que vamos fazer?

Eu adorei esse nome, expectativa. Então, olha, ele tem uma cor diferente de background. O crie sua primeira playlist e o é fácil.

Parece que tem informações que são relevantes, importantes, usadas para os dois. E crie sua playlist, o clássico do botão. Com esse fundo branco, arredondado, assim por diante.

Acho que sem muita novidade. Sem muita novidade. Vamos lá.

Vamos para o código. Vamos voltar lá no CSS e aí vamos primeiro estilizar a section-playlist. Que é aquela section que a gente criou para compor toda essa partezinha aí desse segundo quadrante cinza claro que está lá na tela.

Vamos lá. Primeiro, o background color dele, que precisamos mudar para o #242424. É um cinzinho mais suave.

Isso. Aí, vamos ter. .

. Antes do background color, vamos colocar nosso querido display: flex de novo. Nosso reizinho.

Porque aí vamos usar outra propriedade que trabalha junto com o display: flex, que é o align-items. Vamos ver. Então, aqui nesse align-items, vamos usar o flex-start.

Vamos ver aqui no inspecionar o que ele faz. A gente já vê que ele está aqui. Olha só o que ele faz.

Se eu tirar o flex-start, ele vai dar uma diferença. Por quê? Ele não começa de cima.

O flex-start é para ele se posicionar aqui na sua parte de cima, bem no cantinho. É isso que ele faz. Mas aí você pode testar também como é no centro, como é que é no final.

Então, pode testar à vontade. Aí você vai aprender muito mais na prática, porque é assim que a gente aprende. Vamos testando.

É verdade. Principalmente no começo. Às vezes, quando a gente ganha mais experiência, essas propriedades já vão ficando muito mais claras.

Mas no começo é muito bom ir brincando, vendo o que acontece, sabe? Bem legal. Para trabalhar junto com o display: flex, vamos usar também o justify-content de novo.

Que aí é o mesmo, para ele organizar ali de uma forma justificada. E colocar um espaço entre os elementos. E aí, vamos usar mais uma propriedade junto também, que vai trabalhar também com o display: flex, que é o gap.

O gap vai falar qual é o espaço entre essas propriedades. Quand tem um space-between, ele vai criar um espaço. Então, estamos falando aí no gap qual é o tamanho desse espaço.

O que é legal, porque se a gente fosse colocar isso, se a gente não tivesse uma forma de trabalhar o gap desse jeito, a gente teria que colocar isso tudo na mão. Então, ah, esse aqui eu pego em tanto, esse aqui em tanto. Aí, esse outro coloca right e left também.

Então, o gap já trata isso para a gente, e ele já organiza dentro do próprio conteúdo ali, para a gente não precisar ficar, nem estourar, e nem precisar ficar calculando esse conteúdo na mão, na cabeça, na verdade. Me lembrou muito a frase do metrô, sabe? Mind the gap.

Esse vão. Vai colocar o mesmo vão, o mesmo espaço entre todos os elementos que estão. .

. Que estão justificados ali. Bom, então vamos colocar uma cor aí.

Nesse texto. O #b3b3b3 de novo. Colocar um peso aqui também.

Vamos colocar um peso de 600. Um font-size de 14px. Uma margem aí, podemos colocar 8px em cima e embaixo.

E ao lado não precisa nada, nas laterais não precisa nada. Então, pode pôr zero. E aí, um padding de 16 e 20, para a gente melhorar aquele espaçamento ali.

Então, ali, 20px. Isso. Beleza.

Aí, agora, vamos para o content. Daquele, da section-playlist. Vamos colocar lá.

Vamos aqui criar de novo. Vamos lá, section-playlist. Opa, eu achei que tinha aqui.

É com um selo e. . .

Meu Deus, o dedo esbarrou. É. Pensando na sexta-feira, hein?

É. section-playlist, mais uma vez. E o content.

E agora a gente pega o content. Belezinha. Aí, novamente, teremos nosso querido display: flex, para ele organizar o conteúdo ali, para ele organizar os elementos que estão dentro lá do conteúdo.

E aí, também vamos colocar o flex-direction: column, para ele organizar aquilo ali em colunas. Beleza, eu acho que desse content é isso. Isso.

É isso. Beleza. E temos o texto também.

Ah, já vamos organizar o texto. Já vamos copiar isso tudo aí e vamos colocar o texto. Estamos copiando porque ele que pega a classe acima do texto.

Por isso que a gente pega ele aqui. Vamos organizar melhor. Já vamos chamar o text aqui.

Aí, vamos fazer o seguinte. Nesse texto, vamos só colocar um padding bottom ali, para não ficarem grudados um com o outro. Porque senão fica muito colado.

14px? Pode ser 14px. O padrão?

Isso. 14 e um color branco, #fff. Beleza.

E aí. . .

Aí, ele vai aplicar isso para os dois. Porque a gente usou a classe texto lá nos dois. Então, o título e o subtítulo.

Isso. Aí, agora vamos estilizar o título, que a única diferença do título aí é que ele vai ter um peso maior, de 700. Então, é a única propriedade que precisamos colocar.

E o subtítulo? E o subtítulo vai ter um peso menor de 500. E aí, a gente coloca um font-size menor nele também.

Pode ser 12px. Ah, legal. Vamos lá.

Vou reaproveitar a classe aqui. Mas agora, passando o nosso título. .

. Vou colocar um peso de fonte aqui de 700. Vou reaproveitar de novo, passando agora o .

subtitle. - Um peso 500 e a fonte de…? - E a fonte de 12px.

Vamos colocar uma fonte menor lá. Perfeito. E para fechar, vamos no botão antes de ver?

Vamos deixar alguém curioso. Nossa! Já estou me segurando na curiosidade.

Mas você de casa pode conferir aí. É que estamos na maldade aqui com o Guilherme. Brincadeira.

Vamos reaproveitar, porque o button está dentro de content. Vamos passar aqui também. E agora?

Button. Vamos trabalhar o nosso button. - Vamos de background primeiro?

- Vamos de background. Vamos colocar um background-color branco. - #FFF?

- #FFF de novo. - Olha aí. - Olha aí, hein?

Sou praticamente uma variável de CSS. E aí, a cor do texto será preta. Então, 000.

Vamos colocar um border-radius de 20px, para dar uma arredondada nessas bordas. E vamos colocar também o nosso font-size. Podemos colocar 12px.

Agora, vamos usar o display: flex, porque vamos alinhar esse texto dentro dele. Então, ele vai super nos ajudar aqui. Flex ajuda em tudo.

E para alinhar, já colocamos o justify-content. Agora não colocaremos o space-between, que estamos acostumada. Vamos usar o center, que vai alinhar o texto no centro do botão, para a gente ter ele bem bonito, senão ele vai ficar mais acima, mais abaixo, enfim.

Agora, continuando nas propriedades do texto, vamos colocar um peso nele? Vamos colocar um peso de 700. O tamanho da fonte já colocamos, o font-family também mantemos, colocamos o mesmo font-family que colocamos da outra vez, aquela DM Sans.

E aí já começa a ser quase um code-smell. Estamos copiando e colando propriedades que já utilizamos. Exato.

E aí podemos usar variáveis para isso. Vamos ver essas variáveis nas próximas aulas. Legal.

Como é um button, vamos tirar as propriedades de text-decoration, que poderíamos também colocar isso no nosso reset. Eu acho, inclusive, que o reset já está fazendo isso, acho que só estamos colocando aí para garantir. Mas vamos colocar, pode colocar.

Beleza. Vamos de padding? Vamos colocar um padding de 10px, porque aí ele vai colocar o espaçamento entre todos, de todos os lados.

E border zero para seguir aquela lógica lá. É, para não criar uma borda. Aí precisamos colocar uma largura para esse botão, e aí podemos colocar largura de 113px que é a largura daquele botão oficial.

E o margin-top de 12px para não colá-lo em cima. Agora, mais uma mania de organização, vou jogar esse margin perto do padding. É legal fazer isso mesmo para a gente manter a lógica, uma sequência lógica.

Quer ver no navegador como está? Nossa, não estava aguentando mais. Pelo amor de Deus.

Nossa expectativa e a nossa realidade. Caramba, hein? Falta muito pouco.

Só falta a parte do português? - Sim - Ah, então vamos nela. Vamos agora.

E o português e os cookies, mas bem rápido. E na parte dos cookies, só colocaremos uma margem naquela div, a sidebar. Dentro dela vai ter .

cookies, que vai ter uma margem de 25 e 20. Opa. 25px por 20px.

E o link dentro dela, já pode até copiar o . sidebar . cookies e só colocar um A na frente.

Vamos aproveitar aqui, adicionamos a tag A. - E dentro dela? - Aí vamos colocar o estilo.

A cor #b3, o font-weight 500 e um font-size de 10px. Vamos colocar o text-decoration também, só para ele não ficar criando aqueles estilos que não queremos. O none limpa o text-decoration.

Então, o nosso estilo já está perfeito. Aí podemos colocar também uma pseudo-classe que seria um hover. Ou seja, quando a gente parar o mouse em cima daquela propriedade, ele vai criar algo para pessoa entender que mudou aquele estado.

Uma pseudo-classe no CSS não vai representar exatamente o elemento, como estamos usando aqui. mas vai representar muito mais um estado. Então, temos algumas formas de alterar estado, como hover, como active e vários outros.

Vamos usar o hover para colocar um underline no text-decoration, só para na hora que a pessoa parar o mouse, ele fazer um sublinhado que é para entender que está parado ali. Podemos chamar isso de uma animação para deixar um charme. As pseudo-classes, quando fazemos isso, não é exatamente uma animação.

Visualmente é. No CSS em si, ela não é considerada uma animação, mas ela dá bastante interatividade na página. Fica claro.

A resposta é muito importante. Porque se eu paro o mouse ali, eu tenho uma resposta de que algo está acontecendo. É bem legal.

Então, para adicionar esse hover, fazemos a mesma coisa, como se fosse colocar uma propriedade de CSS, só que aí adicionamos dois pontos e chama o hover. Abre de novo os bigodinhos e aí podemos colocar um text-decoration para o nosso sublinhado. Isso mesmo.

Só para a gente ver. Um underline. Beleza.

Agora, podemos ver… temos mais um botão ainda para trabalhar, que é o português. - Vamos trabalhar nele? - Olha o Guilherme não querendo ver.

Estou fazendo um tratamento para não ficar com tanta vontade de ver o código e aprender mais sobre CSS. Já passamos pelo cookie, agora vamos trabalhar o botão languages. Então, vamos mexer na div languages, na verdade, no botão dentro da div languages.

Acho que sobrou um espaço ali. Opa. Sobrou um espaço que eu já vou arrumar.

Aí tem alguns estilos que já vimos, o background-color transparente. De novo, vamos colocar a borda de 1px também. Aí a borda podemos fazer… De novo, agora estamos fazendo um shorthand com a borda.

Em vez de colocar border-radius, depois colocar as propriedades, depois colocar o border-color, já colocamos tudo numa propriedade só. O nome disso é shorthand. Será 1px para o tamanho, para o contorno da borda.

Solid, porque vai ser uma linha sólida e #878787. A cor já vem três propriedades dentro de uma só. Isso, fica bem mais fácil.

- Color, um color branco. - Para o texto. Vamos colocar um cursor: pointer também para gente ter uma mão do Mickey.

Vamos usar o align-items: center, porque temos um texto, só vamos ter esse texto, então podemos colocar esse align-items. Nesse não precisamos do display: flex? Nesse não vamos precisar, podemos colocar o align-items direto.

E aí já colocá-lo no centro, porque ele só vai ter esse texto. E aí, vamos colocar a fonte também, o peso da fonte. Podemos colocar um bold, ele está com o texto em negrito mesmo.

O bold 700 equivale mais ou menos a mesma coisa? Sim, são só formas diferentes de declarar, na verdade. Então, precisamos colocar uma largura, podemos colocar o width de 170px.

E uma margem de 8px. E também podemos colocar um padding, já colocamos? - Não.

- Vamos colocar um padding de 8px. - Nosso botão, em teoria, está ok. - Ah, vocês estão de brincadeira.

Agora já temos aquela parte resolvida, vamos ver? - Vou mudar. - Vai lá.

Olha! Já está diferente. - Estamos quase.

- Faltam alguns detalhes. Um arredondamento no botão e ajustar essa fonte. Vamos fazer isso agora?

Essa fonte, por algum motivo, não está mostrando a fonte que declaramos. Vamos dar uma inspecionada para ver qual é? Eu acho que é o segundo que não está.

- O primeiro também não. - Também não? Mas vamos arrumar a borda primeiro, que aí eliminamos isso.

Esse está mais fácil. Vamos arrumar a borda do botão. Na verdade, tem a borda desse botão aí que precisamos ver.

- Acho que é 20px, não? - Podemos colocar 20px. Ah, e uma coisa também que podemos fazer.

Se estivermos testando layout e estiver faltando uma propriedade, podemos testar já no DevTools e aí dando tudo certo, se estiver do jeito que queremos, podemos voltar e colocar no código. Beleza, colocamos o border-radius. Vamos ver.

Funcionou. Vamos fazer isso que você falou, vou arredondar aqui. Então, inspecionamos a nossa seção, vamos adicionar um border-radius aqui.

De quanto é esse border-radius? Pode ser 10px. Vamos ver?

Uns 10px. Já arredondou ali! Vimos que nessa seção 10px deu certo, então pegamos, copiamos, e jogamos no código na parte do botão.

Mentira, não é do botão, é da . section-playlist. Não, section-playlist?

Deixa eu ver aqui. Isso é aqui mesmo. Então jogamos aqui.

Vamos dar um salvar. Pronto, está funcionando. E agora só precisamos arrumar também a fonte que ele não pegou a fonte que definimos.

Vamos ver o porquê. Vimos que é no text… Vimos que é no text que deixamos de colocar a fonte. Colocando a fonte aqui, vamos ver lá como ficou?

- Boa! Agora sim. - Agora temos o nosso content criado.

Podemos até deixar de desafio para você de casa fazer o footer, porque o footer vai ter algumas propriedades mais… Vamos brincar com um gradiente para colocar no background, tem um botão, tem alguns textos. Então, fica de desafio para você fazer o footer. Fernanda e Mayara, obrigado!

Foi simplesmente incrível esse mergulho mais profundo no CSS e nas classes. Confesso que tiveram alguns momentos que falei, "puxa, estamos copiando e colando algumas coisas do CSS" e isso é algo comum no dia a dia. Porém, existem técnicas para começar a evitar esse tipo de "cold smell" esse cheiro de código estranho, algo assim que está surgindo no código, mas isso é conteúdo da próxima aula.

Faz todo sentido. É algo que falamos na primeira aula, vamos sentindo quando as coisas são necessárias, quando aqueles ajustes que precisamos colocar são necessários. Agora já é necessário.

E faz sentido a gente aos poucos ter cada vez mais esse amadurecimento em relação ao código. Porque eu imagino que usam variáveis CSS no trabalho de vocês ou usam técnicas diferentes para conseguir reaproveitar o código CSS, isolar o HTML em componentes e assim por diante. Obrigado mais uma vez!

Estou muito feliz que você chegou até o final dessa segunda aula. Não se esqueça que para garantir seu certificado você precisa assistir todas as aulas da Imersão. Temos a Inteligência Artificial da Alura, temos o grupo no Discord e a aula ainda não acabou!

Você ainda tem um conteúdo extra sobre Inteligência Artificial. Tchau. Boas-vindas a esse segundo conteúdo extra aqui no final de cada aula da sua Imersão Front-End.

Sou Fabrício Carraro e hoje continuaremos falando sobre Inteligência Artificial, falando sobre a Luri. Também será uma aula mais tranquila. Um conteúdo extra mais tranquilo, porque essas duas aulas iniciais eu imagino que tenham sido mais pesadas para vocês.

No conteúdo extra de ontem, recapitulando, vimos como podemos utilizar a Inteligência Artificial, no caso a Luri aqui da Alura. Que está disponível para vocês na Imersão, mas também está disponível quando vocês forem fazer qualquer curso no futuro dentro da plataforma da Alura. Que é exatamente de onde estou acessando ela aqui, nesse logo.

Falamos sobre como ela pode ajudar a tirar dúvidas específicas sobre código, a explicar uma coisa completa para você linha a linha, como se você fosse uma criança de 5 anos de idade. Com uma linguagem muito mais simplificada. E também como ela pode gerar código para você, como vimos no caso do Reset CSS.

Hoje, continuando aqui na Luri, vamos ver como ela pode te ajudar a corrigir código. Porque imagina que você está aqui seguindo a primeira aula, a segunda aula, ou criando seus próprios projetos depois de terminar essa imersão, você vai encontrar erros nesse código. Você vai ficar travado, travada em algum momento.

E é ali que a Inteligência Artificial, a Luri, vai poder te ajudar. Tanto para explicar, quanto para encontrar esses erros e corrigir eles para você, ou junto com você. Então, para isso, eu criei um código bem tranquilo aqui, um código HTML, que vocês podem ver.

Ele também é uma cópia do Spotify, mas mais tranquilo do que o que vocês estão fazendo. Então você pode ver que tem div, tem a tag HTML no topo, com a linguagem, tem o corpo, o sidebar, que seria a barra lateral. O conteúdo principal, que são as playlists, esse "Boa Noite" em negrito, com H1, e os botões também lá embaixo, essa classe player.

Enfim, tem várias coisas aqui, e esse código está com um erro, porque eu inseri manualmente alguns errinhos nesse código. Mas poderia ter sido uma coisa que você errou, que você deixou por desatenção, ou por não saber mesmo. Olha como está essa página, ela está meio estranha.

Esse "Boa Noite", as playlists deveriam estar aqui em cima, no meio da página, não esse preto total. Esses botões deveriam estar aqui embaixo, do lado direito inferior. Mas está tudo aqui dentro desse lado esquerdo.

Eu quero saber por que tem esse bug, por que está errado. A Luri vai me ajudar com isso. Vou lá no meu código, podemos selecionar ele inteiro, dar um "Ctrl+C", e aí eu vou na Luri falar: Luri, o código HTML não está funcionando como deveria.

Você poderia encontrar todos os possíveis erros nele, e depois listar um a um quais são esses erros? Agora aqui tem um copiar e um colar, colei ele aqui inteiro. Vamos rodar, vamos ver como vai responder para isso.

Olha aí, deu bastante coisa. Olá meu querido estudante, vamos analisar juntos esse código HTML. Possíveis erros.

Erro de sintaxe no atributo lang da tag HTML. Listou um a um como eu pedi. Observe a linha lang-pt, o atributo lang precisa ter o valor entre aspas.

Esse era realmente um erro que eu tinha introduzido. Então aqui é lang igual a "pt" entre aspas. Ou se você quiser colocar em português do Brasil, "pt-br".

Beleza. Segundo, erro de fechamento da tag h1. Você escreveu boa noite, note que você abriu a tag h1 duas vezes sem fechar a primeira.

E mostra a forma correta. Então por isso, aqui do lado, essa playlist, o boa noite, vamos ver onde ele está. Cadê o boa noite?

Aqui ó, boa noite. Eu abri um h1, que fica com um super negrito, um título. Mas eu esqueci de fechar, esqueci de pôr a barra para fechar.

Por isso, todas essas playlists aqui no site estão em negrito também. Então quando eu fechar e eu salvar, eu vou lá, dou um "F5" para atualizar, Já melhorou. Mas as coisas ainda estão no canto, não estão aqui no meio.

Vamos continuar. Falta de fechamento da tag nav, do navegação talvez. A tag nav que inicia a barra lateral está aberta, mas não foi fechada.

Você precisa adicionar uma tag /nav após a div que fecha a seção playlist section. Vamos lá. A playlist section tem uma div.

Essa nav realmente era esse o erro. Eu tinha removido daqui a tag de fechamento do nav. E agora dou um salvar.

Vamos lá no página. Pronto. Está tudo no lugar certinho.

Ele até encontrou um próximo. Falta de fechamento da tag div, da tag div playlist-section. Onde está lá?

Aqui. Esse aqui ele até encontrou demais. Está tudo certo.

Mas pronto. A Luri ajudou a gente a encontrar todos os erros aqui. E isso é uma coisa que vai acontecer muito com vocês durante a sua carreira, os seus estudos também, como pessoas desenvolvedoras.

Seja no front-end ou no back-end. E a inteligência artificial vai estar aí. A IA, a Luri, pode nos ajudar nisso.

Por hoje é isso, pessoal. Espero que vocês tenham curtido. Mais esse conteúdo extra.

E a partir de amanhã vamos sair da Luri, vai começar a explorar outras coisas sobre inteligência artificial. E também você vai ter a sua aula 3 com muito conhecimento. Até lá, pessoal.

Tchau!