vimeo.com/.../1083873052

Agora que nós já conhecemos
as classes utilitárias,

conhecemos todo o poder
de formatação do framework Tailwind,

seria bem legal nós criarmos
um projetinho

e aplicarmos as classes
e os conhecimentos que foram passados

nesses vídeos para vocês.

A ideia é construir
uma pequena página onde nós tenhamos alguns
componentes já previamente prontos.

Esses componentes e essa página, ela

será estilizada através
do framework The Windy.

Eu já tenho alguns arquivos aqui
separados e esses arquivos estarão

disponibilizados junto
com o código dessa oficina

no link que vai aparecer
na descrição para vocês.

Vamos dar uma olhadinha então
no que nós vamos desenvolver.

Então eu criei essa pastinha Oficina
The Windy, que será a pasta onde

estarão todos os nossos arquivos
do projeto, todas

as nossas dependências
e essa pastinha eu vou

jogar aqui no nosso Live Server para

facilitar a visualização
do nosso conteúdo e,

obviamente,
para a gente desenvolver o código.

Dentro da pasta de imagens, nós temos
uma imagem que vai ser um banner.

Então esse cara vai ser o plano de

fundo de uma seção Hero.

Nós vamos ter três cards.

Nós vamos ter a visualização desse
conteúdo também aqui no celular, ou

seja, quando ele estiver pronto,
o The Windy vai renderizar esse

carinha para nós no celular
dessa forma.

E a mesma coisa aqui no desktop.

Com o nosso conteúdo que será

aplicado, nós teremos acesso a essa

página montando
uma pequena landing page.

Essa landing page você
pode adaptar para qualquer

tema que você esteja estudando,
ou então, de repente,

para alguma entrega que você
está fazendo dentro do curso.

Para que a gente tenha todas
as opções disponíveis, eu vou fazer

passo a passo a instalação
do Tailwind nesse projeto e aí a gente

começa a consumir as classes e os elementos
da HTML que nós vamos montar.

Então aqui na documentação do nosso

Tailwind,
nós vamos na parte dos Docs

e logo de cara você
cai na instalação dele.

Lembrando que nós não estamos

consumindo nenhum desses métodos.

nós estamos fazendo
a instalação através do CLI

dele para ter todas
as dependências do projeto.

Automaticamente, nós vamos estartar

o nosso projeto lá
dentro do nosso VS Code.

Então, a pastinha onde está o projeto,
eu vou clicar aqui no terminal.

ele vai localizar a pasta,
então percebam

que você tem exatamente
a mesma pastinha aqui.

e aí eu vou dar o comando da npm.

init-y para criar o nosso projetinho.

e gerar automaticamente
o nosso arquivo de configuração.

Pronto.

Gerou o nosso arquivo
package.

json que nós vamos utilizar
dentro da aplicação.

Primeiro passo é estartar
o nosso projeto.

Então nesse arquivo você vai passar

todas as dependências, você vai
ter todas as relações que são

necessárias para fazer
o framework ou até mesmo

outras aplicações funcionarem
dentro do projeto.

Simplesmente o que a gente vai fazer

é instalar o Tailwind
dentro da aplicação.

Então eu vou copiar o Tailwind aqui,

essa linha de Tailwind e vou jogar

essa linha aqui dentro
do nosso terminal.

Copiar essa linha aqui.

e vou jogar essa linha
dentro do nosso terminal.

Ele vai começar a fazer a instalação
do Tailwind e aqui vocês vão

perceber
que no nosso package.

json que foi gerado
anteriormente,

ele já colocou
a dependência do Tailwind.

Isso significa que o seu Tailwind já

está pronto para funcionar
dentro dessa pasta.

Então agora a gente
vai fazer as demais

configurações para criar
o projeto da forma correta.

Voltando no site, nós vamos copiar
a linha para iniciar o Tailwind.

Quando ele iniciou o Tailwind, ele

criou aqui o arquivo
de Tailwind .config.js

que é toda a parte
de formatação e toda a parte de

extensão dos nossos conteúdos.

Voltando lá, ele pede para nós

configurarmos o endereço
dos nossos arquivos.

Então, aqui dentro
do Tailwind .config.js que foi

gerado agora,
nós vamos mudar a linha de content.

Então, eu vou copiar essa linha de

content daqui e vou alterar
aqui o nosso Tailwind.

config.js.

Então, simplesmente ele gerou esse
carinha em branco e nós vamos passar

o content indicado
lá pelo framework.

Nessa linha,
você está indicando que dentro do seu

projeto tem uma pasta chamada
src e todos os seus arquivos

html e js estarão
dentro dessa pasta.

Então, tudo que for consumir
o Tailwind, ele vai procurar dentro

dessa pasta,
inclusive nas suas subpastas.

É interessante,
então, que agora nós façamos

a criação desse src
com as outras pastas dependentes.

Então,
posso fechar o Tailwind .config.

Posso fechar aqui o meu...
a minha pasta

de imagens e aqui eu vou
clicar na oficina, tá?

Vou clicar bem aqui
na pastinha da oficina,

que tem um índice,
para marcar todo o projeto.

Aqui eu vou fazer
a criação da pasta src.

Essa pasta src vai receber todos
os meus arquivos da aplicação.

Quando eu quiser colocar no ar

a minha aplicação,
essa página, quando eu quiser

publicar, eu vou pegar
essa pasta e jogar, ou seja,

fazer o deploy dela,
para que seja visualizado o conteúdo.

Agora, o que nós vamos fazer?

Nós vamos arrastar a pasta
de imagens para cá,

criar a pasta de css e criar
o nosso arquivo index.

Então, eu vou arrastar
a pasta de imagens para cá.

Tá, ele está pedindo, está dizendo
que eu vou mover e yes, quero mover.

Então,
criou aqui dentro dessa src, né?

Você já recebeu as imagens
que nós tínhamos, percebeu que você tem

total acesso a ela,
sem problema algum, tá?

Dentro dessa src,
eu vou dar um clique direito nela.

Eu vou criar uma nova pasta,
que vai ser a minha

pasta de styles,
ou melhor, a minha pasta de css.

Vamos criar uma pasta de css.

css, certo?

Os dois no mesmo nível,
a imagens e a css.

E também aqui, ó, no service, vou
dar um clique direito, criar um novo

arquivo,
que vai ser a minha index .html.

Então, percebam a dependência deles,

né?

Está tudo dentro dessa pastinha src,
que vai

ser a nossa pastinha
com os nossos recursos.

Dentro da pasta css,
o que a gente precisa?

Ele está dizendo que a gente precisa

criar um arquivo de...

que ele chama aqui de input css,
que vai ser o nosso carinha que vai

fazer a chamada, né?

De todas as diretivas do Tailwind,

ou seja,
o Base, o Components e o Utilities.

Então, vamos criar essa pasta.

Então, aqui dentro da pasta css,

dentro da pasta css,
new file, vou criar o meu

styles.css,
que é o nome que eu costumo utilizar.

O framework está dizendo aqui
que é input css, não tem problema nenhum,

você pode atribuir o nome que você
quiser, basta lembrar desse nome.

Nosso caso aqui, vou selecionar

esses três elementos,
ou copiar aqui também, tá?

Tanto faz.

Caso selecionei,
vou copiar, dar um ctrl c,

e vou jogar as marcações
dele aqui dentro.

O VS Code vai deixar algumas linhas
onduladas, mas isso é normal porque

ele não se dá bem com esses importes,
tá?

A importação dessas diretivas.

Vale ressaltar que esse arquivo
que nós estamos usando será necessário

para que a gente consiga
criar os nossos apply.

É, exatamente isso.

Eu bolei uma oficina onde nós vamos
usar vários applies, ou seja, vamos

ter várias classes, justamente
para não ter toda aquela quantidade de

código de classe
do Tailwind dentro das tags.

Algumas outras formatações serão
aplicadas diretamente, vocês já vão

ver como que ela vai ficar.

Então, meu arquivo de utilities,
de styles, montadinho.

Por enquanto, vamos deixar ele aqui.

E aí, o que vai acontecer?

Eu vou copiar essa linha onde ele

está indicando o caminho
do nosso Tailwind, né?

A execução do nosso Tailwind,
ou seja, o arquivo

dentro da pasta source,
o input aqui que ele chamou,

e o arquivo de saída.

Então, esse carinha aqui vai ser
o nosso arquivo original de formatação.

A saída, ou seja, a formatação que

será usada na sua aplicação,
vem nesse carinha.

Então, eu vou copiar ele.

E aqui, nós vamos fazer o seguinte.

Dentro aqui do nosso Package JSON,

vocês têm essa área de scripts, tá?

Ou seja, a gente cria essa área para

montar scripts que serão executados
durante a aplicação do projeto.

Então,
eu vou selecionar esse conteúdo aqui,

ou seja,
abertura e fechamento das aspas.

Vou selecionar todo esse conteúdo.

Vou apagar esse conteúdo e colar
o que eu trouxe lá do Tailwind.

Esse script, ele está com o nome de

teste, mas nós costumamos colocar
esse cara com o nome de Dev.

Então, vou chamar esse carinha, esse
script de Dev, mas como eu já citei

anteriormente,
ele pode receber qualquer nome.

Aqui, nós precisamos fazer
uma atualização das nossas pastas.

O que que vai acontecer?

Vamos dar uma olhadinha
na estrutura.

Nós temos o Tailwind-i,
ou seja, eu estou

indicando o arquivo de entrada,
o arquivo de input.

Então, nós temos a pasta src,
como ele está dizendo aqui.

Só que aqui na nossa estrutura
nós temos um css, ou seja, uma pasta css

que não está definida,
que não está explícita aqui.

Então, eu preciso colocar src barra.

css.

O nosso arquivo não é um input,
é o styles css.

lembrando que esse arquivo style css
é o arquivo que tem as diretivas.

Então, vejam, eu passei para cá,

exatamente para cá, essa estrutura,

ou seja, esse arquivo,
ele está na pasta de src,

dentro dela na pasta css,
o arquivo style css.

O "-o", ou seja, o arquivo de saída,
o arquivo que será buildado,

percebam que eu não tenho ele aqui,

esse "-o", vai indicar o caminho
do arquivo que eu quero que seja gerado.

Eu até vou deixar esse output, mas

dá uma olhada,
eu tenho a pasta css aqui.

Então,
eu vou colocar css barra output css.

Nós temos aqui o "--watch", que vai
fazer com que ele fique olhando, né,

assistindo toda a nossa estilização,

todo o nosso processo
de criação do arquivo.

Basicamente, está pronto.

O que que eu preciso fazer?

Eu preciso rodar esse
script que foi criado.

Então,
eu vou lá no terminal e rodar esse

script, ou seja,
o script que eu chamei de Dev.

Nós vemos aqui,
e aí a gente vai dar um npm, run Dev.

Ou seja, esse Dev aqui é exatamente

esse carinha, que é o nosso script
que será executado.

Vou pressionar o enter.

Ele vai dizer que ele está
aguardando, tá?

Nesse momento ele não encontrou
nenhuma classe, não foi detectada

nenhuma classe dentro
dos nossos arquivos, né.

A gente não tem arquivo ainda,
mas ele está

aqui assistindo tudo
que nós vamos fazer.

Então, eu vou fechar o package, vou

aqui na minha index, vou criar o meu

arquivo de estrutura.

Vocês vão perceber que ele vai
ficar rebuildando esse carinha aqui.

Vou aqui no meu html language
e mudar para um ptbr, por causa do

idioma, do conteúdo.

Vou trocar o title.

Dentro desse title,
eu vou colocar oficina web.

E aqui no corpo da nossa página,
eu vou fazer o primeiro teste para ver

se o tailwind está funcionando.

Vou colocar um h1 e vou colocar
assim, olá, mundo, tailwind.

A gente precisa lembrar que nós

temos um arquivo de saída
que foi gerado, né.

Esse é o arquivo que vai ter
a formatação do nosso CSS.

E perceba que nós temos
aqui algumas configurações

que já foram aplicadas
ao seu arquivo de saída.

O arquivo que vai
formatar a sua aplicação.

Então, vocês têm algumas classes
auxiliares, vocês têm algumas

variáveis que estão
dentro do seu projeto.

Ele também já tem um reset dele
para deixar o seu código mais enxuto.

Lembrando que ele vai buildar usando,
gerando

apenas as classes CSS
que você utilizar.

Então, eu preciso vincular esse
output no meu arquivo index.

De que forma?

Aqui na seção red.

Eu vou colocar aqui, linkando a CSS.

Conto, ponto e vírgula.

Deixa eu só arrumar isso daqui que

ficou meio estranho.

Linkando a CSS.

E aqui eu vou usar a tag de link.

Link.

E eu vou fazer referência a quem?

Ponto barra.

Ele já achou a pasta CSS.

Vou linkar com o meu
arquivo output CSS.

Isso significa o quê?

Se eu colocar aqui uma class
e utilizar, por exemplo, um bgred900.

Ok?

Então, ele buildou.

E provavelmente, quando eu for lá
na minha pagininha, ou quando eu for

abrir esse carinha na minha
pagininha, abrir de que forma?

Você vai dar um clique direito.

Vai abrir aqui no Live Server.

Ou então,
você pode vir aqui embaixo.

Aqui nessa partezinha inferior, né?

Mais precisamente.

E dá um clique nesse Go Live.

Tanto faz.

Ele vai trazer a sua página.

Veja que eu já tenho, né?

Esse fundo vermelho bem escuro.

Já é uma formatação dele.

Se você não aplicou
nenhuma formatação,

provavelmente o seu
conteúdo estará dessa forma.

Ele estará apenas
com a letrinha bem pequenininha,

posicionada na parte superior
esquerda do seu navegador.

Agora eu tenho certeza que o meu T1

Indie está funcionando corretamente
dentro da minha aplicação.

E agora basta a gente
criar a página.

Para deixar uma melhor experiência,

nós vamos consumir algumas coisas.

Então, eu separei uma fonte
que será utilizada

dentro do projeto,
uma fonte do Google Fontes.

E nós vamos consumir alguns ícones

aqui dentro da aplicação de uma biblioteca
muito legal chamada Box Icons.

Vamos dar uma olhada nesses caras e

preparar para ele receber
esses elementos.

Eu já posso até esconder minha pasta,
né, meu Explorer e baixar um

pouquinho o terminal.

É importante que esse
terminal esteja aberto.

Eu posso tirar o meu Olá Mundo.

E aqui eu vou começar a pegar
as minhas referências.

Então, a primeira coisa que eu quero

é o meu Google Fontes.

Então, eu vou colocar aqui
uma chamada do Google Fontes.

Vou aqui na minha aplicação.

Eu já deixei o browser
do Google Fontes aberto.

Então,
aqui nós temos as 1.

807 famílias de fontes
que você vai escolher.

Eu peguei a fonte Montserrat.

Essa fonte.

Então, você tem os styles dela.

Eu vou pegar com todos os styles.

Vou dar um clique em Get Fonte.

Vou aqui na parte para colocar essa

fonte no meu código.

E aqui, você tem a parte
onde você vai colocar

no head do seu HTML
a chamada do Google Fontes.

Vou copiar esse código.

E aí, eu vou colar esse código aqui.

Então, vou dar um Ctrl V.

Seu código, provavelmente, ficou um

pouquinho bagunçado,
como o meu ficou, né?

Não ficou organizado.

Então, eu vou dar um clique direito.

Vou formatar o documento.

Ele Fez a identação do nosso código,

tá?

Então,
clique direito, formatar o documento.

Ou você podia usar o atalho Shift

Alt F,
que vai fazer a mesma formatação.

Então, aqui eu estou com a fonte

Montserrat habilitada.

Como nós já sabemos, o Tailwind,
ele tem três padrões de fonte, né?

Então, nesse caso, eu estou falando
para ele, ó, use uma nova fonte.

Use essa fonte no projeto.

Então, o que a gente vai fazer?

A gente vai estender essa fonte lá

no nosso arquivinho
de configuração do Tailwind.

Então, o nosso código vai
ficar mais ou menos assim.

Vamos abrir aqui
o nosso Tailwind config.

Aqui na parte do Extend, nós vamos

colocar o seguinte.

Então, aqui no Extend, eu vou colar

esse código do fonte Family.

Então,
o que eu estou dizendo para ele?

Eu estou dizendo que agora a fonte
Sans, que é a fonte padrão, vai

utilizar o padrão Montserrat,
que é a fonte

que eu estou trazendo
aqui do Google Fontes.

Deixa eu dar uma quebra de linha,

aqui um View or Drap.

Assim, vocês conseguem ver melhor

toda a linha que eu trouxe
lá do Google Fontes.

Então, aqui você tem essa fonte

Montserrat,
que foi atribuída ao nosso elemento.

Isso significa o quê?

Se você colocar algum conteúdo aqui
no body, no H1, usando Montserrat,

bom, e eu colocar uma class aqui
para ele, de um text, por exemplo,

XL...

4XL, tá?

8XL, para deixar um pouquinho maior.

O que vai acontecer agora, quando
eu volto na minha página, ele está

usando a Montserrat
um tamanho grande.

Então,
é essa fonte que virou o padrão.

Virou o padrão por quê?

Virou o padrão porque eu estou
substituindo a Sans dele, com o

fallback de fontes que ele traz,
por essa Montserrat.

fonte instalada,
e vocês viram que é bem facinho.

Eu vou consumir lá no Google Fontes,

pegar o link e jogar aqui
dentro do meu Extend.

O quê que a gente vai fazer?

A gente vai consumir
alguns ícones também.

Esses ícones eu vou fazer via CDN,

para mostrar para vocês que também

podemos usar CDN, mesmo estando
usando o nosso Tailwind.

Vou fechar um pouquinho
o meu Tailwind Config.

Vou lá no meu navegador e eu vou
consumir os ícones dessa biblioteca,

chamada Box Icons,
que é uma biblioteca bem legal.

Ele tem uns traços
bonitos dos nossos ícones.

E ela é bem simples de ser

utilizada, de ser colocada.

Então, o quê que a gente vai fazer?

Aqui no link do Box Icons, boxicons

.com,
eu vou aqui na parte de uso dela.

Ele vai explicar para mim como que

ele pode instalar.

Você pode fazer a instalação,
inclusive, via NPM e consumir por lá.

Mas nós temos aqui a configuração

como uma fonte, né?

Porque vai ficar
mais fácil essa fonte.

Então, esse link aqui, nós

simplesmente vamos selecionar.

Bom, então eu selecionei
essa partezinha do início dele, do link,

até o fechamento, lá no final.

E esse carinha, eu vou jogar aonde?

Eu vou jogar dentro do meu Red, tá?

Para ser utilizado.

Eu costumo fazer o seguinte.

Eu costumo dar prioridade
ao carregamento do Google Fonts.

Se bem que ele já está
usando esse pre-connect,

então ele vai fazer
um carregamento mais rápido.

Por isso que é interessante usar
sempre a função de link, né?

Para você trazer fonte do Google.

E aqui eu vou colocar, né?

O meu Box Icons.

Só um comentáriozinho, para ficar

bem claro para você
o que a gente está fazendo.

E aqui eu colo a minha referência.

Beleza?

Se você quiser fazer um teste
para ver se está funcionando, e eu

garanto que já está,
o que a gente pode fazer?

A gente pode vir aqui nele, tá?

Por exemplo, pegar esse Castle aqui.

Quero pegá-lo no formato de fonte.

Você não precisa se preocupar
com essas configurações.

Que essas configurações de cor,
de tamanho.

Como é uma fonte, nós vamos
fazer isso tudo via T1 Indy.

Vou clicar nesse carinha.

E só para testar, vou jogar aqui, ó.

No lugar do meu Montserrat,
que eu sei que já está funcionando.

Vou colocar o meu ícone, tá?

Mas deixa eu tirar do H1,
que é mais bonitinho, né, Ezão?

Aqui sim eu consigo colocar
um text 8XL para fonte.

No caso, para o meu ícone, né?

Que está sendo tratado
como uma fonte.

Vamos lá na página, tá?

O nosso castelinho
já está funcionando.

Então, veja, ele já está aparecendo.

Seu box icons está funcionando.

Caso você não coloque essa linha,

obviamente ele não tem
como buscar essa referência

e provavelmente
o castelinho desaparecerá.

Então, vamos voltar com a referência.

e eu vou tirar esse carinha daqui
para começar o conteúdo da página.

Então, eu já tenho as referências
dos elementos, né, das aplicações

que eu vou utilizar
além do Tailwind.

O que a gente vai fazer?

A gente vai dar uma olhada
no layout e vou explicar

para vocês como que eu imaginei
a criação desse layout.

Vai receber aqui um outro container,

onde eu vou ter o meu
menu de navegação, vou ter

essa pequena logo que eu estou
tirando lá do box icons

e aqui esse menu
com essas três opções.

Esses caras estarão separados, né,
porque eu vou utilizar o Flexbox do

Tailwind para fazer
o posicionamento deles.

Aí nós teremos aqui
embaixo essa oficina web

que também será um outro
container e depois o Flex vai

posicionar os elementos
aqui para nós.

Vale ressaltar e você
deve ter percebido

que nós temos uma imagem
de fundo também.

Essa imagem de fundo nós vamos fazer

a referência dela lá no extend
do nosso arquivo de configuração.

Então, vamos olhar aqui
o nosso terminal de config.

Aqui no extend eu vou usar, vou

chamar essa imagem,
que é a imagem banner hero.

Eu quero que você perceba
também o seguinte, aqui

ela está um pouquinho
mais Clara e aqui ela está um

pouquinho mais escura, porque eu

coloquei um gradiente no código
para que ele fique um pouquinho mais

escuro,
facilitando a leitura do conteúdo.

Essa imagem banner hero, então, será
inserida aqui no Tailwind config.

Para isso, eu fiz o seguinte código.

Deixa eu só configurar
ele para ficar bonitinho e pronto.

Então, o que acontece?

Eu coloquei aqui dentro do extend
a minha propriedade de background

image, onde eu tenho
uma classe chamada hero.

Essa classe,
na realidade, o que vai acontecer?

Ela vai receber, essa imagem,
vai receber o linear gradiente que eu

montei, que deixou ele bem escurinho,
ou seja, esse carinha

aqui é o responsável por deixar
a imagem um pouco mais escura.

Então, é um gradiente
de uma tonalidade de azul com quase

opacidade total,
ela é totalmente opaca, basicamente,

ponto Nobre de opacidade,
para uma opacidade menor,

ou seja, ponto 6.

Então, ela está um pouquinho
mais transparente.

Vale ressaltar que eu montei esse
linear só porque eu achei que a

imagem estava muito Clara e,
provavelmente, ela iria complicar

a leitura do nosso conteúdo.

As cores que eu estou usando, você

pode utilizar,
você pode também alterar.

Inclusive, você pode mexer
nessa opacidade, deixando ela mais Clara,

ou se você preferir,
ainda mais escura.

Ao lado dele, nós temos uma URL
que está trazendo exatamente a minha

imagem banner hero,
que é esse carinha aqui.

Então, ela vai ficar mais escura,

graças a essa parte do código, e ela vai
ser inserida, ela será inserida,

graças a essa parte do código.

Posso fechar o meu TendConfig, posso
fechar o meu banner hero, e agora eu

vou começar a criação
desse elemento aqui.

Então, dentro do nosso conteúdo,
eu vou colocar aqui um comentário,

criando o reader e o hero da página.

Eu não quero que esse comentário
apareça, vou dar um CTRL, ponto e

vírgula para comentar,
e para ficar bem claro para você

aonde ele começa e onde ele termina,
eu vou duplicar

esse componente, essa...
esse comentário, na realidade, né?

CTRL, ponto e vírgula, vou abrir um

pouquinho de espaço,
e aqui, eu vou até fazer

o seguinte,
vou deixar esse comentário maior, tá?

Então, vou clicar aqui,
vou segurar a tecla ALT, vou

clicar aqui,
vou segurar a tecla ALT, clicar aqui,

segurar a tecla ALT,
clicar aqui, e vou aumentar

esse comentário
para ocupar todo o espaço.

Vou colocar aqui,
fim, header e hero da página.

Se você tiver um problema de toque
como eu tenho, você pode fazer isso,

simplesmente para ele ficar igual.

E aqui vem todo o código
que nós vamos desenvolver.

Então, vou criar um elemento

article, e esse elemento
article terá uma classe.

Bom, agora começa o seguinte, começa

toda a hipopeia de você criar
um componente e fazer a estilização com

a CSS do Twind
e com as classes do Twind.

Então,
nesse começo, para não ficar aquele

acúmulo de classes,
eu separei por apply.

Então, como eu tenho esse article
com, provavelmente, uma classe com

algum valor, que eu vou
aplicar para ela, nesse caso,

eu vou chamar de header ou hero,
o que eu vou fazer?

Eu vou criar um apply para ele.

Então, vamos dar uma olhadinha
como que ele vai ficar.

Vou colocar aqui a classHero.

Essa classHero será criada
dentro do nosso apply.

Dentro dele, o que nós temos?

Nós temos agora...
Então, criamos esse

componente e nós temos
aqui esse header.

Ou seja, nós temos esse cabeçalho.

Esse cabeçalho tem
uma imagem de ícone e aqui

ele tem exatamente
as nossas opções do menu.

Vamos voltar lá
e montar esse código.

Então, nosso código ficará assim.

Deixa eu dar um Shift
Alt F para identar.

Olha como facilita
para caramba a visualização

e você tem um código
sempre organizado.

Então, aqui dentro do nosso article,
nós temos essa classHero.

Essa classHero será um apply.

Nós criamos o header,
ou seja, uma tag semântica, né?

Que indica um cabeçalho.

Nesse caso,
o cabeçalho aqui do nosso hero,

que também terá uma class
desenvolvida por apply.

Aqui, eu já tenho o ícone.

Então, esse carinha que está
aparecendo aqui, ele representa o

ícone que nós vamos utilizar,
que eu peguei no Box Icons.

Então, esse cara é exatamente
esse quadradinho.

Percebam que essas duas classes dele,
Box e Box Package, ou seja,

esses dois carinhas, eles pertencem
à nossa biblioteca de ícones.

Só que eu criei uma classe,
também por apply, que é a ícone logo.

Abaixo dele,
nós temos um menu de navegação, né?

Nós temos um elemento de navegação.

Nós temos a tag e o L.

Essa tag eu já coloquei
o flex e o gap em três.

Ou seja, o espaçamento dele em três.

Definir as nossas Lis.

Cada uma das Lis com as opções de

Code, Developers e Job.

Cada um deles com a classe nave.

Essa classe nave,
ela será desenvolvida via apply.

Se a gente olhar ele na página, nós

vamos ter uma experiência
mais ou menos assim.

Olha, exatamente dessa forma.

Não se parece em nada
com aquela página.

A única coisa que ele tem aqui
é exatamente o nosso menu de navegação

e esse ícone pequeno.

Nós não temos nem a imagem de fundo,

nem o banner de fundo.

Então,
na realidade, a gente tem toda

a estrutura dos componentes,
dos elementos HTML.

Basta, agora, gerar os applies
com as classes do Tailwind.

Então, nós vamos lá no nosso arquivo
de estilização inicial, o arquivo de

entrada,
onde nós colocamos todas as diretivas

através daquele arroba,
tailwind e os componentes.

E ali nós criaremos
os nossos applies.

Cada apply representa uma classe
que está dentro do nosso elemento HTML.

Então, agora, nós vamos abrir
o nosso arquivo de CSS, o nosso style CSS.

E aqui eu vou colocar a diretiva.

Então, nós temos
o nosso arroba layer utilities.

Deixa eu fechar essas chaves.

E aqui a gente tem a primeira

formatação dele.

Então, o que nós temos?

Dentro do hero, quem que é o hero,

né?

O hero é todo esse meu article.

Então, dentro dele, nós criamos uma

fonte, uma largura dele,
ocupando 100% da altura da tela, né?

O sem VH.

Nós colocamos um WFull
para ocupar 100%.

Nós colocamos um flex, flex coluna.

Chamamos o nosso BG Hero,
que é a nossa imagem de fundo.

Definimos para ela não repetir e ela

ter o cover, né?

Ou seja, ela ocupar todo o espaço.

Vai ficar mais fácil se você ativar

aqui, por exemplo,
a sua extensão do Tailwind.

Tailwind.

Então, Tailwind.

CSS Intellicense.

Eu vou desinstalar.

Aquela parece que não
está funcionando.

Vou instalar novamente.

Beleza.

Provavelmente agora,
quando você passar o ponteiro

do mouse, você tem exatamente
a descrição de tudo que

eu falei para você.

Então, agora, com essa extensão,

essa extensão instalada, vai ficar
mais fácil de você visualizar as

classes, o que representa
cada uma dessas formatações.

Se a gente der uma olhadinha aqui na

nossa índex,
nós temos apenas a classe Hero.

Nós temos outros elementos aqui,

como o header,
que tem uma classe menu.

A gente tem o I
com a classe A e com o logo.

E nós temos aqui as naves com as

suas respectivas
diretivas lá para o Apply.

Se nós voltarmos na nossa página,

vocês já vão perceber que a nossa página
já está ocupando toda a tela,

tá?

O conteúdo está aqui bem
pequenininho ainda, certo?

A gente não tem visualização dele,

mas a gente já tem
o nosso componente.

Percebam que esse cara, ele já está

totalmente responsivo, né?

Também, vale ressaltar
que por causa dessa formatação

de largura em 100% e essa com 100VH,
a nossa imagem

de fundo já está
ocupando toda a tela.

Outra coisa,
aqui no BG Hero, é exatamente esse

carinha que traz a imagem
de fundo que nós estendemos

aqui no Tailwind Config, tá?

Então, foi dentro desse Hero
que nós aplicamos o BG, tracinho e colocamos

a palavrinha Hero para ele reconhecer
a nossa imagem de fundo.

Vamos atualizar e está aqui ela.

O que nós precisamos?

Nós precisamos montar
a outra parte dele, né?

Os outros itens que estão dentro

aqui do header menu, dentro do ícone

logo e dentro aqui
da nossa classe nave.

Então,
vamos pegar esse código e colar aqui.

Então, abaixo do Hero
e eu vou colar esses applies.

Shift, Alt, F para arrumar.

Então, meu elemento de menu.

Meu elemento de menu representa
todo o header da nossa página.

Então, esse elemento,
ele está configurado para ter

uma fonte, uma largura de 100%,
uma altura em 64.

pixels,
então 64 pixels de altura do menu.

Nós deixamos ele flex, ou seja, o

container ficou flexível.

Colocamos Justify Between
para fazer com que a primeira

opção, ou seja,
o nosso logo fique posicionado à

esquerda e as opções do menu
fiquem posicionadas à direita.

Colocamos um item center para ficar
centralizado verticalmente.

Colocamos uma margem em 20 pixels,

um padding esquerda
e direita em 40 pixels.

E aqui, nas telas menores, né, nas

telas que são LG, eu coloquei
um pixel de 20, um padding X de 20.

Ou seja, eu aumentei um pouquinho
a distância desse padding.

Abaixo do ícone logo, nós temos
os nossos ícones, ou seja, esse querido

aqui, que é o nosso ícone
buscado no box icons.

Nós colocamos ele com um text 5XL.

Coloquei um slate de 100, ou seja,
vai ficar com uma corzinha branca.

E aqui eu coloquei
uma animação do Tailwind.

O Tailwind já tem algumas
animações prontas,

né, as animações que são
feitas com keyframes.

E aí você chama
a propriedade animation

e executa essa animação
que você deseja.

No caso, o Tailwind já
tem esse carinha pronto.

Lá na documentação, basta você dar

uma olhada na parte
de animações e transições.

Abaixo dele nós temos a nave.

A nave representa cada um dos
nossos elementos de navegação.

E aí nessa nave eu coloquei
um posicionamento relativo.

Uma margem esquerda em 20 pixels.

A fonte, né, o peso da fonte em 600.

Uma altura, um espaçamento, perdão,

perdão, voltando.

Um espaçamento entre
as letras de 4 pixels.

E a cor branca, né, esse leite é um

cinza, mas com 100 ele fica
uma tonalidade branca.

Então, essas três classes
em conjunto com a classe

Hero devem formar isso
daqui no nosso conteúdo.

Então, percebam que o nosso menu
já está montado.

Percebam a animação
que já está acontecendo.

Ah, se você vir aqui dentro
da documentação do T1 Indy e colocar

aqui animation, ele já vai te dar...
eu tirei essa animação daqui, ó.

Você tem animate spin,
ping e você tem essa animação pulse.

Então, eu simplesmente copiei essa

classe e ele já me deu
essa animação montada.

Por isso que ele fica exatamente

aparecendo e ficando
um pouquinho mais apagadinho

com um determinado prazo,
um determinado tempo.

Para esse carinha aqui,
para o código, para o Deverbs

e para o Jobs,
eu achei que ficou muito

simples essa formatação,
esse posicionamento.

Então,
eu criei um apply para eles também.

Então, para as nossas opções de menu,
eu preparei essa formatação.

Shift Alt F para arrumar.

Então, eu defini o pseudo-elemento
after, que é um conteúdo que vai ser

inserido dinamicamente via CSS.

Então,
criei um apply para ele e coloquei

o content,
né, que é obrigatório como vazio.

Coloquei a posição absoluta, ou seja,
para ser em relação a ele, já

que a nave tem a posição relativa.

Busquei aqui a cor
desse elemento branca.

Dei uma altura para ele de 4 pixels.

Coloquei uma largura de 12 pixels.

Coloquei um left,
o posicionamento dele em zero.

Coloquei um posicionamento negativo,

inferior em menos 5,
para ele não ficar.

..

menos 5RM, ou 8 pixels, para ele não
ficar tão grudado no link.

Arredondamento da linha.

E o duration, ou seja, o tempo de

transição em 500,
ou seja, em meio segundo.

Quando você passar o ponteiro do mouse
sobre ele, o que vai acontecer?

Esse apply,
ele está executando exatamente isso.

Ele está montando esse tracinho
que vocês têm embaixo de cada um deles.

Então, esse tracinho veio daqui,

dessa formatação,
dessa pseudo-classe.

Quando passar o ponteiro do mouse
sobre ele, ele vai deixar de ter

aqui uma largura de 12 pixels.

Ele vai ocupar exatamente todo o

espaço do conteúdo.

Isso significa que passando o

ponteiro do mouse sobre ele,
ou seja, o hover, ele vai aumentar

a largura dele de 12,
para ocupar 100% da opção do menu.

Isso é muito comum em vários
menus de navegação.

Então, inclusive, você encontra
esse efeito no menu da FIAP.

Sempre as opções do link,
quando você passa o ponteiro

do mouse no menu principal,
elas vão completar

com um tracinho
basicamente igual a esse.

Vamos construir a parte de baixo,

a nossa parte onde nós temos o Hero,
na verdade.

Bom, então aqui, para ficar mais

específico, mais claro para você,

aqui vai ser o meu menu,
vai ser a minha parte de logo e menu.

Não vou comentar para não aparecer.

Então, SHIFT,
ALT, F para identificar esse código.

Vou duplicar,
SHIFT, ALT, seta para baixo.

Vou usar o ALT, setinha para baixo,

para descer até
o fechamento do header.

E aqui eu vou colocar FIM,
logo e menu.

Automaticamente, eu vou criar a

parte do Hero, tá?

Então, Hero, CTRL, ponto e vírgula,

comentou, SHIFT,
ALT, seta para baixo, duplicou.

E aqui eu vou colocar o FIM, Hero.

Não vou deixar esse
cara desse jeito.

Vamos arrumar esse carinha
para ele ficar igualzinho.

Pronto, beleza.

Vou colar o código
que eu fiz do Hero.

Então, o que nós temos nesse Hero?

Nós temos um Hero, uma Class Hero,

que também é um Apply,
dentro de um elemento de Section.

um H2 com Text 5XL, ou seja,
o tamanho da fonte, 48 pixels.

O P com uma largura de 50%
do tamanho do elemento aonde ele está

posicionado,
que no caso é o nosso Hero Section.

E aí, vale ressaltar que ele vai
ocupar 50% dos 100% desse elemento.

E aqui, o nosso Leading, que é

a altura da linha em 28 pixels.

Abaixo, eu tenho um elemento A com

a Class BTN para esse link.

Vamos ver como que ele ficou
na página e ele deve estar por aqui,

todo apagadinho, porque faltam as

formatações básicas
para posicionamento.

Perceba que o Text 5XL ele já
aplicou, esse tamanho aqui ele já

aplicou, e a classe BTN a gente
não tem ainda porque é um Apply.

Então, vamos lá colocar esse Apply.

Shift Alt F para ele arrumar.

O Hero Section tem
uma largura de 100%.

Ele tem uma altura de 100 VH.

Colocamos o Display Flex
para alinhar os elementos.

Flex Coal para posicionar
um abaixo do outro.

Text Slate 100 vai ser a nossa cor,

que vai ficar na corzinha branca.

Alinhamento centralizado, tanto
na horizontal quanto na vertical.

Espaçamento entre
os elementos em 32 pixels.

e o alinhamento
do texto centralizado.

Se a gente for dar
uma olhadinha agora

na nossa página,
nossa oficina web está dessa forma.

Basta a gente usar quem?

Formatar quem?

Formatar o nosso Access Now,
ou seja, o nosso elemento de botão.

Mas o restante ele já está
deixando formatado no padrão,

que nós temos aqui
no nosso elemento de desktop.

Então aqui a gente
tem esse elemento.

Vamos fazer a formatação dele.

Nós temos a class btn.

Então eu vou criar
uma diretiva aqui para ele.

De ponto btn.

Iniciando com o nosso apply.

Para esse cara,
eu vou colocar uma borda.

Então vamos colocar aqui as bordas.

Border 2, por exemplo, que ela vai
me dar uma borda de 2 pixels.

Então provavelmente ele já está
colocando aqui uma bordinha de 2

pixels para nós.

Vamos colocar aqui um padding,

provavelmente um padding X, tanto

para o eixo para a esquerda
e para a direita.

Vou colocar um padding X de 2, que vai
dar mais ou menos uns 8 pixels.

Vou colocar também.

Então já espaçou um pouquinho.

Já espaçou um pouquinho
aqui na lateral.

Dá até para espaçar
um pouquinho mais.

X4.

Tá bom.

Já espaçou um pouquinho mais.

Vou espaçar ele também
na parte superior.

Então pede Y.

Vou colocar 4 também.

Sempre juntinho.

Tá?

Deixa ele buildar aqui para a gente.

Rebuildando.

Beleza.

Então já colocou.

Eu acho que cabe até
um pouquinho mais na lateral.

Então posso colocar aqui um 8,
32 pixels.

Ficou melhor ainda.

E aqui eu posso
diminuir um pouquinho.

Deixar ele um pouquinho menor.

Coloquei ele com PY2.

Já melhorou.

Vou colocar aqui um rounded.

Então nós temos aqui
a opção de rounded SM.

Round, rounded MD.

Vou usar esse MD.

Já Fez o arredondamento dele aqui.

Toma cuidado para não exagerar.

Tá?

O rounded MD deu 6 pixels.

Se você quiser aumentar
um pouquinho mais.

Você pode colocar um LG.

Que vai dar 8.

Ou um XL.

que deve dar 12 pixels.

Ficar mais arredondadinho.

Ok.

E aqui a gente vai ter.

Também um hover.

Então, hover dois pontos.

Quando passar o ponteiro do mouse.

Sobre o elemento.

Eu quero colocar um BG.

No caso aqui.

Eu vou usar uma tonalidade de azul.

Um Sky.

Por exemplo.

800.

Bom.

Então, passou o ponteiro do mouse.

O botãozinho ficou no Sky 800.

Pronto.

Ficou melhorzinho de você ver agora.

Só que eu entendo que esse cara
podia ter um duration de 500.

Ou seja.

Ele vai levar 5
milésimos de segundo.

Meio segundo.

Para fazer esta transição.

Então, ele vai ficar
mais suave aqui para a gente.

Se vocês observarem,
nosso querido já está responsivo.

Bonitinho aqui para que a gente

consiga utilizar, inclusive,
em outros dispositivos menores.

Feito o Hero,
o que que a gente vai montar?

Nós vamos montar 3 cardzinhos.

Esses cardzinhos,
eles também estão bem

simples e eu também fiz
apply para todos eles.

Vamos dar uma olhada na telinha
e ver como que eles devem ficar.

Então, depois de montar essa carinha,
nós temos esses 3 carinhas aqui.

Nós temos esses 3 cards.

Esse cara, eu entendo que ele deve

ser um elemento que vai
receber os outros 3 cards.

Cada um desses cards vai
ter a mesma configuração.

Uma imagem, vai ter um título, uma

pequena publicação,
vai ter aqui um título deles, né?

Me basei nas diretivas que nós

estamos importando do T1ID
e aqui um pequeno texto.

Então, é esse carinha que nós vamos
montar, lembrando que as imagens já

estão disponíveis
dentro da nossa pasta

de imagens e você
vai receber

o endereço do repositório
com esse código.

Beleza?

Vamos para essa montagem.

Então,
finalzinho aqui do nosso header.

Vamos construir quem?

Vamos construir os nossos cards.

Então,
vou colocar aqui área de cards.

Contra o ponto e vírgula.

Vou duplicar com shift alt,
seta para baixo.

Fim, área de cards.

Vou deixar esse cara
um pouquinho melhor da gente ver.

E vou aumentar também, né?

Um clique,
seguro o alt, clico nos demais.

Vou aumentar um pouquinho.

Fechando o enter.

E aqui nós vamos
para a nossa área de cards.

Como os cards, eles parecem ser
o conteúdo principal da aplicação,

então o que eu vou fazer?

Eu vou colocar uma main com uma.

classe chamada gridCards.

Então, todos os nossos cards
ficarão dentro desse

elemento main,
esse elemento semântico do HTML.

E aí vem os nossos cards.

Então,
os cards eu montei dessa forma.

Vou passar os três cards para vocês.

Então, dá uma olhada.

Todos eles têm a mesma estrutura.

Então,
a minha ideia aqui foi bem simples.

Eu encapsulei os cards, né?

Dentro de uma section.

Então,
cada um deles tem uma section.

Bonitinha, organizadinha aqui.

Para que eles sejam clicáveis.

Então, todo o conteúdo das sections,

todo esse conteúdo,
ele está dentro de uma tag A.

E aqui você pode direcionar, se
você for usar esse card para alguma

aplicação sua,
ou para alguma entrega do curso,

você pode direcionar
o link desse cardzinho

para uma nova página
ou uma nova sessão.

Dentro dela, o que a gente tem?

A gente tem as imagens.

Vale ressaltar que nós temos
aqui a imagem card 1.

Um alt pensando na acessibilidade.

E eu já deixei essa imagem
com a classe de rounded.

Ou seja, tem um arredondamento
das bordas em 8px.

Tem um apply aqui
chamado card title.

Tem um apply chamado card date.

Tem um apply chamado
card title novamente.

Ou seja, estou aqui replicando
a mesma classe, reutilizando.

Tenho a card text,
que é o conteúdo do meu card.

Então, os três cards são iguais.

A única diferença são as classes
que vocês têm aqui formadas pelo apply.

Vamos usar essas classes agora.

Então, aqui vou colar os nossos cards
logo depois do nosso btn.

Tenta fazer sempre isso, tá?

Sempre traz esse elemento
na ordem dos applies.

Vai ficar muito mais fácil
para você dar manutenção.

E aí eu vou chegar aqui e vou
colar os nossos applies.

Shift Alt F para arrumar o código.

E aqui a gente tem a classe card,

né?

Que são cada um dos cardezinhos.

O apply do card tem
uma parte responsiva.

Aonde quando ele estiver em uma tela

que tenha no mínimo 7.6.8.

Nós vamos ter um display flex.

O alinhamento deles em colunas.

Shadow Slate.

Isso é uma sombra que vai
ficar em volta do card.

Shadow LG é a proporção
dessa sombra.

Então, no caso aqui vai dar
algo em torno de dois pixels.

Nós temos um padding de 1RM.

Ou seja, 16 pixels.

Então, padding geral.

Nós temos um padding Y.

Ou seja, apenas para o eixo
superior e inferior.

O eixo Y, né?

Em 24 pixels.

Rounded com 6px.

Espaçamento entre
os elementos do card.

Com um gap de 2 de 8 pixels.

Um hover.

Que quando passar o ponteiro
do mouse sobre o card.

Ele vai diminuir.

Está em 10%.

Ele vai diminuir
a altura e a largura.

Lembrando que o scale
é proporcional.

E a duração desse
efeito de meio segundo.

Abaixo nós temos o card title.

Apenas com o tamanho da fonte.

Peso da fonte.

E a margem.

Nós temos o card date.

Também com o peso da fonte.

Cor do texto.

Nesse cinzinho mais claro.

E aqui, esse text xs seria
a nossa fonte em 12px.

Uma fonte menor.

Nosso card text.

Tem o nosso card.

O conteúdo de texto dele.

Na cor grey 600.

Que é uma tonalidade de cinza.

Então, provavelmente nós já tenhamos

os nossos cards.

Bom, eles estão formatados.

Mas eles não estão posicionados
um ao lado do outro.

Por que?

Vamos dar uma olhada
no nosso código.

Aqui.

Ah, eu tenho a classe grid cards.

E eu não fiz a chamada
da classe grid cards.

Então, do apply de grid cards.

Eu vou colocar aqui.

Shift Alt F.

Pronto.

Faltou o essencial, né?

Deixar ele como flex.

Então, a gente tem aqui.

O posicionamento dele em 100%.

Tamanho máximo dele em 1280.

Ou seja, o container vai
ter no máximo 1280 pixels.

Nós temos MX Alto, né?

Para deixar ele alinhado tanto à

esquerda como à direita.

Centralizado pelo eixo horizontal,
na horizontal.

Uma margem superior
e inferior em 40.

Um maravilhoso flex
para fazer o posicionamento.

Flex Wrap.

Caso não caiba na página,
ele quebra.

E o Justify Center para fazer
um alinhamento nele vertical.

Provavelmente agora, sim,
os nossos cards estão na posição correta.

Às vezes a gente
precisa prestar um pouco

mais de atenção quando for
colocar as classes, né?

Porque vocês viram, eu simplesmente

esqueci daquela classe lá de

definição, que é justamente
a classe que está posicionando

os cards para que eles
fiquem um ao lado do outro.

Próximo passo agora é só
finalizar com o rodapé.

Esse rodapé está bem simples.

Vai ser um container recebendo um

texto e recebendo três
ícones lá do box icons.

O rodapé, ele tem essa barra,

escrito Oficina Web,
e os nossos ícones

aqui com o padrão de cor
e com o roverzinho.

Então, abaixo aqui da nossa área de

cards,
nós vamos criar nossa área de rodapé.

Vou colocar aqui o meu rodapé,

contra o ponto e vírgula começar,

fazer o comentário, e aqui eu vou

colocar o fim rodapé.

Vou clicar com Alt,

deixar o espaçamento aqui,

e vou abrir meu conteúdo.

Nós temos o código do rodapé,
que é exatamente isso.

Uma classe footer, que é um apply.

Um h3 com Oficina Web.

Aqui, para não usar o apply, porque

é bem pequeno,
são apenas duas classes.

Eu coloquei a classe de text
indigo 700 para a cor dele.

Coloquei ele como flex, e um gap 4

para o espaçamento
dos nossos ícones.

Os nossos ícones são
a chamada lá do box icons.

Nós temos apenas para ele,
que eles começam

com uma cor,
que vai ser essa cor índigo 700.

Quando passar o ponteiro do mouse
sobre eles, eles mudam aqui para

essa cor branca,
para esse text white.

Então, visualmente, nós já temos

isso, os nossos ícones aqui embaixo.

Basta o quê?

Basta a formatação
do apply para o rodapé.

Então, eu preciso dessa classe

footer, que é o meu apply.

Então, aqui abaixo, como último
apply, a gente tem o footer, que

está definido com uma cor de fundo
índigo, padrão do tailwind.

A largura dele posicionado em 100%.

A altura em 96 pixels.

Um pad em esquerdo e direito em 96

para ter um espaçamento maior.

O texto dele totalmente branco.

O tamanho da fonte em 24 pixels.

Flex para fazer o alinhamento.

localizado na horizontal
e na vertical.

Quando a gente executa essa página,
agora nós temos exatamente isso.

A nossa oficina web e os nossos ícones
mudando de cor quando a gente

altera, quando a gente
passa o conteúdo do mouse.

Se você chegar aqui e mexer na

telinha,
o seu conteúdo já está responsivo.

Ou seja, a sua aplicação já está
respondendo ao tamanho da sua tela.

Pronto.

A gente conseguiu
montar a pagininha.

Nós utilizamos várias formatações
existentes dentro do framework.

vários recursos dele,
como por exemplo no final o apply.

A estilização com flex,
a estilização

dos nossos textos,
imagens de fundo.

Enfim, deu para ter um overview
bem legal sobre o framework.

O Tailwind é poderosíssimo e ele vai

te ajudar muito no segmento
da sua profissão.

Vai te ajudar muito no desenvolvimento
front e na criação das páginas.

Então o que você tem que fazer?

Você tem que começar a utilizar cada
vez mais esse framework para que

esses recursos, essas classes
utilitárias sejam totalmente

costumeiras no seu dia a dia.