FULL STACK

IMPRESSIONADOR
Trilha Frontend moderna – HTML / CSS & JAVASCRIPT

Curso Completo de Desenvolvimento web – Full Stack

da Hashtag Programação
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 2
SUMÁRIO
NÍVEL TRILHA IMPRESSIONADORA - DO AVANÇADO AO IMPRESSIONADOR EM HTML/CSS

MÓDULO 1 FLEXBOX NO CSS MÓDULO 1 FLEXBOX NO CSS

1 APRESENTANDO O MÓDULO 009 14 DESAFIO 2 – FLEXBOX NA SEÇÃO O QUE FALAM 097

2 O QUE É E COMO USAR O FLEXBOX 012 15 DESAFIO 12 – FLEXBOX NA SEÇÃO NA MÍDIA 100
3 ESPAÇAMENTO ENTRE ELEMENTOS 018 16 DESAFIO 2 – FLEXBOX NA BLOG DA HASHTAG 101

4 MUDAR A DIREÇÃO DO FLEXBOX 023 17 DESAFIO 2 – FLEXBOX NA SEÇÃO COMO AJUDAR 106
5 TAMANHO DOS ELEMENTOS 028 18 DESAFIO 2 – FLEXBOX NA SEÇÃO MINICURSO 109
6 ALINHAMENTO E POSICIONAMENTO DOS ELEMENTOS 039 19 DESAFIO 2 – FLEXBOX NO RODAPÉ 112
7 DESAFIO 1 – CONSTRUINDO LAYOUTS COM FLEXBOX 055 20 EXERCÍCIOS EXTRAS – FLEXBOX FROGGY 120
8 DESAFIO 1 - GABARITO 057
MÓDULO 2 COMPONENTES PERSONALIZADOS NO HTML
9 DESAFIO 2 – FLEXBOX NA HOME DA HASHTAG 068
1 APRESENTANDO O MÓDULO 122
10 DESAFIO 2 – FLEXBOX NO CABEÇALHO 069
2 PAGINAÇÃO - APRESENTANDO O DESAFIO 123
11 DESAFIO 2 – FLEXBOX NA SEÇÃO HERO 075
3 PAGINAÇÃO - RESOLUÇÃO 1/2 124
12 DESAFIO 2 – FLEXBOX NA SEÇÃO CONTEÚDOS GRATUITOS 078
4 PAGINAÇÃO - RESOLUÇÃO 2/2 + CSS NESTING 130
13 DESAFIO 2 – FLEXBOX NA SEÇÃO DIFERENCIAIS 085
5 ACORDEÃO - APRESENTANDO O DESAFIO 137
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 3
SUMÁRIO
NÍVEL TRILHA IMPRESSIONADORA - DO AVANÇADO AO IMPRESSIONADOR EM HTML/CSS

MÓDULO 2 COMPONENTES PERSONALIZADOS NO HTML MÓDULO 3 GRID NO CSS

6 ACORDEÃO - RESOLUÇÃO 138 4 DEFININDO AS COLUNAS DA GRADE 208

7 POPUP – APRESENTANDO O DESAFIO 148 5 PROPRIEDADE GRID 216
8 POPUP - RESOLUÇÃO 149 6 POSICIONANDO OS ELEMENTOS 227

9 CARROSSEL – APRESENTANDO O DESAFIO 159 7 ESPAÇAMENTO ENTRE OS ELEMENTOS 249

10 CARROSSEL - RESOLUÇÃO 1/2 160 8 ÁREAS DENTRO DA GRADE 255
11 CARROSSEL - RESOLUÇÃO 2/2 169 9 ALINHAMENTO DOS ELEMENTOS 269

12 DESAFIO 2 – CRIANDO O POPUP DA HOME DA HASHTAG 172 10 PROPRIEDADE PLACE-ITEMS 279

11 AUTO-FIT E AUTO-FILL PARA CRIAR GRIDS RESPOSNSIVAS 283
13 DESAFIO 2 - GABARITO 173
12 GRID VS FLEX-BOX 287
MÓDULO 3 GRID NO CSS 13 DESAFIO 1 – CONSTRUINDO UM LAYOUT COM GRID 289
14 DESAFIO 1 – GABARITO 291
1 APRESENTANDO O MÓDULO 183 15 DESAFIO 2 – USANDO GRID NA SEÇÃO BLOG 309
2 COMO USAR O GRID 184 16 DESAFIO 2 - GABARITO 310
3 DEFININDO AS LINHAS DA GRADE 198 17 EXERCÍCIOS EXTRAS – GRID GARDEN 317

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 4
SUMÁRIO
NÍVEL TRILHA IMPRESSIONADORA - DO AVANÇADO AO IMPRESSIONADOR EM HTML/CSS

MÓDULO 4 ANIMAÇÕES E EFEITOS NO CSS MÓDULO 5 RESPONSIVIDADE E OTIMIZAÇÕES

1 APRESENTAÇÃO DO MÓDULO 319 01 APRESENTAÇÃO DO MÓDULO 435

2 TRANSIÇÕES - 1-2 320 02 MEDIA QUERIES 436
3 TRANSIÇÕES - 2-2 338 03 DESKTOP X MODIBLE FIRST 444
4 EFEITOS 2D 346 04 ESCOLHENDO AS MEDIAS QUERIES 447
5 EFEITOS 3D 375 05 IMAGENS RESPONSIVAS- TAG IMG (½) 451
6 KEYFRAMES 395 06 O QUE É DPR? 457
7 ANIMATION E SUAS PROPRIEDADES 400 07 IMAGENS RESPONSIVAS – TAG IMG (2/2) 461
8 @MEDIA (PREFERS-REDUCED-MOTION) 411
08 IMAGENS RESPONSIVAS – TAG PICTURE 465
9 DESAFIO 1 – CRIANDO UM ELEMENTO ANIMADO 414
09 IMAGENS RESPONSIVAS - CSS 468
10 DESAFIO 1- GABARITO 416
11 DESAFIO 2 – TRANSIÇÕES NA HOME DA HASHTAG 423 10 VARIÁVEIS NO CSS 476

12 DESAFIO 2 - GABARITO 424 11 IMPORTANDO FONTES 481

12 FONTES VARIÁVEIS 493

13 FONT-STACKING PARA OTIMIZAÇÃO DE FONTES 497

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 5
SUMÁRIO
NÍVEL TRILHA IMPRESSIONADORA - DO AVANÇADO AO IMPRESSIONADOR EM HTML/CSS

MÓDULO 5 RESPONSIVIDADE E OTIMIZAÇÕES MÓDULO 5 RESPONSIVIDADE E OTIMIZAÇÕES

14 LAZY LOADING 501 27 DESAFIO 2 – ÚLTIMA MEDIA QUERY PARA AS SEÇÕES DIFERENCIAIS, O
547
15 CARREGAMENTO DO CSS E ARQUIVOS DE ESTILIZAÇÃO 503 QUE FALAM E NA MÍDIA

16 DESAFIO 2 – DEIXANDO A HOME DA HASHTAG RESPONSIVA 505 28 DESAFIO 2 – FINALIZANDO A ÚLTIMA MEDIA QUERY 551

17 DESAFIO 2 – CRIANDO A PRIMEIRA MEDIA QUERY 506 29 DESAFIO 2 – CRIANDO A NEVAGAÇÃO MOBILE 559

18 DESAFIO 2 – ALTERANDO A PÁGINA INTEIRA MUDANDO UMA ÚNICA 512 30 DESAFIO 2 – FINALIZANDO A NEVAGAÇÃO MOBILE 566
COISA 31 DESAFIO 2 – OTIMIZANDO A HOME DA HASHTAG 573
19 DESAFIO 2 – ALTERANDO O LAYOUT DA SEÇÃO HERO 519
32 DESAFIO 2 – DEPLOY – COLOCANDO A NOSSA PÁGINA NO AR 582
20 DESAFIO 2 – ALTERANDO O LAYOUT DA SEÇÃO CONTEÚDOS GRATUITOS 523
21 DESAFIO 2 – ALTERANDO O LAYOUT DA SEÇÃO DIFERENCIAIS 529 MÓDULO 6 FLOAT NO CSS

22 DESAFIO2 – ALTERANDO O LAYOUT DA SEÇÃO O QUE FALAM 532

1 APRESENTANDO O MÓDULO 585
23 DESAFIO 2- ALTERANDO O LAYOUT DA SEÇÃO NA MÍDIA 536
2 COMO USAR AS PROPRIEDADES FLOAT E CLEAR 587
24 DESAFIO 2 – ALTERANDO O LAYOUT DA SEÇÃO BLOG 538
3 DESAFIO – CONSTRUINDO UM LAYOUT COM FLOAT 597
25 DESAFIO 2 –FINALIZANDO O LAYOUT DA MEDIA QUERY DE 767 A 480 540 598
4 DESAFIO - GABARITO

26 DESAFIO 2 – ÚLTIMA MEDIA QUERY PARA SEÇÃO HERO E CONTEÚDOS 545

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 6
SUMÁRIO
NÍVEL TRILHA IMPRESSIONADORA - DO AVANÇADO AO IMPRESSIONADOR EM HTML/CSS

MÓDULO 7 METODOLOGIA BEM MÓDULO 8 EXTENSÃO - SASS

1 APRESENTANDO O MÓDULO 606 5 CRIANDO E COMPILANDO NOSSO PRIMEIRO CÓDIGO 648

2 COMO FUNCIONA A METODOLOGIA 607 6 VARIÁVEIS 652
3 EXEMPLOS DA METODOLOGIA 610 7 NESTING X NATIVE NESTING 660
4 VANTAGENS, DESVANTAGENS E CONCLUSÃO 615 8 FUNCTIONS 664
5 CUIDADOS E OBSERVAÇÕES 617 9 MIXINS E INCLUDES 668
6 EXEMPLO PRÁTICO 620 673
10 EXTENDS

7 DESAFIO - APRESENTAÇÃO 629 11 CONTENT E IF 676

8 DESAFIO - GABARITO 630
12 BUILD: COMPILE, PREFIX AND COMPRESS 683

MÓDULO 8 EXTENSÃO - SASS 13 @FOR 690

14 PADRÃO 7-1 695

1 APRESENTANDO O MÓDULO 637
2 O QUE É SASS? 638
3 O QUE É NODEJS E O QUE É NPM? 640
4 INSTALANDO O NODEJS, NPM E SASS 642
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 7
SUMÁRIO
NÍVEL TRILHA IMPRESSIONADORA - DO AVANÇADO AO IMPRESSIONADOR EM HTML/CSS

MÓDULO 9 PROJETO DE PÁGINA DE CAPTURA (SASS) MÓDULO 9 PROJETO DE PÁGINA DE CAPTURA (SASS)

1 APRESENTANDO O MÓDULO 699 13 CRIANDO E COMPILANDO NOSSO PRIMEIRO CÓDIGO 752

2 COMO FUNCIONA A METODOLOGIA 700 14 VARIÁVEIS 756
3 EXEMPLOS DA METODOLOGIA 704 15 NESTING X NATIVE NESTING 759
4 VANTAGENS, DESVANTAGENS E CONCLUSÃO 709 16 FUNCTIONS 764
5 CUIDADOS E OBSERVAÇÕES 714 17 MIXINS E INCLUDES 767
6 EXEMPLO PRÁTICO 719 771
18 EXTENDS

7 DESAFIO - APRESENTAÇÃO 723 19 CONTENT E IF 775

8 DESAFIO - GABARITO 727

9 APRESENTANDO O MÓDULO 734

10 O QUE É SASS? 740
11 O QUE É NODEJS E O QUE É NPM? 745
12 INSTALANDO O NODEJS, NPM E SASS 750

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 8
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT
Módulo 1

FLEXBOX NO CSS
FLEXBOX NO CSS
FLEXBOX NO CSS
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Apresentação do Módulo (1/ 3) 9
Bem-vindo ao módulo de Flexbox no CSS, onde exploraremos técnicas essenciais para desenvolver interfaces web modernas e
responsivas. Neste módulo, abordaremos o uso de CSS Flexbox, uma poderosa ferramenta que permite criar layouts flexíveis e
eficientes com facilidade.

O que são Layouts?

Layouts referem-se à organização e disposição dos elementos visuais em uma página, seja ela impressa ou digital. No contexto do
design web, o layout se refere à forma como os elementos como texto, imagens, vídeos, menus de navegação e outros componentes
são organizados e apresentados em uma página da web. A estrutura do layout determina como os usuários interagem com o conteúdo,
influencia a estética da página e afeta a usabilidade e a experiência do usuário.

Os layouts desempenham um papel crucial na criação de uma experiência de usuário eficaz e agradável. Eles ajudam a guiar a atenção
dos usuários, facilitam a navegação, e podem transmitir a identidade visual e a mensagem de uma marca ou organização. Existem
diversos tipos de layouts, e a escolha depende de fatores como o conteúdo a ser apresentado, o público-alvo, e os objetivos do site.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Apresentação do Módulo (2/3) 10

Alguns dos conceitos e técnicas mais comuns usados na criação de layouts para a web incluem:

• Grade (Grid): Uma estrutura de linhas horizontais e verticais que ajuda a alinhar e organizar os elementos de uma página. Um
sistema de grid pode ser fundamental para criar layouts consistentes e bem organizados.

• Responsividade: Refere-se à capacidade do layout de se ajustar a diferentes tamanhos de tela e dispositivos. Layouts responsivos
garantem que o conteúdo seja acessível e visualmente agradável em smartphones, tablets, laptops e desktops.

• Propriedades de CSS: Ferramentas como display: flex, display: grid, e outras propriedades de CSS ajudam a controlar a disposição
dos elementos. Por exemplo, o Flexbox e o Grid Layout são sistemas que permitem criar layouts complexos de maneira simplificada
• .
• Hierarquia Visual: A organização dos elementos de uma maneira que reflita sua importância, usando técnicas como tamanho, cor,
contraste e espaçamento. A hierarquia visual ajuda a guiar os olhos dos usuários através da página e destacar informações
importantes.

• Espaçamento e Margens: O uso de espaços vazios entre elementos para melhorar a legibilidade e a estética geral da página. O
espaçamento adequado pode fazer uma grande diferença na maneira como os usuários percebem e interagem com o conteúdo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Apresentação do Módulo (3/3) 11
O Flexbox é um sistema de layout que oferece um conjunto de propriedades que facilitam o alinhamento e a distribuição de elementos
em contêineres, mesmo quando o tamanho dos itens é desconhecido ou dinâmico. Com ele, você pode controlar o espaçamento, o
alinhamento e a ordem dos elementos de forma muito mais intuitiva do que com métodos tradicionais de layout, como float ou inline-
block.

Durante este módulo, você aprenderá a utilizar as propriedades principais do Flexbox, como display: flex, justify-content, align-items,
flex-direction, entre outras. Também exploraremos como essas propriedades podem ser combinadas para criar layouts responsivos que
se adaptam a diferentes tamanhos de tela, garantindo uma experiência de usuário consistente e agradável.

Além disso, veremos exemplos práticos e desafios que ajudarão você a dominar o uso do Flexbox em projetos reais. Ao final do módulo,
você estará apto a criar layouts sofisticados e flexíveis, utilizando as melhores práticas do CSS para construir páginas web modernas e
funcionais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – O que é e como usar Flexbox (1/6) 12
Nesta aula, vamos começar a entender o que é o Flexbox
no CSS. Para isso, criaremos um arquivo HTML chamado
[Link]. Dentro desse arquivo, vamos adicionar alguns
elementos, como título (h1), subtítulo (h2) e parágrafos,
respeitando as tags semânticas do HTML, como <main> e
<section>. Com isso, vamos estruturar nosso arquivo para
entender o conceito de Flexbox.

O conteúdo dentro dos parágrafos será gerado pelo site

lorem Ipsum. E vamos adicionar três seções ao nosso
arquivo html.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – O que é e como usar Flexbox (2/6) 13
Agora, vamos adicionar alguns estilos padrão à nossa página. Para isso, utilizaremos a tag <style> dentro do nosso arquivo HTML para
inserir os estilos. É importante lembrar que, quando falamos de estilização e boas práticas, é sempre recomendável criar um arquivo
CSS separado. No entanto, para fins didáticos desta aula, vamos manter o CSS dentro do arquivo [Link].

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – O que é e como usar Flexbox (3/6) 14

O Flexbox, ou CSS Flexible Box Layout, é um layout modelo que facilita a distribuição de espaço e o alinhamento de itens em uma
interface de usuário. Ele é ideal para criar layouts responsivos e dinâmicos. O Flexbox é composto de dois principais elementos: o flex
contêiner e os flex items.
Flex contêiner
O flex contêiner é o elemento que define o contexto Flexbox. Para criar um flex contêiner, aplicamos a propriedade display: flex; a um
elemento. Este elemento, então, se torna um recipiente flexível para os itens que estão dentro dele, permitindo um controle avançado
sobre o alinhamento, direção, espaçamento e distribuição desses itens.

Neste exemplo, podemos transformar o <main> em um flex contêiner. Para isso, aplicaríamos a propriedade display: flex; ao <main>,
tornando seus filhos diretos (os <section>) em flex items.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – O que é e como usar Flexbox (4/6) 15
Quando aplicamos display: flex; a um contêiner, ele se torna um flex contêiner, e seus elementos filhos diretos se tornam flex items.
Por padrão, os flex items são dispostos ao longo do eixo principal do flex contêiner.

O comportamento padrão do eixo principal é horizontal. Isso significa que, ao aplicar display: flex; ao contêiner, os elementos que
originalmente estavam dispostos em uma coluna (um em cima do outro) agora são organizados em uma linha (um ao lado do outro).

Características Principais do Flexbox

• Unidimensionalidade: Flexbox é ideal para layouts em uma única dimensão, seja horizontal (linha) ou vertical (coluna). Ele facilita a
organização de elementos em linha ou coluna, permitindo uma melhor gestão do espaço entre eles.
• Contêiner Flex: O elemento pai que contém os itens flex, definido com a propriedade display: flex.
• Itens Flex: Os elementos filhos dentro do contêiner flex, que são dispostos e alinhados de acordo com as propriedades definidas no
contêiner e nos próprios itens.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – O que é e como usar Flexbox (5/6) 16
Quando você inspeciona um elemento que é um flex contêiner (ou seja, tem
display: flex ou display: inline-flex aplicado), o DevTools exibe informações
adicionais sobre o Flexbox e oferecem ferramentas específicas para trabalhar
com Flexbox:

• Visão Geral dos Eixos: Alguns DevTools destacam o eixo principal e o eixo
transversal do flex contêiner. Isso ajuda a visualizar rapidamente em qual
direção os flex items estão sendo dispostos (horizontalmente ou
verticalmente) e como estão sendo alinhados.

• Overlay de Distribuição de Espaço: Quando inspecionando um flex

contêiner, o DevTools pode mostrar um overlay visual indicando como o
espaço está sendo distribuído entre os flex items. Isso inclui margens, espaço
livre e o preenchimento dos itens.

• Visualização de Propriedades de Flex Items: Ao selecionar um flex item

individual, você pode ver suas propriedades específicas de Flexbox, como flex-
grow, flex-shrink, e flex-basis. Isso ajuda a entender como cada item está
contribuindo para o layout geral e como ele está se comportando dentro do
flex contêiner.

• Editor de Flexbox: Alguns DevTools oferecem um editor interativo para

experimentar as propriedades Flexbox. Por exemplo, você pode ajustar sliders
para justify-content, align-items, flex-direction, e outros, e ver como essas
mudanças afetam o layout em tempo real. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – O que é e como usar Flexbox (6/6) 17

No Flexbox, os eixos são fundamentais para entender

como os itens dentro de um flex contêiner são organizados
e alinhados. Existem dois eixos principais no Flexbox:

1. Eixo Principal (Main Axis)

• Direção: Por padrão, o eixo principal é horizontal.

• Alinhamento: Os itens flexíveis são alinhados ao longo
desse eixo. A direção e a disposição dos itens ao longo
do eixo principal são controladas pela propriedade flex-
direction.

2. Eixo Transversal (Cross Axis)

• Direção: O eixo transversal é perpendicular ao eixo

principal.
• Alinhamento: Controla o alinhamento dos itens no eixo
perpendicular ao eixo principal. Por exemplo, se o eixo
principal está horizontal (row), o eixo transversal será
vertical.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Espaçamentos entre os elementos (1/5) 18
Nesta aula, vamos abordar o espaçamento entre elementos utilizando as propriedades do Flexbox. Para observar como esses
conceitos se aplicam, vamos adicionar cores aos nossos elementos. Isso nos ajudará a entender melhor como os efeitos dos
espaçamentos funcionam.

Adicionaremos um background-color para cada uma das nossas seções, começando com a primeira section, e para as demais
vamos utilizar o seletor section:nth-child(2) é usado em CSS para estilizar o segundo elemento <section> que é um filho direto de
seu pai. Ele seleciona apenas o segundo <section> na ordem dos filhos, ignorando outros tipos de elementos que possam estar
entre eles. A contagem começa em 1, então nth-child(2) refere-se ao segundo filho na lista de filhos diretos.
Para estilizar outros filhos, você pode alterar o número dentro dos parênteses para corresponder à posição desejada. Por exemplo:
• section:nth-child(3) estiliza o terceiro <section>.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Espaçamentos entre os elementos (2/5) 19
Quando se trabalha com Flexbox, a ordem e o tipo de propriedades aplicadas ao contêiner e aos itens são importantes para
alcançar o layout desejado. Aqui está uma explicação de como isso funciona:

1. Aplicação das Propriedades no Flex contêiner

Primeiramente, você define o flex contêiner com as propriedades que vão afetar a organização e o alinhamento dos flex items
dentro dele.
2. Aplicação das Propriedades nos Flex Items
Depois de configurar o contêiner, você pode ajustar o comportamento e o alinhamento de cada flex item individualmente.

Propriedade gap:
A propriedade gap é utilizada no CSS Flexbox para definir o espaçamento entre os itens flexíveis dentro de um contêiner. Ela
facilita a criação de layouts com espaçamento consistente entre os itens, sem a necessidade de adicionar margens individuais aos
itens.

• Uso: Define o espaçamento entre os itens dentro de um contêiner flexível.

• Sintaxe: Pode ser definido com um valor único (para o espaçamento uniforme em todas as direções) ou com dois valores (para
espaçamento diferente horizontal e vertical).

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Espaçamentos entre os elementos (3/5) 20

Reflexo nos Flex Items:

• Espaçamento Uniforme: O gap cria um espaçamento uniforme entre todos os itens flexíveis. Não afeta o espaço interno dos
itens, apenas o espaço entre eles.
• Distribuição de Espaço: O gap não afeta o tamanho dos itens, mas aumenta o espaço entre eles. Se você tiver um espaço
definido de 10 pixels, haverá uma área de 10 pixels

Usar gap é mais simples e limpo do que ajustar margens individuais para criar espaçamento entre itens, especialmente quando se
tem vários itens e um layout complexo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Espaçamentos entre os elementos (4/5) 21
As propriedades column-gap e row-gap são utilizadas em CSS para definir o espaçamento entre colunas e linhas,
respectivamente, em layouts com flexbox. Elas permitem controlar o espaçamento entre itens de forma mais granular do
que a propriedade gap combinada. Aqui está como cada uma funciona:

Propriedade column-gap:

• Uso: Define o espaçamento entre as colunas em um contêiner flexível.

• Sintaxe: Pode ser definido com um valor de comprimento, como pixels, em, rem, etc.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Espaçamentos entre os elementos (5/5) 22
Propriedade row-gap:
• Uso: Define o espaçamento entre as linhas em um contêiner flexível.
• Sintaxe: Semelhante ao column-gap, você define o espaçamento com um valor de comprimento.

Uso com gap: As propriedades column-gap e row-gap são frequentemente usadas em conjunto com a propriedade gap. A
propriedade gap pode ser usada para definir ambos os espaçamentos ao mesmo tempo, mas se você quiser definir espaçamentos
diferentes para colunas e linhas, você pode usar column-gap e row-gap.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Mudar a direção do Flexbox (1/5) 23
A propriedade flex-direction no Flexbox é usada para definir a direção na qual os itens flexíveis são dispostos dentro do contêiner
flexível. Essa propriedade controla o eixo principal do flex contêiner e, consequentemente, o alinhamento e a disposição dos itens.
Valores da Propriedade flex-direction

Propriedade flex-direction : row (padrão)

• Descrição: Disposição dos itens na horizontal, da esquerda para a direita.

• Eixo Principal (Main Axis): Horizontal
Quando o valor de flex-direction é row, o eixo principal é horizontal. Os itens flexíveis são organizados da esquerda para a direita
(ou da direita para a esquerda se usar row-reverse).
• Eixo Transversal (Cross Axis): Vertical
O eixo transversal é perpendicular ao eixo principal. No caso de flex-direction: row, o eixo transversal é vertical. Isso significa que o
alinhamento dos itens ao longo do eixo transversal controla o posicionamento dos itens acima e abaixo no contêiner.

Resultado: Os itens são dispostos em uma linha horizontal. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Mudar a direção do Flexbox (2/5) 24
Propriedade flex-direction: column

• Descrição: Disposição dos itens na vertical, de cima para baixo.

• Eixo Principal (Main Axis): Vertical
Quando o valor de flex-direction é column, o eixo principal é vertical. Os itens flexíveis são organizados de cima para baixo (ou de
baixo para cima se usar column-reverse).
• Eixo Transversal (Cross Axis): Horizontal
O eixo transversal é perpendicular ao eixo principal. No caso de flex-direction: column, o eixo transversal é horizontal. Isso significa
que o alinhamento dos itens ao longo do eixo transversal controla o posicionamento dos itens à esquerda e à direita no contêiner.

Resultado: Os itens são dispostos em uma coluna vertical.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Mudar a direção do Flexbox (3/5) 25
A propriedade flex-wrap no Flexbox controla se os itens flexíveis dentro de um contêiner devem quebrar para a próxima linha (ou
coluna) quando não há espaço suficiente no contêiner. Ela permite que os itens se ajustem e se movam para novas linhas ou
colunas, em vez de forçar todos os itens a se manterem em uma única linha ou coluna.

Propriedade flex-wrap: nowrap (padrão)

• Descrição: Os itens flexíveis são mantidos em uma única linha ou coluna, e o contêiner flexível não permite quebra.
• Uso Comum: Ideal quando você deseja que todos os itens permaneçam em uma linha ou coluna, mesmo que isso signifique
que o contêiner precise de rolagem para acomodá-los.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Mudar a direção do Flexbox (4/5) 26
Propriedade flex-wrap: wrap

• Descrição: Os itens flexíveis quebram e se movem para a

próxima linha ou coluna quando não há espaço suficiente.
• Uso Comum: Ideal quando você deseja que os itens se ajustem
automaticamente em novas linhas ou colunas para evitar
overflow.

A direção dos itens no Flexbox é definida pela propriedade flex-

direction, e o comportamento da quebra é controlado pela
propriedade flex-wrap. Vamos esclarecer como isso funciona com
exemplos, tanto para flex-direction: row quanto para flex-direction:
column.

Comportamento de flex-wrap com flex-direction: row

Direção: Quando flex-direction é row, os itens são dispostos
horizontalmente.
Quebra: Com flex-wrap, os itens quebram para a próxima linha
horizontal quando não há espaço suficiente.

Resultado: Os itens são dispostos horizontalmente e, quando não há mais espaço horizontal, eles quebram para a linha seguinte
horizontalmente. A disposição ainda é horizontal, mas os itens se movem para a linha seguinte quando o espaço é insuficiente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Mudar a direção do Flexbox (5/5) 27
A propriedade flex-flow no Flexbox é uma forma abreviada para definir as propriedades flex-direction e flex-wrap ao mesmo
tempo. É útil para simplificar a sintaxe quando você deseja aplicar ambas as propriedades simultaneamente a um contêiner
flexível.

• <flex-direction>: Define a direção dos itens flexíveis no contêiner.

• <flex-wrap>: Define como os itens devem quebrar e se ajustar quando não há espaço suficiente no contêiner.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (1/11) 28
Nessa aula, vamos explorar algumas propriedades específicas dos flex-items, diferentemente das aulas anteriores. Vamos
entender como manipular o tamanho dos elementos usando o Flexbox.

A propriedade flex-basis é uma parte fundamental do Flexbox e define a base do tamanho dos itens flexíveis antes que o espaço
restante seja distribuído. Em outras palavras, ela especifica o tamanho inicial de um item flexível antes que a propriedade flex-
grow e flex-shrink entrem em ação.

Como Funciona o flex-basis

• Tamanho Inicial: O valor de flex-basis determina o tamanho inicial do item flexível, o qual pode ser ajustado dependendo do
espaço disponível e das propriedades flex-grow e flex-shrink.
• Comportamento: Se o tamanho do contêiner flexível não for suficiente para acomodar todos os itens com base no valor de
flex-basis, os itens serão redimensionados de acordo com flex-grow e flex-shrink.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (2/11) 29
Agora vamos alterar os seletores do CSS das nossas seções para conseguirmos aplicar outras propriedades do flexbox.

A propriedade flex-grow é usada no Flexbox para controlar como um item flexível deve crescer em relação aos outros itens dentro do
mesmo contêiner flexível quando há espaço extra disponível. Ela define a proporção do espaço extra que um item flexível deve
ocupar em comparação com os outros itens flexíveis.

• Espaço Extra: Quando o espaço disponível dentro do contêiner flexível é maior do que a soma dos tamanhos iniciais dos itens
(definidos por flex-basis), o espaço extra é distribuído entre os itens flexíveis de acordo com os valores de flex-grow.
• Proporcionalidade: O valor de flex-grow é um número que representa a proporção de espaço extra que o item deve ocupar. Se
todos os itens tiverem o mesmo valor de flex-grow, eles crescerão igualmente. Se alguns itens tiverem valores maiores, eles
ocuparão mais espaço extra.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (3/11) 30

<número>: Um valor numérico que representa a proporção do espaço extra que o item deve ocupar. O valor padrão é 0, que significa
que o item não crescerá além do tamanho inicial definido por flex-basis.

Resultado: O item mantém seu tamanho inicial e não ocupará espaço extra no contêiner.

Resultado: O item crescerá para preencher o espaço extra, e a quantidade de crescimento será proporcional ao valor de flex-grow em
relação aos outros itens.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Tamanho dos elementos (4/11) 31

Vamos detalhar mais propriedade flex-grow!

O que é flex-grow?
Imagine que você está organizando uma prateleira e tem três caixas. A prateleira é a largura do contêiner, e as caixas são os itens
flexíveis dentro desse contêiner. Agora, imagine que a prateleira é bem mais larga do que o total da largura das três caixas juntas. O
que você faz com o espaço extra? É aqui que entra o flex-grow.

O Problema
Quando você usa Flexbox para organizar itens em um contêiner, pode haver situações em que há espaço extra sobrando no
contêiner. Esse espaço extra precisa ser distribuído de alguma forma entre os itens dentro do contêiner.

Como Funciona o flex-grow

flex-grow é uma propriedade que diz ao navegador quanto um item flexível deve crescer em relação aos outros itens para ocupar
esse espaço extra.

• Valor de flex-grow: Esse valor é um número. O valor padrão é 0, o que significa que o item não vai crescer para ocupar o espaço
extra. Qualquer valor maior que 0 fará o item crescer para preencher o espaço disponível.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (5/11) 32

Situação Inicial:
Você tem um contêiner (prateleira) com 600 pixels de largura e três itens (caixas) dentro dele. Cada item tem 100 pixels de largura. No
total, os itens ocupam 300 pixels, então há 300 pixels de espaço extra.

Comportamento Sem flex-grow

Se todos os itens tiverem flex-grow: 0, eles não vão crescer. Eles vão manter a largura de 100 pixels, e o espaço extra de 300 pixels vai
permanecer vazio.

Comportamento Sem flex-grow

Se todos os itens tiverem flex-grow: 0, eles não vão crescer. Eles vão manter a largura de 100 pixels, e o espaço extra de 300 pixels vai
permanecer vazio.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (6/11) 33
Adicionando flex-grow:
Vamos adicionar flex-grow para ver como os itens podem crescer para ocupar o espaço extra.

• Resultado: Todos os itens vão crescer igualmente para ocupar o espaço extra. Cada item agora terá 200 pixels de largura, porque o
espaço extra de 300 pixels será dividido igualmente entre os três itens.

Diferentes Valores de flex-grow

E se quisermos que os itens cresçam de forma desigual? Podemos atribuir valores diferentes de flex-grow.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (7/11) 34

• Resultado: O espaço extra será dividido em 4 partes (1 + 2 + 1 = 4). O primeiro e o terceiro itens crescerão para ocupar 1/4 do espaço
extra cada um, e o segundo item crescerá para ocupar 2/4 (ou metade) do espaço extra.

• Inicialmente:
• contêiner: 600px
• Itens: 100px cada, totalizando 300px
• Espaço extra: 300px

• Com flex-grow: 1:
• contêiner: 600px
• Itens: 200px cada (100px base + 100px de crescimento)
• Espaço extra distribuído igualmente

• Com flex-grow Diferentes:

• Item 1: 150px (100px base + 50px de crescimento)
• Item 2: 300px (100px base + 200px de crescimento)
• Item 3: 150px (100px base + 50px de crescimento)

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (8/11) 35

Então, voltando ao cenário anterior, vamos usar a propriedade flex-basis em nossas seções para definir um tamanho fixo. Assim, será
possível utilizar a propriedade flex-grow de forma eficaz.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (9/11) 36
A propriedade flex-shrink é uma das três propriedades que compõem o
modelo flexível do Flexbox, juntamente com flex-grow e flex-basis. Ela
define a capacidade de um item flex encolher se necessário, para acomodar
o espaço disponível no contêiner flex.

Conceito de flex-shrink
A propriedade flex-shrink especifica o fator de redução de um item flex
quando o contêiner flex tem menos espaço do que o necessário para todos
os itens. Em outras palavras, ela determina quanto o item deve encolher em
relação aos outros itens no contêiner quando há um overflow.

Como Funciona
• Fator de Encolhimento: O valor de flex-shrink é relativo. Se todos os itens
tiverem um valor de flex-shrink igual a 1, todos encolherão igualmente
quando o contêiner não tiver espaço suficiente. Se um item tiver um valor
de 2 e outro tiver um valor de 1, o item com flex-shrink: 2 encolherá duas
vezes mais do que o item com flex-shrink: 1.
• Comportamento Padrão: O valor padrão de flex-shrink é 1, o que significa
que os itens encolherão igualmente se o espaço no contêiner for
insuficiente.
• Zero e Valores Negativos: Um valor de flex-shrink de 0 impede que o
item encolha. Valores negativos não são válidos.
• Interação com Outras Propriedades Flex: A propriedade flex-shrink
funciona em conjunto com flex-grow e flex-basis para definir o
comportamento de dimensionamento dos itens flex. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Tamanho dos elementos (10/11) 37
A propriedade flex é uma propriedade abreviada no CSS que combina três propriedades flex individuais: flex-grow, flex-shrink, e flex-
basis. Esta propriedade é usada para definir como um item flexível (flex item) se comporta dentro de um contêiner flexível (flex
contêiner), permitindo ajustar o crescimento, encolhimento e tamanho base do item.

Sintaxe
A propriedade flex pode ser escrita de várias maneiras, dependendo das necessidades específicas do layout. Aqui está a sintaxe
básica:

• flex-grow: Um número que define a capacidade do item de crescer se houver espaço disponível. O valor padrão é 0.
• flex-shrink: Um número que define a capacidade do item de encolher se houver falta de espaço. O valor padrão é 1.
• flex-basis: O tamanho inicial do item antes de quaisquer ajustes de crescimento ou encolhimento. Pode ser um comprimento
específico (como px, em, etc.) ou auto. O valor padrão é auto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Tamanho dos elementos (11/11) 38
Utilizar propriedades abreviadas, como flex, em vez de propriedades individuais, como flex-
grow, flex-shrink, e flex-basis, oferece várias vantagens em termos de conveniência,
legibilidade e manutenção do código. Aqui estão alguns motivos para usar propriedades que
englobem outras:

• Sintaxe Mais Concisa: A propriedade flex permite definir três valores (crescimento,
encolhimento e base) em uma única linha, reduzindo a quantidade de código necessária.
• Configuração Rápida: Usar flex é mais rápido e intuitivo quando você quer configurar o
comportamento flexível de um item de forma consistente.
• Código Mais Limpo: Propriedades abreviadas podem tornar o código mais limpo e fácil de
ler, especialmente quando você tem muitos itens flexíveis no contêiner.
• Redução de Redundância: Simplifica a leitura e manutenção do CSS, evitando a
redundância de propriedades.
• Facilidade de Manutenção: Alterações futuras no comportamento flexível de um item são
mais fáceis de implementar e verificar quando se utiliza uma única propriedade abreviada.
• Consistência: Garante que todas as propriedades relacionadas ao comportamento flexível
sejam atualizadas de forma consistente, evitando inconsistências no layout.
• Convenção e Padronização: Usar propriedades abreviadas é uma prática comum e
recomendada na comunidade de desenvolvimento web, promovendo um estilo de código
mais padronizado.
• Boas Práticas: Facilita a adoção de boas práticas de CSS, onde a simplicidade e a clareza
são valorizadas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (1/16) 39

No Flexbox, o alinhamento de elementos é um dos aspectos mais poderosos e flexíveis do modelo. Ele permite que você controle como
os itens dentro de um contêiner flexível são distribuídos e posicionados ao longo de dois eixos principais: o eixo principal (main axis) e o
eixo transversal (cross axis). O alinhamento no Flexbox abrange tanto a distribuição do espaço entre os itens quanto o posicionamento
dos itens em relação ao contêiner e uns aos outros.

Eixos do Flexbox

Eixo Principal (Main Axis):

• Este é o eixo ao longo do qual os itens flexíveis são dispostos, que pode ser horizontal ou vertical, dependendo da direção do
contêiner flexível (flex-direction).
• Os itens são alinhados ao longo desse eixo usando propriedades como justify-content.

Eixo Transversal (Cross Axis):

• Este é o eixo perpendicular ao eixo principal. Por exemplo, se o eixo principal for horizontal, o eixo transversal será vertical, e vice-
versa.
• O alinhamento dos itens ao longo deste eixo é controlado por propriedades como align-items e align-self.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (2/16) 40
Tipos de Alinhamento

Alinhamento ao Longo do Eixo Principal (Main Axis):

• Distribuição do Espaço: A propriedade justify-content controla como o espaço disponível é distribuído entre os itens ao longo do
eixo principal. Você pode, por exemplo, centralizar os itens, distribuí-los igualmente ou alinhá-los em uma extremidade.

Alinhamento ao Longo do Eixo Transversal (Cross Axis):

• Posicionamento Vertical: A propriedade align-items define como os itens são alinhados ao longo do eixo transversal, afetando sua
posição vertical (quando o eixo principal é horizontal) dentro do contêiner flexível.

Alinhamento Individual: A propriedade align-self permite que você sobrescreva o alinhamento transversal de um único item
dentro do contêiner.

Alinhamento do Contêiner Flexível:

• Distribuição em Colunas e Linhas: A propriedade align-content controla a distribuição do espaço entre linhas ou colunas de itens
flexíveis dentro do contêiner, principalmente quando há mais de uma linha ou coluna.

Conceito Geral
O alinhamento no Flexbox é altamente flexível, permitindo não apenas o posicionamento básico dos itens, mas também a criação
de layouts complexos e responsivos. Com as propriedades de alinhamento, você pode centralizar itens, espaçá-los
uniformemente, alinhá-los em grupos, ou ajustá-los dinamicamente com base no espaço disponível, tudo dentro de um único
contêiner flexível.
Essa capacidade de controlar o alinhamento de itens tanto ao longo do eixo principal quanto do eixo transversal é uma das razões
pelas quais o Flexbox é tão popular para criar layouts web modernos, oferecendo aos desenvolvedores uma maneira poderosa de
construir interfaces adaptáveis e bem organizadas. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (3/16) 41
A propriedade justify-content no Flexbox é usada para alinhar e distribuir os itens flexíveis ao longo do eixo principal do contêiner
flexível. O eixo principal pode ser horizontal ou vertical, dependendo da configuração da propriedade flex-direction. A função principal
de justify-content é controlar como o espaço disponível entre os itens flexíveis é distribuído, seja em uma única linha ou em múltiplas
linhas dentro do contêiner.

Possíveis Valores de justify-content

center:
• Centraliza os itens ao longo do eixo principal.
• O espaço extra é distribuído uniformemente em ambos os lados dos itens.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (4/16) 42
flex-start (valor padrão):
• Alinha os itens no início do eixo principal.
• Se o eixo principal for horizontal (como no caso de flex-direction: row), os itens serão alinhados à esquerda.
• Não há espaço extra distribuído entre os itens.

flex-end:
• Alinha os itens no final do eixo principal.
• No caso de um eixo horizontal, os itens serão alinhados à direita.
• Não há espaço extra distribuído entre os itens.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (5/16) 43
space-between:
• Distribui os itens ao longo do eixo principal com o máximo de espaço possível entre eles.
• O primeiro item fica alinhado ao início e o último ao final do contêiner, com espaço igual entre os itens intermediários.

space-around:
• Distribui os itens com espaço igual ao redor de cada item.
• O espaço ao início e ao final do contêiner será metade do espaço entre os itens, pois o espaço é aplicado antes e depois de cada item.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (6/16) 44
Quando Usar justify-content

• Centralizar Conteúdo: Use justify-content: center para centralizar itens ao longo do eixo principal.
• Distribuir Espaço: Use justify-content: space-between ou space-around quando precisar distribuir espaço de forma igualitária entre
os itens.
• Alinhar à Direita ou à Esquerda: Use justify-content: flex-start ou flex-end para alinhar os itens em uma extremidade específica do
contêiner.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (7/16) 45
A propriedade align-items no Flexbox é usada para controlar o alinhamento dos itens flexíveis ao longo do eixo transversal (cross axis)
dentro de um contêiner flexível. O eixo transversal é perpendicular ao eixo principal, que pode ser vertical ou horizontal, dependendo
de como o contêiner flexível está configurado.

Conceito de align-items
• Eixo Transversal: O alinhamento feito por align-items ocorre ao longo do eixo transversal. Por exemplo, se o eixo principal for
horizontal (flex-direction: row), o eixo transversal será vertical, e align-items controlará o alinhamento vertical dos itens.
• Impacto nos Itens: A propriedade afeta todos os itens dentro do contêiner flexível, determinando como eles são distribuídos em
relação ao eixo transversal.

Valores de align-items

center:
• Centraliza os itens ao longo do eixo transversal.
• Isso posiciona os itens no meio do contêiner, verticalmente se o eixo transversal for vertical.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (8/16) 46
flex-start:
• Alinha os itens ao início do eixo transversal.
• Se o eixo transversal for vertical, os itens serão alinhados ao topo do contêiner.

flex-end:
• Alinha os itens ao final do eixo transversal.
• Se o eixo transversal for vertical, os itens serão alinhados à base do contêiner.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (9/16) 47
center:
• Centraliza os itens ao longo do eixo transversal.
• Isso posiciona os itens no meio do contêiner, verticalmente se o eixo transversal for vertical.

baseline:
• Alinha os itens ao longo de suas linhas de base de texto.
• Útil quando você deseja alinhar itens com diferentes alturas baseados na linha de base do texto dentro dos itens.

stretch (valor padrão):

• Estica os itens para que preencham o contêiner ao longo do eixo transversal.
• Se o tamanho dos itens for menor do que o contêiner, eles serão esticados para preencher a altura ou largura do contêiner,
dependendo da orientação do eixo transversal. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (10/16) 48
Quando Usar align-items

• Alinhar Verticalmente em um Contêiner Horizontal: Se você tiver um contêiner com itens dispostos em uma linha (flex-direction:
row), align-items ajuda a controlar o alinhamento vertical dos itens.
• Alinhar Horizontalmente em um Contêiner Vertical: Se o contêiner tiver itens dispostos em uma coluna (flex-direction: column),
align-items controlará o alinhamento horizontal.
• Uniformizar a Altura dos Itens: Usar align-items: stretch é útil quando você deseja que todos os itens preencham o contêiner
uniformemente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (11/16) 49
O Flexbox oferece a poderosa capacidade de alterar a ordem visual dos elementos dentro de um contêiner flexível, sem alterar a
ordem dos elementos no HTML. Isso significa que, mesmo que os itens estejam em uma certa ordem no código-fonte, você pode
reorganizá-los visualmente usando CSS.

Conceito de Alteração de Ordem com Flexbox

No modelo tradicional de layout em CSS, a ordem dos elementos na página é determinada diretamente pela ordem em que eles
aparecem no HTML. Para alterar essa ordem, os desenvolvedores precisavam recorrer a métodos complexos, como o uso de
posicionamento absoluto ou manipulações em JavaScript, o que poderia levar a um código mais complicado e menos acessível.

Com o Flexbox, a ordem visual dos itens pode ser controlada diretamente através de CSS, sem necessidade de alterar o HTML.
Isso é especialmente útil em layouts responsivos, onde a ordem dos elementos pode precisar ser ajustada em diferentes
tamanhos de tela ou dispositivos.

Benefícios de Alterar a Ordem Visual

Flexibilidade no Design Responsivo:

• Em dispositivos móveis, você pode querer que certos elementos apareçam antes ou depois de outros para melhorar a
usabilidade ou o design.
• Por exemplo, em um layout de coluna única para dispositivos móveis, você pode querer que um elemento de destaque
apareça primeiro, mesmo que no layout de desktop ele esteja em uma posição diferente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (12/16) 50
Independência da Estrutura HTML:
• Permite que você mantenha a estrutura HTML em uma ordem lógica e semântica, enquanto ajusta a apresentação visual dos
elementos de acordo com as necessidades do design.
• Isso melhora a acessibilidade, já que a ordem dos elementos no HTML pode ser otimizada para leitores de tela e SEO.

Simplicidade no Código:
• Ao usar Flexbox para alterar a ordem dos itens, você evita a complexidade de soluções anteriores, tornando o código CSS mais
limpo e fácil de manter.

Como Funciona
A mudança na ordem dos elementos no Flexbox é feita utilizando a propriedade order, que permite especificar a posição de
um item em relação aos outros. Cada item em um contêiner flexível tem uma ordem padrão de 0, e você pode atribuir
valores positivos ou negativos para alterar a posição de um item específico.

Para aplicarmos a propriedade order, vamos fazer as seguintes alterações em nosso arquivo na estrutura de html e css:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (13/16) 51
A propriedade order no Flexbox é usada para controlar a ordem na qual os itens flexíveis aparecem no contêiner flexível. Por
padrão, os itens são dispostos na ordem em que aparecem no código HTML, mas a propriedade order permite que você
modifique essa ordem sem alterar o HTML subjacente.

Como Funciona a Propriedade order

Cada item em um contêiner flexível tem uma ordem padrão de 0. A propriedade order aceita valores inteiros, tanto positivos
quanto negativos, que determinam a posição do item em relação aos outros itens dentro do contêiner.

• Itens com valores menores de order aparecem antes. Se um item tiver um valor de order menor que os outros, ele será
exibido primeiro.
• Itens com valores maiores de order aparecem depois. Se um item tiver um valor de order maior que os outros, ele será
exibido por último.
• Itens com o mesmo valor de order mantêm a ordem original. Se vários itens têm o mesmo valor de order, eles aparecerão na
ordem em que estão no HTML.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (14/16) 52
Valores da Propriedade order

• Valores Negativos: Colocam o item antes dos itens que têm valores order de 0 ou
superiores.
• Valor Zero (0): Este é o valor padrão, e os itens com order: 0 aparecem na ordem
em que estão no HTML.
• Valores Positivos: Colocam o item depois dos itens que têm valores order
menores.

A propriedade order é extremamente útil em várias situações, especialmente em

layouts responsivos:

• Reordenar Elementos para Diferentes Dispositivos: Em um design responsivo,

você pode usar order para modificar a posição dos elementos em telas de
diferentes tamanhos, sem precisar duplicar ou reescrever o HTML.

• Destacar Elementos Específicos: Pode ser usada para mover itens importantes ou
destacados para a frente ou para a parte superior da interface, sem alterar a
estrutura subjacente.

• Flexibilidade em Layouts Dinâmicos: Oferece a capacidade de criar layouts

dinâmicos que podem se adaptar a diferentes contextos e necessidades de forma
eficiente.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (15/16) 53
No Flexbox, a propriedade align-items é usada para alinhar todos os itens flexíveis (filhos) dentro de um contêiner flexível (pai) ao
longo do eixo transversal (cross axis). Isso significa que todos os itens filhos dentro do contêiner herdam o mesmo alinhamento
determinado pelo align-items.

A propriedade align-self permite que você sobrescreva o alinhamento definido por align-items para um item específico dentro
do contêiner. Isso significa que, enquanto align-items define um alinhamento padrão para todos os itens, align-self pode ser
usado em um item filho individual para ajustá-lo de forma diferente dos outros.

Como align-self Funciona

Você pode aplicar align-self a qualquer item filho para que ele tenha um alinhamento único, independentemente do valor de
align-items definido no contêiner pai.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Alinhamento e Posicionamento dos elementos (16/16) 54
Quando Usar align-self

• Alinhamento Diferenciado: Quando um item específico precisa de um alinhamento diferente dos demais.
• Layout Personalizado: Em layouts complexos, onde certos itens precisam de posicionamento especial, align-self permite essa
personalização sem precisar criar regras CSS adicionais ou contêineres separados.
• Melhor Controle Visual: Dá ao desenvolvedor mais controle sobre o layout final, permitindo ajustes finos no posicionamento
de itens individuais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Construindo Layouts com Flexbox (1/2) 55
Agora que temos a estrutura básica do anúncio da Smart TV, é hora de dar um passo adiante e melhorar o layout utilizando o
Flexbox. O Flexbox nos permitirá organizar os elementos da página de forma mais eficiente e responsiva, garantindo que o design
se adapte melhor a diferentes tamanhos de tela e proporcione uma experiência visual mais agradável.

O que faremos a seguir:

• Estrutura de Layout: Usaremos o Flexbox para alinhar e distribuir os elementos dentro das seções de forma mais controlada.
Por exemplo, podemos alinhar o texto ao lado da imagem da Smart TV ou centralizar o conteúdo para que ele fique bem
posicionado independentemente do tamanho da tela.

• Alinhamento de Itens: Com o Flexbox, podemos garantir que os itens dentro de cada seção sejam alinhados de maneira
consistente. Isso inclui centralizar botões, ajustar listas, e organizar as seções de "Características" e "Condições" para que fiquem
mais uniformes.

• Responsividade: Flexbox facilita a criação de layouts que se adaptam dinamicamente ao tamanho da tela. Isso significa que
seu anúncio ficará visualmente atraente em dispositivos móveis, tablets e desktops, sem a necessidade de grandes ajustes.

• Melhorias Estéticas: Além da organização, o Flexbox também nos permitirá implementar pequenos ajustes estéticos, como
espaçamento entre elementos, que podem fazer uma grande diferença na aparência geral do site.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Construindo o Layouts com Flexbox (2/2) 56
Vamos começar a aplicar o Flexbox no arquivo CSS, aprimorando o layout do anúncio da Smart TV. Isso envolverá definir
contêineres flexíveis para as seções principais e ajustar as propriedades de alinhamento e distribuição de espaço para otimizar o
design.

FLEXBOX

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (1/11) 57
Vamos iniciar os primeiros ajustes no arquivo html e css:

css

HTML DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (2/11) 58
Agora vamos retirar todas as margens do nosso html, vamos apenas deixar o estilo padrão margin: 0 e no elemento ul a margem
será de 2.4rem.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (3/11) 59

Com essas propriedades estamos garantindo que o conteúdo

dentro do <figure> (a imagem e a legenda) fique alinhado e
organizado verticalmente, com ambos os elementos centralizados
horizontalmente, criando um layout mais equilibrado e
visualmente agradável.

• display: flex; Transforma o <figure> em um contêiner

flexível, permitindo que os elementos dentro dele (como
a imagem <img> e o texto <figcaption>) sejam
organizados usando as propriedades do Flexbox.

• flex-flow: column; Define a direção do layout dos itens

dentro do <figure> em uma coluna. Isso significa que os
elementos serão dispostos verticalmente, um embaixo
do outro.

• align-items: center; Centraliza os itens ao longo do eixo

transversal (neste caso, o eixo horizontal, pois estamos
usando column). Isso faz com que a imagem e a legenda
fiquem centralizadas horizontalmente dentro do
<figure>.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Desafio 1 – Gabarito (4/11) 60

HTML css

• A <div class="contêiner-preco"> agrupa todos os • display: flex;Transforma o elemento com a classe .contêiner-preco
elementos relacionados ao preço, como o título "Preço" e em um contêiner flexível. Isso significa que os elementos filhos
as informações sobre o valor e o desconto. Isso torna o (nesse caso, o <h2> e a <div> que contém os parágrafos) serão
código mais legível e facilita a manutenção, pois os organizados de acordo com as regras do Flexbox.
elementos relacionados estão encapsulados em um
único contêiner. • flex-flow: column;Define a direção do layout dos itens dentro do
contêiner flexível como uma coluna.
• Ao envolver os parágrafos com uma <div>, você pode
aplicar estilos específicos a esse grupo de elementos. Por • gap: 2rem;Adiciona um espaçamento de 2 rem (que é uma unidade
exemplo, se quiser espaçar ou alinhar os dois parágrafos de medida relativa ao tamanho da fonte raiz) entre os elementos
de forma específica, pode fazê-lo aplicando estilos filhos dentro do contêiner flexível. Isso significa que haverá um
diretamente à <div> que os contém. espaço de 2 rem entre o <h2> e a <div> contendo as informações de
preço e desconto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (5/11) 61

• O contêiner .contêiner-preco está organizando seus elementos filhos (o título "Preço" e a seção com os parágrafos) em uma coluna,
garantindo que eles fiquem dispostos um embaixo do outro.

• Um espaçamento de 2 rem é adicionado entre esses elementos, o que cria um layout mais arejado e visualmente equilibrado,
evitando que os elementos fiquem muito próximos uns dos outros.

Conseguimos criar a mesma estrutura para a div de condições e utilizar essa mesma estrutura de css para criar o layout:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (6/11) 62

Agora que criamos o layout das estruturas individualmente, vamos englobar as estruturas em um único contêiner, que será um
elemento div com classe contêiner-precocondicoes e também vamos adicionar as propriedades flexbox nessa estrutura:

• display: flex; O elemento com a classe .contêiner-

precocondicoes é transformado em um contêiner flexível.

• flex-flow: column; Define a direção dos itens filhos dentro

do contêiner como uma coluna.

• align-items: center; Centraliza todos os itens ao longo do

eixo transversal (horizontal, neste caso, já que a direção dos
itens é uma coluna). Isso faz com que os itens filhos dentro
do contêiner sejam alinhados ao centro horizontalmente.

• gap: 3.12rem; Adiciona um espaçamento de 3.12 rem entre

os itens filhos dentro do contêiner. Isso cria um espaço fixo
entre os elementos, garantindo que eles não fiquem muito
próximos uns dos outros.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (7/11) 63

• O contêiner .contêiner-precocondicoes organiza seus itens filhos (como seções ou elementos dentro desse contêiner) em uma
coluna, alinhando-os verticalmente um abaixo do outro.

• Os itens são centralizados horizontalmente dentro do contêiner, de forma que todos os elementos ficam alinhados ao centro do
contêiner, independentemente de seu tamanho.

• Um espaçamento de 3.12 rem é adicionado entre os itens, garantindo que haja uma separação consistente e esteticamente
agradável entre os elementos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (8/11) 64

Vamos encapsular com um novo elemento div as estruturas de figure, nossas divs de preço e condição e nossa âncora, para criar o
layout que deixará os elementos dispostos horizontalmente.

Fechamento do contêiner-figure

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (9/11) 65
Após aplicarmos o layout em todas as nossas seções, podemos observar como ficou as estruturas das características. O próximo passo
é também criar pequenos contêiners dentro da seção Características:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (10/11) 66
Adicionaremos uma classe a cada div da nossa seção Caracterítiscas, chamada contêiner-lista e aplicaremos algumas propriedades de
CSS. Além que vamos englobar todas as divs com um outro elemento para posicioná-los um ao lado do outro:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 1 – Gabarito (11/11) 67
Para finalizar vamos atribuir a propriedade aling-items no elemento section e vamos transformar o nosso contêiner principal main em
flex:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Home da Hashtag (1/1) 68
Chegamos a um ponto crucial no desenvolvimento do nosso site da Hashtag. Até agora, construímos toda a estrutura da HOME
utilizando técnicas tradicionais de layout em CSS, sem a utilização do Flexbox. O resultado já é sólido, mas agora é hora de elevar o
design para o próximo nível.

O Desafio
Nosso próximo desafio será reestruturar a HOME, aplicando o Flexbox para otimizar a organização e responsividade dos elementos. A
transição para o Flexbox nos permitirá:

• Melhorar a Flexibilidade do Layout: O Flexbox oferece uma maneira mais intuitiva e poderosa de organizar e alinhar os elementos
na página, especialmente para criar layouts que se adaptam perfeitamente a diferentes tamanhos de tela.
• Aumentar a Responsividade: Com o Flexbox, podemos garantir que o conteúdo da HOME se adapte de forma dinâmica a
dispositivos móveis, tablets e desktops, sem comprometer a experiência do usuário.
• Simplificar o CSS: Flexbox nos permite reduzir a complexidade do código, eliminando a necessidade de técnicas antigas e
combinações complicadas de float, inline-block, e posicionamento absoluto.
• Centralizar e Alinhar Elementos Facilmente: Flexbox facilita o alinhamento e centralização dos elementos tanto no eixo principal
quanto no eixo transversal, proporcionando um controle refinado sobre o layout.

Objetivo
Nosso objetivo é revisar e atualizar a estrutura da HOME, aplicando Flexbox para melhorar a organização visual e funcionalidade do
site. Com essa mudança, queremos não apenas garantir que o layout seja mais moderno e eficiente, mas também que ele ofereça
uma melhor experiência ao usuário final.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Cabeçalho (1/6) 69

Vamos iniciar com as alterações para flexbox com a O próximo passo é transformar o nosso header em um flex
nossa seção de cabeçalho. A primeira alteração que contêiner. E na nossa divisão ele terá um item do contêiner o nosso
precisamos fazer é retirar o estilo aplicado no elemento <img> e o segundo será o elemento nav.
elemento nav, para que nossa lista de itens aparece
em nosso header.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Cabeçalho (2/6) 70
Agora vamos utilizar os conceitos de flexbox dentro do elemento <nav> para deixar alinhados os itens da lista, para isso vamos
transformar o elemento <ul> dentro do elemento <nav> em um flex contêiner também.

Vamos deixar agora os elementos alinhados ao centro, lembrando sempre de verificar em qual eixo vamos mexer para atingir o
layout desejado, nesse caso será o cross axis.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Cabeçalho (3/6) 71
Nesse momento vamos utilizar o display:none em alguns elementos, para conseguir observar a estrutura que o nosso header ficou,
já que vamos implementar algumas outras propriedades para criarmos o layout dessa estrutura.

Agora vamos retornar na estrutura dos elementos que possue a classe .contem-filho e vamos utilizar o seguinte layout:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Cabeçalho (4/6) 72
Vamos aplicar a seguinte estrutura no CSS para estilizar a lista não
ordenada (ul) dentro do um contêiner com a classe .contem-filhos.
Aqui está uma explicação resumida do que cada propriedade
aplicada nessa estrutura:

• display: flex;: Define o layout do ul como flexbox, permitindo o

controle do alinhamento e espaçamento dos itens filhos.
• flex-flow: column;: Organiza os itens da lista em uma coluna, um
embaixo do outro.
• gap: 0.82rem;: Define um espaço de 0.82rem entre os itens da
lista.
• align-items: start;: Alinha os itens da lista ao início do contêiner
(lado esquerdo).
• width: max-content;: Define a largura do ul como a largura
máxima necessária para acomodar seu conteúdo.
• position: absolute;: Posiciona o ul de forma absoluta em relação
ao seu contêiner posicionado.
• background-color: white;: Define a cor de fundo como branca.
• padding: 1.28rem 2rem;: Adiciona espaçamento interno ao redor
do conteúdo, com 1.28rem de espaçamento superior/inferior e
2rem nas laterais.
• border-radius: 2.5rem;: Arredonda os cantos do ul com um raio
de 2.5rem.
• box-shadow:: Adiciona uma sombra ao redor do ul, com um leve
efeito de sombra interna (inset), criando profundidade.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Desafio 2 – Flexbox no Cabeçalho (5/6) 73
Agora precisamos aplicar uma borda que será aplicada em cada elemento da nossa lista para isso vamos precisar fazer
algumas alterações em nosso layout e acrescentar novas propriedades aos itens da minha lista não ordenada <ul>.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Cabeçalho (6/6) 74
Para finalizar vamos deixar a estrutura com display none, e aplicar a o layout quando passarmos o mouse por cima do
elemento, com isso nossa estilização de css ficará da seguinte forma:

H
O
V
E
R

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Hero (1/3) 75
Nessa seção vamos iniciar encapsulando alguns elementos, como nossas Âncoras e adicionar uma classe a <div> que irá
encapsular, além de adicionarmos algumas propriedades de flexbox nesses elementos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Hero (2/3) 76

Na nossa estrutura html já possuímos uma <div>

que está encapsulando os nossos flex itens <h1>,
<p> e nosso contêiner de âncoras recém criados,
então vamos apenas adicionar uma classe á ela,
e criar os estilos com as propriedades flexbox.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Hero (3/3) 77
Agora vamos retirar a propriedade display:none do nosso elemento iframe, e adicionar uma nova classe ao elemento div que
está englobando toda a seção.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Conteúdos Gratuitos (1/7) 78
Vamos começar a criar o layout com flexbox da nossa seção Conteúdos Gratuitos e o primeiro passo é observar as estruturas
que estão encapsuladas e utilizar o elemento div, para separar essas estruturas caso ela não possua.

O próximo passo é organizarmos os logos dos cursos de treinamento e programação, para isso vamos adicionar uma classe
na div que está englobando essas estruturas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Conteúdos Gratuitos (2/7) 79

Agora vamos transformar esses elementos div em um contêiner flex e adicionar um gap para separar os logos.

Vamos modificar os <li> que estão presentes dentro da div que possui a classe gratuito-link-lista, vamos transformá-los em
um display flex e adicionar algumas outras propriedades para alinhar os itens.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Conteúdos Gratuitos (3/7) 80
Vamos adicionar uma classe aos dois elementos <ul> que possui os itens das listas dessa estrutura e adicionar as
propriedades do flexbox .

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Conteúdos Gratuitos (4/7) 81
Agora vamos adicionar as propriedades do flexbox no elemento que possui a classe caixa-cursos-hashtag.

O próximo passo é encapsular os elementos [Link]-cursos-hashtag, dentro de uma outra div.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Conteúdos Gratuitos (5/7) 82
Nesse momento vamos precisar alterar o posicionamento dos elementos da nossa seção conteúdos, para conseguirmos
encapsular com um elemento div, todos os elementos com exceção da imagem.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Conteúdos Gratuitos (6/7) 83
Vamos adicionar uma nova classe ao elemento [Link]êiner, e aplicarmos algumas propriedades.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Conteúdos Gratuitos (7/7) 84
Para finalizar nossa seção, vamos garantir que nossa imagem fique posicionada corretamente com as seguintes
propriedades:

• position: relative; Define o posicionamento do elemento como relativo em relação à sua posição original. Isso significa
que ele pode ser movido a partir de onde normalmente estaria no fluxo do documento, sem alterar o layout dos outros
elementos ao redor.
• left: 2rem; Desloca o elemento 2 rem (uma unidade de medida relativa ao tamanho da fonte) para a direita a partir da sua
posição original. Como o elemento está com position: relative, ele permanece no fluxo do documento, mas se move 2 rem
para a direita.
• z-index: 1; Controla a sobreposição do elemento em relação a outros elementos na página. Um z-index maior faz com que
o elemento apareça na frente de elementos com um z-index menor. Como o valor é 1, este elemento estará na frente de
elementos com z-index: 0 ou sem z-index definido.

Essas propriedades juntas permitem mover o elemento ligeiramente para a direita, mantê-lo no fluxo de layout, e
garantir que ele se sobreponha a outros elementos se necessário. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (1/12) 85
Antes de começar o layout flexbox na seção Diferenciais, vamos realizar um pequeno ajuste na nossa seção Hero, e utilizar
uma propriedade letter-spacing.

A propriedade CSS letter-spacing controla o espaçamento entre as letras de um texto. Ela permite ajustar a distância entre
os caracteres em um elemento, proporcionando mais ou menos espaço entre cada letra.

Como Funciona:
• Valores Positivos: Um valor positivo de letter-spacing aumenta o espaço entre as letras, espalhando-as mais no texto.
• Valores Negativos: Um valor negativo reduz o espaço entre as letras, aproximando-as mais umas das outras.
• Unidades: Você pode especificar o valor em várias unidades CSS, como px (pixels), em (relativo ao tamanho da fonte), ou %
(porcentagem).

Usos Comuns:
• Melhoria da Legibilidade: Aumentar o letter-spacing pode tornar o texto mais legível, especialmente em títulos ou letras
maiúsculas.
• Estética: Ajustar o espaçamento entre letras pode ser usado para fins estéticos, criando um design mais refinado ou
distinto.
• Correção de Renderização: Às vezes, fontes personalizadas podem ter espaçamento inadequado entre caracteres, e
letter-spacing ajuda a corrigir isso.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (2/12) 86
Vamos adicionar a propriedade no elemento h1 do nosso arquivo Css.

Podemos utilizar também a propriedade text-align ao invés do letter-spacing, ou junto com essa propriedade.

A propriedade CSS text-align define como o texto dentro de um

elemento é alinhado horizontalmente. Ela controla a distribuição
do texto em relação às bordas do seu contêiner.

justify: Distribui o texto para que as linhas tenham a mesma

largura, ajustando o espaço entre palavras para alinhar o texto
tanto à esquerda quanto à direita.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (3/12) 87
Agora vamos iniciar as alterações da nossa seção Diferenciais, e vamos começar com a seguinte estrutura:

Então primeiro vamos transformar a <div> que está encapsulando todos esses elementos em um flex contêiner e depois
utilizar algumas propriedades do flexbox para organizar o layout.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (4/12) 88
Vamos atribuir o mesmo espaço para ambos contêiners itens e adicionar um gap no flex contêiner dessa estrutura.

E adicionaremos a propriedade text-align no paragráfo .diferenciais-p.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (5/12) 89
A primeira estrutura da nossa seção Diferencias está com o layout pronto, e agora vamos modificar as demais estruturas. O próximo
passo é analisar as estruturas e encapsular os blocos utilizando o elemento div. Vamos iniciar com a caixa de paragráfos e vamos
atribuir uma nova classe chamada caixa-tem-diferencias:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (6/12) 90
Vamos aplicar as propriedades do flexbox para as estruturas anteriores.

A próxima classe que vamos modificar é o elemento que está englobando a imagem, o título e o bloco de parágrafos que criamos
anteriormente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (7/12) 91
Vamos alterar o padding com os seguintes valores:

Essa declaração de padding aplica espaçamento interno ao redor do conteúdo de um elemento em quatro direções: superior, direita,
inferior e esquerda.

• Primeiro valor (7rem): Define o espaçamento superior.

• Segundo valor (2.5rem): Define o espaçamento à direita.
• Terceiro valor (3.12rem): Define o espaçamento inferior.
• Quarto valor (2.5rem): Define o espaçamento à esquerda.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (8/12) 92
Nesse momento precisamo adicionar mais uma caixa, com o elemento div, que englobe as estruturas de classe .caixa-itens-
diferenciais. E vamos atribuir uma classa chamada bloco-itens-diferenciais. E atribuir a propriedade flex, para que eles preencham o
mesmo espaço.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (9/12) 93
Antes de continuar com as estruturas do flexbox, precisamos fazer alguns ajustes de margem e padding da nossa seção.

Com esses ajustes, já podemos voltar para o nosso layout flexbox. Vamos atribuir mais algumas propriedades para os elementos
dessa seção:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (10/12) 94
Para organizar a estruturas da nossa seção vamos precisar utilizar um margin negativo, e nesse caso ele será útil pois queremos que
ele puxe todas as estruturas da minha seção para cima. E também vamos precisar mexer na estrutura de padding para não deixar
sobreposto as estruturas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (11/12) 95
Vamos mexer nas últimas estruturas dessa seção transformando a caixa-restante-diferencias e bloco de empresas em flex contêiner.

Vamos aninhar todas as imagens de empresas dentro de uma única div e adicionar a classe bloco-imagens-diferenciais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Diferencias (12/12) 96
Para finalizar o layout felxbox dessa seção, vamos mexer na última estrutura que será o elemento que contém a classe diferenciais-
empresas.

E nossa seção completa ficou com o layout da imagem ao lado:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção O que falam (1/3) 97
Vamos iniciar as alterações da nossa seção O que falam, para adicionar o layout com conceitos flexbox. E vamos começar com as
estrutura do título e da imagem superior que estão dentro da [Link]-titulo.

Agora vamos alterar a propriedade width que aplicamos com o valor de 33% para que as estruturas ficassem com o mesmo espaço
por uma do flexbox. Então vamos adicionar uma classe a div que engloba esses elementos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção O que falam (2/3) 98
Agora vamos mexer no contêiner global dessa seção e para isso vamos adicionar uma classe nova ao elemento div chamada
contêiner-oquefalam.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção O que falam (3/3) 99
As últimas alterações serão nos elementos de classe oquefalam-carrossel e oquefalam-carrossel-imagens. Com as adições das
propriedades flexbox, teremos o layout finalizado dessa seção.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Na mídia (1/1) 100
Vamos modificar a seção Na mídia, para ajustarmos para um layout flexbox, vamos precisar adicionar as classes as divs que já existem
nessa seção, e adicionar algumas propriedades.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção na Blog da Hashtag (1/5) 101
Na seção do Blog da Hashtag, as primeiras estruturas que vamos modificar para utilizar os conceitos do flexbox serão as divs que
possuem a classe caixa-postblog, que engloba as estruturas de cada card de blog da nossa seção.

Os espaçamentos entre os elementos dessa seção são diferentes,

então vamos precisar envolver alguns elementos com divs, em
todos os cards de blog. A primeira estrutura que vamos precisar
criar é um bloco que contém as âncoras, imagem e parágrafo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção na Blog da Hashtag (2/5) 102
Para os espaçamentos vamos adicionar as propriedades de gap e outras propriedades do flexbox.

Agora vamos precisar fazer alguns ajustes diferentes para criar o layout de linhas e colunas dos nossos cards, o ideal para essa parte
seria utilizarmos um conceito chamado grid, porém esse será uma assunto para outro módulo, e nesse vamos tentar aplicar as
propriedades do flexbox para conseguir o layout desejado.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção na Blog da Hashtag (3/5) 103

A propriedade flex é uma abreviação que combina três propriedades do Flexbox: flex-grow, flex-shrink, e flex-basis. Quando você
escreve flex: 1 1 50%;, está definindo como um item flexível deve crescer, encolher e qual tamanho base ele deve ocupar dentro de um
contêiner flexível.

• flex-grow: 1; Indica que o item pode crescer para preencher o espaço disponível no contêiner. O valor 1 significa que o item vai
crescer de forma proporcional em relação aos outros itens que também tenham um valor de flex-grow definido. Se todos os itens
tiverem flex-grow: 1, eles dividirão igualmente o espaço extra.
• flex-shrink: 1; Indica que o item pode encolher se necessário, para se ajustar ao espaço disponível no contêiner. O valor 1 significa
que o item vai encolher proporcionalmente aos outros itens que também têm flex-shrink definido.
• flex-basis: 50%; Define o tamanho inicial ou base do item antes de ele ser ajustado pelo flex-grow ou flex-shrink. Aqui, o item é
definido para ocupar 50% do espaço disponível no contêiner, antes de aplicar o crescimento ou encolhimento.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 1 – Desafio 2 – Flexbox na Seção na Blog da Hashtag (4/5) 104
Ao adicionarmos um espaço entre os cards utilizando a propriedade gap, vamos verificar que ocorre um erro novamente de
layout, então vamos precisar ajustar a porcentagem da propriedade flex.

As últimas duas modificações que vamos realizar são no nosso título e no padding do nosso contêiner.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção na Blog da Hashtag (5/5) 105
E o layout da nossa seção Blog na Hashtag ficará com essa estrutura utilizando as propriedades do Flexbox:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Como ajudar (1/3) 106
Vamos iniciar o layout flebox na seção Como ajudar, e os primeiros elementos que vamos modificar será os elementos da lista
com classe comoajudar-lista, então todos os itens listas se tornarão um flex contêiner.

Agora repare que no segundo elemento li, temos vários elementos dentro dela, então quando adicionamos o gap ele afasta os
elementos, para corrigir vamos encapsular esses elementos dentro de um div.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Como ajudar (2/3) 107
Nesse momento vamos transformar o nosso elemento lista com classe comoajudar-lista em um contêiner flex e adicionar
algumas propriedades para criarmos os espaçamentos.

Agora vamos adicionar uma nova classe ao elemento [Link]êiner, para distanciar a "caixa azul" título com da estrutura abaixo
dela.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Como ajudar (3/3) 108
Vamos mexer no tamanho da largura das nossas "caixas" dessa seção, para isso vamos adicionar uma nova classe a próxima
estrutura de contêiner, e vamos adicionar um width para as duas estruturas.

Com a nova classe adicionada, podemos tirar um elemento div que está encapsulando toda essa seção, porque se torna
desnecessária. Vamos utilizar a contêiner-comoajudar-2 para alinhar o layout da "seção cinza". E como boas práticas, vamos deixar
as propriedades utilizadas em ambas as estruturas de contêiner e o que for diferente, vamos criar o estilo separado.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Minicurso (1/3) 109
Na seção de Minicurso, vamos iniciar criando uma nova classe para o nosso elemento de formulário <form>, chamada form-
minicurso.

Agora vamos modificar os elementos div que possuem os inputs armazanados, mas para utilizarmos o estilo criado, vamos
adicionar mais uma classe ao nosso formulário chamada "form".

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Minicurso (2/3) 110
Observe que o botão de Enviar alongou seu conteúdo devido ao stretch, então vamos precisar ajustar a propriedade align-items e
centralizar.

Para finalizar essa seção vamos adicionar uma nova classe ao contêiner global dela, para criarmos o espaçamento entre o título e
o formulário.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox na Seção Minicurso (3/3) 111
Agora vamos apenas alterar a propriedade align-items para o valor de end, para alinharmos os elementos ao final.

E vamos aproveitar para reutilizar algumas estruturas da classe form para a nossa seção de rodapé, especificamente no nosso
formulário news letter.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Rodapé (1/8) 112
Vamos iniciar o layout da seção rodapé do nosso site, que será a última a alterarmos. A primeira estrutura que vamos mexer é a
div que está englobando as informações Fale Conosco, então vamos adicionar uma classe chamada subsecao-rodape.

Agora precisamos adicionar mais um contêiner com o elemento div para unir os elementos do Cursos Online, vamos adicionar
uma classe chamada subsecao-cursosonline.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Rodapé (2/8) 113
Nesse momento vamos adicionar mais um elemento div para encapsular os elementos da estrutura Assistente.

Agora só falta adicionarmos mais um encapsulamento com o elemento div nas estruturas de email e telefone.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Rodapé (3/8) 114
Para finalizar essa estrutura vamos precisar adicionar um novo elemento de div, que encapsule ambas divs com classe rodape-
iconelink, para adicionar um espaçamento entre os elementos.

Vamos utilizar a classe subsecao-rodape nas demais estruturas do nosso rodapé que são: Endereço, Redes sociais, Proteção de
Dados e Links Úteis.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Rodapé (4/8) 115
Agora vamos reutilizar a classe rodape-iconelink nas estruturas de "Política de Privacidade", "Código de Conduta" e "Mapa do site",
adicionando uma div para cada uma dessas estruturas.

Precisamos mexer na estrutura das Redes Sociais, e para isso vamos adicionar uma div que encapsule todas as redes e adicionar
uma classe chamada rodape-redessociais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Rodapé (5/8) 116
Continuando nas estruturas da Redes Sociais, vamos adicionar algumas propriedades para modificar o layout e também
precisamos mexer nas propriedades fill e stroke do svgs.

Aqui está uma explicação das propriedades fill, stroke, e currentColor, que são comumente usadas em SVGs (Scalable Vector
Graphics) e elementos gráficos em CSS:

• fill: Define a cor interna de um elemento gráfico, como a cor de preenchimento de uma forma (por exemplo, um círculo ou um
retângulo) em um SVG.

• stroke: Define a cor e a aparência da borda (contorno) de um elemento gráfico. Também pode ser usada em conjunto com
outras propriedades, como stroke-width para definir a largura do contorno.

• currentColor: É uma palavra-chave CSS que define a cor de um elemento baseado no valor da propriedade color do mesmo
elemento. Usar currentColor para fill ou stroke faz com que essas propriedades adotem a cor definida na propriedade color,
garantindo consistência visual.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Rodapé (6/8) 117
Dentro da estrutura "Proteção de Dados" vamos adicionar uma div com a classe que criamos anteriormente chamada rodape-
div-iconelink.

Agora vamos o contêiner inteiro que engloba os elementos de classe subsecao-rodape, e adicionar dentro do elemento as classes
rodape-coluna e rodape-coluna-info.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Rodapé (7/8) 118
Nesse momento vamos criar o layout flexbox para nossa estrutura de News Letter, utilizando o elemento de formulário com a
classe form-newsletter e adicionar as propriedades do CSS.

Agora que criamos os layout individuais de cada estrutura da nossa seção, vamos estruturar o contêiner principal que engloba
todas as estruturas. É o elemento div que possui a classe container, porém vamos adicionar mais uma classe chamada container-
rodape e será nela que vamos aplicar as propriedades flexbox.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Desafio 2 – Flexbox no Rodapé (8/8) 119
Para finalizarmos a nossa seção Rodapé, vamos mexer no último elemento que é o paragrafo que contém o copyright do nosso
site. Vamos adicionar uma classe chamada rodape-copyright.

O último passo para nossa seção é atribuir um valor de largura maior para o nosso contêiner rodapé.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 1 – Exercícios Extras – Flexbox Froggy (1/1) 120
Flexbox Froggy é um jogo interativo online projetado para ajudar os desenvolvedores a aprenderem e praticarem o CSS Flexbox de
maneira divertida. O objetivo do jogo é guiar uma rã até seu nenúfar usando propriedades do Flexbox. Cada nível apresenta um
desafio diferente que exige o uso de diversas propriedades do Flexbox, como justify-content, align-items, flex-direction, entre outras.
À medida que os jogadores avançam pelos níveis, eles precisam aplicar os conceitos de Flexbox para alinhar e distribuir
corretamente as rãs na tela. O jogo é acessível a iniciantes e também é uma ótima maneira para desenvolvedores experientes
refrescarem suas habilidades.

O site oficial do Flexbox Froggy é: [Link]

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 121
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT

Módulo 2

COMPONENTES PERSONALIZADOS NO HTML

COMPONENTES PERSONALIZADOS NO HTML

COMPONENTES PERSONALIZADOS NO HTML

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Introdução ao módulo (1/1) 122
Bem-vindos ao módulo sobre Componentes Personalizados no HTML! Aqui, vamos explorar o poder de criar elementos únicos e
reutilizáveis que vão enriquecer ainda mais suas páginas web. Ao longo deste módulo, vamos encarar alguns desafios práticos
que envolvem a construção de componentes personalizados, como paginação, acordeão, popup e carrossel.

Para dar um gostinho do que está por vir:

• Paginação: Um componente essencial para dividir grandes quantidades de conteúdo em páginas menores, proporcionando
uma navegação mais fluida e organizada.

• Acordeão: Um elemento interativo que permite ocultar e revelar informações, ideal para FAQs e seções com conteúdo
extensivo.

• Popup: Uma janela sobreposta que aparece para destacar informações importantes, captar a atenção do usuário ou coletar
dados.

• Carrossel: Um componente visual dinâmico que exibe conteúdo de forma rotativa, perfeito para galerias de imagens ou
destaques.

Essas definições são apenas uma prévia do que você aprenderá. Em cada aula, vamos mergulhar mais fundo em cada um desses
componentes, explicando em detalhes como criá-los e aplicá-los de forma eficiente. Prepare-se para transformar seu HTML com
componentes que fazem a diferença!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação: Apresentando o Desafio (1/1) 123
Vamos começar o nosso desafio de Paginação, um componente crucial para a navegação em páginas que contêm grande
volume de conteúdo. A paginação permite que os usuários visualizem seções específicas de um conteúdo dividido, como posts
de um blog, produtos em uma loja online, ou resultados de uma pesquisa, de maneira organizada e acessível.

Neste desafio, vamos criar uma paginação com dois botões principais, "Anterior" e "Próximo". Esses botões permitirão a
navegação entre as diferentes páginas. Ao passar o mouse sobre eles, você verá uma mudança no estilo, indicando que são
interativos.

Entre esses botões, teremos seis elementos numerados que representam as páginas. No entanto, para evitar uma lista muito
longa de números, utilizaremos uma representação visual comum: uma série de números iniciais, seguida por reticências (...), e,
por fim, o número da última página. Isso cria uma visualização simplificada, como 1 2 3 4 ... 25.

Além disso, toda vez que você passar o mouse sobre qualquer um desses números ou reticências, eles se transformarão em links
clicáveis, e seu estilo também mudará, mostrando que eles estão prontos para serem selecionados.
Prepare-se para criar uma experiência de navegação dinâmica e intuitiva, onde o usuário pode facilmente explorar o conteúdo de
maneira organizada e eficiente!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 1/2 (1/6) 124
Para iniciar o nosso desafio de Paginação, vamos criar dois arquivos iniciais que serão : [Link] e [Link]. Vamos linkar
nossa folha de estilo dentro do nosso arquivo html e também vamos abrir o gabarito do nosso desafio e copiar as estruturas
padrões do nosso arquivo css. Dessa forma teremos os arquivos iniciais com as seguintes estruturas:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 1/2 (2/6) 125
Dentro do elemento body, vamos iniciar uma estrutura Lembrando que, ao utilizarmos símbolos nos elementos HTML,
semântica, utilizando as tags main e section e dentro delas é uma boa prática obter a referência Unicode correspondente,
vamos adicionar um elemento div com uma classe chamada usando sites como o [Link].
"paginacao".

Analisando a estrutura do nosso desafio, vamos adicionar 2

botões que terão uma classe em comum e uma classe distinta,
pois irão representar o botão da esquerda e o da direita.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 1/2 (3/6) 126
Agora entre os botões vamos adicionar seis âncoras que vão Nesse momento vamos começar a estilizar a nossa estrutura de
representar as páginas, e dentro colocaremos uma classe paginação, e o primeiro elemento que vamos estilizar será a
"paginacao-link". nossa div, ou seja, nosso elemento com classe paginacao que
engloba toda a estrutura.

E no elemento de âncora com valor 3, vamos adicionar mais

uma classe chamada "pagina-ativa".

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 1/2 (4/6) 127
O próximo passo é estilizar os nossos botões. A classe .paginacao-
botao estiliza um botão de paginação com as seguintes
Continuando no layout dos nossos botões, precisamos
características:
aplicar o estilo diferente para quando o mouse passar por
cima do elemento, o hover.

• font-size: 1.93rem;: Estabele o tamanho da fonte de 1.93rem;

• font-weight: 700;: Define a espessura da fonte como negrito.
• background-color: #077768;: Define a cor de fundo como um
tom de verde.
• color: white;: Define a cor do texto como branca.
• width: 4rem; e height: 4rem;: Estabelece o botão como um
quadrado de 4rem por 4rem.
• border-radius: 50%;: Transforma o botão em um círculo.
• cursor: pointer;: Exibe um cursor de "mão" ao passar o mouse
sobre o botão.
• border: 0;: Remove qualquer borda padrão.
O padding está comentado para ser usado apenas em botões DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
retangulares.
 000
Módulo 2 – Paginação - Resolução 1/2 (5/6) 128
Com os botões esquerda e direita estilizados, vamos voltar ao
nosso contêiner principal "paginacao" e modificar algumas Agora vamos estilizar com mais especificidades as nossas
propriedades. âncoras com as seguintes propriedades.

O próximo passo é reutilizar algumas propriedades, então vamos

separa-las e adicionar em diversas classes.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 1/2 (6/6) 129
Agora vamos adicionar a classe paginacao-link com o efeito hover,
e reaproveitar algumas propriedades já aplicadas as classes. Para corrigirmos a alteração de tamanho dos elementos de
âncoras, vamos definir sempre a largura e altura deles na
classe paginacao-link, o que garante que mesmo sem o
layout de borda ele mantém o tamanho.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 2/2 + CSS Nesting(1/7) 130

Antes de começarmos essa aula vamos reajustar alguns CSS NESTING

tamanhos que fizemos dentro da nossa estrutura de
páginação, apenas para criarmos um layout mais CSS Nesting é um recurso que permite aninhar regras CSS dentro de
harmonioso. outras regras, seguindo a estrutura do HTML e reduzindo a repetição
de seletores. Isso torna o código mais organizado e fácil de ler,
especialmente quando se trabalha com estilos que dependem da
hierarquia de elementos.

Benefícios do CSS Nesting:

• Legibilidade: O código se torna mais legível, já que o estilo de

elementos relacionados é agrupado de forma clara.
• Manutenção: Facilita a manutenção, pois a estrutura do CSS reflete
a estrutura do HTML.
• Organização: Melhora a organização do código, especialmente em
projetos grandes com muitos elementos aninhados.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 2/2 + CSS Nesting(2/7) 131

Vamos aplicar um exemplo de como o CSS Nesting funciona.

O recurso de CSS Nesting está sendo utilizado para aninhar a regra de estilo para os links (<a>) dentro de um contêiner com a classe
.paginacao. Esse recurso permite que você estilize os elementos filhos (a) diretamente dentro do contexto do seu elemento pai
(.paginacao), sem precisar repetir o seletor do pai para cada estilo específico.

• .paginacao { ... }: Este é o seletor principal, que se refere a um elemento com a classe .paginacao. Todo o conteúdo dentro dessas
chaves {} se aplica aos elementos que têm essa classe.

• & a { ... }: O & (ampersand) é um operador especial no CSS Nesting. Ele representa o seletor pai, que neste caso é .paginacao.
Quando você escreve & a, está dizendo "selecionar todos os elementos <a> que são filhos de um elemento com a classe .paginacao".
O & é substituído automaticamente pelo seletor do elemento pai durante o processamento, resultando em .paginacao a.

• color: red;: Esta regra de estilo aplica a cor vermelha ao texto de todos os links (<a>) que estão dentro do elemento com a classe
.paginacao.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 2/2 + CSS Nesting(3/7) 132

O código criado anteriormente é equivalente ao seguinte código CSS, sem o uso de nesting:

Benefícios do Uso de Nesting:

• Clareza e Organização: O uso de nesting agrupa os estilos relacionados a um determinado elemento em um único bloco, tornando
o CSS mais organizado e mais fácil de manter.
• Menos Repetição: Você evita a repetição desnecessária do seletor .paginacao para cada estilo que deseja aplicar a elementos filhos,
simplificando o código.

Quando Usar:
Nesting é particularmente útil em projetos grandes, onde você tem múltiplos níveis de aninhamento de elementos, e quer manter o
CSS mais legível e estruturado de acordo com a hierarquia do HTML.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 2/2 + CSS Nesting(4/7) 133
O operador & no CSS Nesting é fundamental para referenciar o seletor pai dentro de uma regra aninhada. Ele serve como uma forma
de evitar repetir o seletor do elemento pai e, dependendo de como é usado, o & pode alterar a forma como as regras CSS são
aplicadas. Vamos explorar como isso funciona e a diferença entre usá-lo ou não.

Uso do & no CSS Nesting:

1. & a:
• Significado: Seleciona todos os <a> que são filhos diretos ou descendentes de um elemento com a classe do pai.

2. &a:
• Significado: Seleciona um elemento <a> que possui a classe exata correspondente ao seletor pai concatenado ao nome do
elemento.

• Explicação: Nesse caso, &a se torna .btna. Não é comum na prática, pois normalmente usamos o & seguido de um espaço para
designar um elemento filho ou descendente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 2/2 + CSS Nesting(5/7) 134
3. a &:
• Significado: Seleciona o <a> que é um antecedente direto do seletor pai.

• Explicação: Aqui, a & se torna a .tooltip, significando que o estilo se aplica ao elemento .tooltip que é precedido por um <a>. Este é
um uso avançado para casos onde o seletor pai aparece depois do seletor filho na hierarquia CSS.

Diferença entre Usar ou Não o &:

• Com &:
• Referencia diretamente o seletor pai dentro do bloco aninhado.
• Permite criar seletores mais específicos e combinados, como no caso de pseudo-classes ou quando se trabalha com elementos
descendentes específicos.

• Sem &:
• Não há referência ao seletor pai, então o seletor se aplica de forma independente.
• Usar o seletor diretamente fora do contexto de nesting.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 2/2 + CSS Nesting(6/7) 135
Agora que compreendemos o conceito e o poderoso Recurso que é Outra reestruturação seria separar o nosso elemento
o CSS Nesting, vamos utilizar para refatorar nossa estilização da paginacao-botao do paginacao-link, adicionando as
estrutura de paginação que criamos na aula anterior. A priemira propriedades dentro do paginacao-botao separado e
alteração será feita no paginacao-botao, no qual temos a estilização utilizar o CSS Nesting dentro de paginacao-link também.
do elemento e também com o efeito hover, só que separado. Então
vamos utilizar o CSS Nesting para chamar o nosso hover.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Paginação - Resolução 2/2 + CSS Nesting(7/7) 136
Como todas as estruturas estão conectadas ao nosso elemento div de classe paginacao, podemos encapsular através do CSS Nesting
toda a nossa estrutura de CSS. Enquanto a nossa estrutura de páginação irá se comportar da mesma forma.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Apresentando o Desafio (1/1) 137
Bem-vindos ao próximo passo em nossa jornada de desenvolvimento web! Neste desafio, vamos explorar uma das técnicas mais
populares para organizar conteúdo em páginas web: a construção de um acordeão usando apenas HTML e CSS.

O Que é um Acordeão?
Um acordeão é um componente de interface que permite esconder ou revelar conteúdo de forma interativa. Ele é especialmente útil
em páginas que precisam exibir grandes quantidades de informação de maneira organizada e acessível, sem sobrecarregar o usuário
com muitos dados de uma só vez.

Objetivos do Desafio:
• Criar um Acordeão Funcional: Utilizar HTML e CSS para construir um acordeão que permita ao usuário expandir e contrair seções de
conteúdo.
• Estética e Usabilidade: Garantir que o acordeão seja visualmente atraente e fácil de usar, com transições suaves e uma estrutura
intuitiva.

O Que Vamos Aprender:

• Estruturação HTML: Como organizar o conteúdo dentro de um acordeão utilizando tags semânticas.
• Estilização com CSS: Aplicação de estilos e animações para criar um acordeão interativo e visualmente agradável.
• Transições e Efeitos: Aprender a criar efeitos de transição suaves usando apenas CSS, sem a necessidade de JavaScript.

Por que Construir um Acordeão?

O acordeão é um recurso essencial em design web moderno, permitindo que informações sejam apresentadas de maneira concisa e
organizada. Ele melhora a experiência do usuário, tornando o conteúdo mais acessível e fácil de navegar.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (1/10) 138
Para começar a resolução do desafio, vamos criar um arquivo HTML com a estrutura básica, incluindo o link para o arquivo CSS e as tags
semânticas necessárias para montar o nosso primeiro elemento, assim como fizemos no desafio de paginação. Em seguida, vamos criar
o arquivo CSS e adicionar a estrutura padrão de layout nele.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (2/10) 139
Observando a estrutura que o Acordeão possui, podemos identificar que existe elementos dentro de contêiners (que serão nossas divs).

A estrutura do desafio possui o contêiner principal, que será nosso elemento com classe acordeao, também temos os itens de cada
acordeão que é composto por um cabeçalho e um conteúdo.

Então vamos adicionar esses elementos e classes referentes á essas estruturas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (3/10) 140
As primeiras estruturas do nosso Acordeão serãos as divs com Os conteúdos da nossa div item-conteudo serão elementos de
classes definidas para cada parte. parágrafos e vamos pegar as frases dos elementos do gabarito
também. Nesse ínicio vamos criar 2 parágrafos e depois vamos
adicionar os demais.

E vamos adicionar os conteúdos das nossas divs. Para o item

cabeçalho vamos pegar do Gabarito o título do Acordeão. E
adicionar dentro de um elemento span.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (4/10) 141
Vamos copiar a estrutura inteira da div com classe acordeao-item, para Com a nossa estrutura de HTML pronta vamos
criarmos a estrutura de 3 itens de acordeão (mesmo que com começar a construção do nosso layout, e vamos
informações repetidas, apenas para nossa prática). começar com as estruturas maiores para
posicionarmos os elementos menores corretamente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (5/10) 142
Para utilizarmos o conceito de CSS Nesting que aprendemos Vamos construir o layout do nosso cabecalho e vamos utilizar
nas aulas passadas, vamos renomear as nossas classes. as seguintes propriedades.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (6/10) 143
Vamos novamento acessar o site do [Link]. Para obter o Agora vamos criar o layout para que o nossos elementos
Unicode de CSS do símbolo do nosso cabeçalho. Lembrando fiquem um em cada ponta do nosso cabeçalho, para isso
que, ao utilizarmos símbolos nos elementos HTML, é uma boa vamos transformar essa estrutura em um display flex e
prática obter a referência Unicode correspondente. adicionar mais algumas propriedades.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (7/10) 144
Para finalizar o nosso cabeçalho, vamos adicionar a Vamos começar com a estrutura do CSS Nesting para o nosso
propriedade do cursor do mouse em nossos itens. acordeão aberto agora. O primiero será que o conteúdo precisa
estar visível então vamos utilizar o display block, por enquanto.

Com o nosso item de acordeão estilizado, precisamos criar a

folha de estilo para quando ele estiver aberto. Então no
segundo item do nosso contêiner acordeao vamos adicionar
uma nova classe chamada "aberto". Quando o acordeão estiver aberto o nosso cabeçalho está com
outra estilização, então vamos criar o layout para quando ele
tiver a classe aberto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (8/10) 145
Até o momento a nossa estrutura de acordeão aberto está Vamos reutilizar a propriedade de padding que o nosso
dessa forma. cabeçalho possui e adicionar também para o nosso conteúdo. E
você pode retirar essa propriedade do & .cabecalho.

Agora precisamos trocar o símbolo da "seta para baixo" para

"seta para cima".
Agora para a estrutura de conteúdo vamos utilizar as seguintes
propriedades.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (9/10) 146
A estrutura do nosso acordeão está da seguinte maneira após Agora vamos retornar com o nosso display: none do nosso
aplicarmos todas as propriedades do slide anterior. conteúdo.

Vamos retirar a propriedade de sombra do nosso cabeçalho e

adicionar ao item completo do acordeão junto com um border-
radius para nossa estrutura item. E adicionar a propriedade display: flex, quando o item estiver
aberto, o conteúdo irá aparecer.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Acordeão - Resolução (10/10) 147
Agora o nosso Acordeão está finalizado, lembrando que o conteúdo dos itens do Acordeão irão aparecer quando possuir a classe
aberto, e como no momento não temos o Javascript para criar esse dinamismo, você pode adicionar manualmente a classe no
demais itens e verificar a sua funcionalidade e layout aplicados.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Apresentando o Desafio (1/1) 148

Neste desafio, vamos mergulhar no mundo dos popups, um recurso amplamente utilizado em websites para chamar a atenção dos
usuários, exibir mensagens importantes, ou oferecer funcionalidades adicionais sem redirecionar para outra página.

O Que é um Popup?
Um popup é uma pequena janela ou caixa que aparece sobre o conteúdo principal da página, geralmente em resposta a uma ação
do usuário, como clicar em um botão ou após um determinado tempo de navegação. Ele é ideal para destacar informações, solicitar
interações rápidas, ou fornecer notificações de forma não invasiva.

Objetivos do Desafio:
• Criar um Popup Funcional: Desenvolver um popup que possa ser facilmente ativado e fechado, usando apenas HTML e CSS.
• Design Atraente: Garantir que o popup seja visualmente atraente, com estilo que se integra perfeitamente ao layout da página.

O Que Vamos Aprender:

• Estruturação HTML: Como organizar o conteúdo dentro de um popup utilizando as tags e atributos corretos.
• Estilização com CSS: Aplicação de estilos para criar um popup visualmente agradável e que se destaque na página.
• Posicionamento e Transições: Utilizar técnicas de CSS para posicionar o popup corretamente na tela e aplicar efeitos de transição
para uma experiência de usuário suave.

Por que Criar um Popup?

Os popups são uma ferramenta poderosa para comunicação direta com os usuários. Eles podem melhorar a interatividade de um
site, aumentando a taxa de conversão, destacando informações importantes, e oferecendo funcionalidades extras sem complicar a
navegação.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Resolução (1/10) 149
Para começarmos a construção do nosso Popup, vamos criar um arquivo HTML com toda a estrutura básica, incluindo os elementos
semânticos necessários para o popup e o link para o arquivo CSS. Também criaremos o arquivo CSS com a estrutura de layout
padrão.
A diferença aqui é que teremos um conteúdo na página com vários parágrafos, e o nosso popup aparecerá sobre esse conteúdo.
Portanto, a estrutura inicial do HTML deve incluir vários parágrafos, que vocês podem gerar utilizando o site lorem ipsum.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Resolução (2/10) 150
Vamos estilizar a nossa seção do site, apenas para ficar Fora do elemento main, vamos criar a estrutura do nosso
mais harmoniosa a sua estrutura. popup, lembrando que é uma estrutura a parte do nosso
site, então não precisa estar dentro do elemento main do
site. E vamos organizar adicionando um span que será o
título do popup, além da estrutura de uma div com os
parágrafos e uma âncora que será o nosso botão.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Resolução (3/10) 151
Agora vamos aplicar algumas propriedade no elemento de classe popup.

Essa classe .popup estiliza um elemento que será exibido como um popup
centralizado na tela. Vamos entender cada propriedade brevemente:

• position: fixed;: Posiciona o popup de forma fixa na tela, o que significa

que ele permanece visível mesmo quando o usuário rola a página.
• top: 0; bottom: 0; left: 0; right: 0;: Essas propriedades fazem com que o
popup ocupe toda a área da tela, estendendo-se de 0 a 100% em todas as
direções.
• display: flex;: Habilita o Flexbox para organizar o conteúdo interno do
popup.
• justify-content: center;: Centraliza o conteúdo horizontalmente dentro do
popup.
• align-items: center;: Centraliza o conteúdo verticalmente dentro do
popup.
• background-color: rgba(255, 255, 255, 0.925);: Aplica uma cor de fundo
branca semi-transparente ao popup.
• backdrop-filter: blur(2.5px);: Aplica um efeito de desfoque ao conteúdo da
página que está atrás do popup, criando um efeito visual de foco no
popup.

Essas propriedades combinadas criam um popup que aparece no centro da

tela, com uma aparência suave e destacada, sobrepondo-se ao conteúdo
existente. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 2 – Popup – Resolução (4/10) 152
O próximo passo é criar o layout para o contêiner do Agora vamos adicionar alguns detalhes ao popup, o primeiro deles
popup, então vamos iniciar com as seguintes é que precisamos adicionar o texto correto no título e uma classe
propriedades. para destacar o texto que será estilizado com um "realce".

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Resolução (5/10) 153
Vamos adicionar o conteúdo da âncora que representa nosso Para os nossos parágrafos vamos transforma o elemento que
botão. engloba eles em flex e adicionar algumas propriedades.

Retornando no layout do nosso contêiner principal, precisamos

adicionar as propriedades para transformar em um display:flex.

Voltando no layout do titulo vamos alterar o line-height dele e

também adicionar a estilização do texto destacado com a classe
"realce".

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Resolução (6/10) 154
Para os textos em destaque dos parágrafos, vamos adicionar • align-self: center;: Centraliza o elemento dentro do
manualmente o elemento <b> para que o conteúdo fique em contêiner flexível em que ele está, ignorando a propriedade
negrito. align-items do contêiner pai.
• text-decoration: none;: Remove qualquer sublinhado ou
decoração padrão de texto, como em links.
• color: inherit;: Faz com que a cor do texto herde a cor do
elemento pai.
• background-color: #d6e4ff;: Define uma cor de fundo azul
claro para o elemento.
• border-radius: 2.5rem;: Aplica bordas arredondadas ao
elemento, dando-lhe uma forma mais suave e circular.
• padding: 0.82rem 3.12rem;: Adiciona espaçamento interno
ao redor do conteúdo do elemento, com mais espaçamento
horizontal (direita/esquerda) do que vertical (acima/abaixo).
O próximo passo é criar o layout para a nossa âncora. • font-weight: 700;: Define o texto em negrito.
• border: 2px solid #49546b;: Aplica uma borda de 2 pixels de
espessura, com cor cinza escura ao redor do elemento.
• border-right-width: 4px; border-left-width: 4px;: Aumenta
a espessura das bordas direita e esquerda para 4 pixels,
criando um efeito de destaque nas laterais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Resolução (7/10) 155
Agora vamos adicionar os estilos quando aplicamos os efeitos As pseudo-classes, como :link, :visited, :hover e :active, são
de algumas pseudo-classes no elemento da âncora como necessárias para estilizar o comportamento dos links
link,hover,visited e active. (elementos <a>, ou âncoras) em diferentes estados. Elas
permitem que você controle a aparência e a interação do link
em vários cenários, melhorando a usabilidade e a experiência
do usuário. Aqui está o motivo de cada uma:

• :link: Aplica estilos aos links que não foram visitados pelo
usuário. Isso é útil para garantir que todos os links tenham
uma aparência padrão ou específica antes de serem clicados
pela primeira vez.

• :visited: Estiliza os links que já foram clicados e visitados.

Permite que os usuários diferenciem entre os links que já
visitaram e os que ainda não visitaram.

• :hover: Define o estilo do link quando o usuário passa o

cursor sobre ele. Isso proporciona feedback visual, indicando
que o link é interativo e pode ser clicado.

• :active: Aplica estilo ao link quando ele está sendo clicado

(ou seja, no momento em que o botão do mouse é
pressionado). Isso indica ao usuário que a interação foi
registrada.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 2 – Popup – Resolução (8/10) 156
Vamos refatorar nosso código CSS. Ao analisar o código criado até agora, percebemos que algumas propriedades estão sendo repetidas
em vários elementos. Para otimizar o código, vamos criar uma nova classe que agrupe essas propriedades e aplicá-la aos elementos que
as utilizavam. Especificamente, vamos remover as propriedades display: flex e flex-flow: column de todos os elementos e, em seguida,
adicionar a nova classe flex-col a esses elementos no arquivo HTML. Além de Adicionar uma classe que irá conter a propriedade
display:flex. E ambas as classes vão ser adicionadas em nossa estrutura padrão do CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Resolução (9/10) 157
O próximo passo é implementar a funcionalidade do nosso popup. Vamos adicionar um "x" que irá representar o fechar do nosso
Até agora, criamos o popup na sua forma visível, mas o layout inicial popup.
precisará ter display: none para que ele permaneça oculto. Vamos
adicionar uma classe popup-aberto ao nosso elemento body, e
ajustar o layout para que, quando essa classe estiver presente, o
popup apareça na página.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Popup – Resolução (10/10) 158
Agora vamos aplicar algumas propriedades para o efeito hover do Finalizado o popup e o layout final dele ficou como a imagem
nosso "x". abaixo.

Também vamos adicionar a propriedade cursor no nosso elemento

que representa o "fechar".

Podemos adicionar a nossa âncora o href que irá representar o site

de blog da Hashtag, para quando clicarmos em saber mais ele nos
redirecione para o blog.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Apresentando o Desafio (1/1) 159
Neste desafio, vamos explorar o conceito de carrosséis, um elemento visual popular em sites para exibir múltiplas imagens ou
conteúdo de forma organizada e compacta.

O Que é um Carrossel?
Um carrossel é uma série de imagens ou conteúdos apresentados em sequência, normalmente dispostos horizontalmente, que
permite aos usuários navegar por eles de maneira intuitiva. Embora comumente associado a transições automáticas e controles
interativos, neste desafio, focaremos apenas na construção do layout do carrossel utilizando HTML e CSS.

Objetivos do Desafio:
• Criar a Estrutura do Carrossel: Desenvolver um layout de carrossel que organize os elementos de forma clara e visualmente
agradável.
• Estilização Eficiente: Aplicar CSS para estilizar o carrossel, criando um visual coeso e integrado ao design geral da página.

O Que Vamos Aprender:

• Estruturação HTML: Como organizar as imagens e conteúdos dentro do carrossel utilizando tags HTML de maneira semântica.
• Estilização com CSS: Aplicação de estilos para criar um carrossel atraente, ajustando o posicionamento, dimensões, e aparência
dos elementos.

Por que Criar um Carrossel?

Carrosséis são uma excelente maneira de maximizar o espaço na página e manter os usuários envolvidos, apresentando múltiplos
conteúdo sem sobrecarregar o layout. Eles são ideais para destacar produtos, portfólios, ou qualquer série de informações
visualmente ricas. Construir um carrossel com HTML e CSS aprimora suas habilidades de layout e design, preparando você para criar
interfaces web mais complexas e interativas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (1/9) 160
Para iniciar o Desafio do Carrossel, vamos criar nosso setup, ou seja, criar um arquivo html com sua estrutura básica, linkando o
arquivo CSS que também iremos criar e já aplicar o nosso layout padrão.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (2/9) 161
Para as imagens do Carrossel você podem usar as imagens do gabarito ou utilizar outras imagens que você escolha. Caso escolha
utilizar as do Gabarito, você deverá copiar e colar dentro da pasta de seu projeto carrossel.

E vamos adicionar 3 das imagens dentro do nosso arquivo html, cada uma encapsulada por um elemento div de classe chamada
imagem.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (3/9) 162
Dentro do arquivo CSS vamos iniciar o layout da nossa seção e da
div "carrossel".

Agora vamos alinhar ao centro a nossa seção. E criar o layout

para que nossa imagens fiquem posicionadas no máximo de
largura escolhido.

Como criamos no layout padrão a nossa classe flex com seus

aninhamentos específicos de classes podemos utilizar ela
sempre que precisarmos transforma um elemento em
display:flex.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (4/9) 163
Utilizar uma imagem dentro de um container, como uma <div>, ao invés de simplesmente usar a imagem diretamente, oferece várias
vantagens em termos de manipulação de tamanho e flexibilidade de layout. Aqui estão algumas razões:

1. Controle Flexível do Layout:

• Adição de Paddings e Margins: Uma <div> permite adicionar padding e margin ao redor da imagem, algo que é mais difícil de
controlar diretamente na imagem. Isso permite maior controle sobre o espaçamento ao redor da imagem.
• Alinhamento e Posicionamento: Usando uma <div>, você pode facilmente alinhar e posicionar a imagem dentro de um layout
complexo, utilizando propriedades como flexbox ou grid que se aplicam ao container.

2. Manutenção de Aspect Ratio:

• Com uma <div>, você pode usar técnicas como background-size para ajustar o tamanho da imagem dentro do container sem
distorção, mantendo o aspecto original da imagem.

3. Aplicação de Efeitos e Estilos:

• Overlays e Gradientes: Você pode adicionar overlays, gradientes, ou outros efeitos visuais ao container sem precisar editar a
imagem em si.
• Bordas e Sombreamento: Adicionar bordas, sombras, ou outros estilos visuais é mais fácil e flexível quando feito no container, em
vez de diretamente na imagem.

4. Responsividade:
• Dimensionamento Dinâmico: Um container pode ser dimensionado dinamicamente com width, height, ou usando unidades
relativas como % ou vw/vh, o que facilita a criação de layouts responsivos. A imagem dentro pode se adaptar ao tamanho do
container usando max-width, height: auto, ou outras propriedades de CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (5/9) 164
Em todas as divs que englobam as imagens vamos adicionar a • & .imagem: Esse seletor aninhado (& .imagem) estiliza cada
classe flex. E vamos melhorar o layout das imagens, para que elas imagem dentro do elemento imagens.
seja definidas com o mesmo tamanho, para isso vamos usar uma
combinação de propriedades. • width: 32.78666rem;: Define a largura de cada imagem. Essa
largura é fixa em 32.78666rem, o que garante que cada
imagem tenha o mesmo tamanho.

• justify-content: center; align-items: center;: Essas

propriedades são usadas para centralizar o conteúdo dentro
de .imagem, o que pode incluir a própria imagem (img). Isso
garante que a imagem fique centralizada dentro de seu
contêiner.

• overflow: hidden;: Esconde qualquer parte da imagem que

ultrapasse os limites do contêiner .imagem. Isso ajuda a
garantir que a imagem não saia do contêiner e mantenha um
layout limpo.

• aspect-ratio: 1/1;: Mantém a proporção da largura para a altura

em 1:1, o que faz com que a .imagem seja um quadrado
perfeito.
& img

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (6/9) 165
A propriedade overflow em CSS controla o que acontece com o conteúdo de um elemento que excede o tamanho de seu contêiner.
Em outras palavras, ela determina como o conteúdo que "transborda" do espaço disponível deve ser exibido.

Valores Comuns de overflow

• overflow: visible; Padrão: O conteúdo que ultrapassa os limites do contêiner é visível, ou seja, ele "vaza" para fora do contêiner. Este
é o valor padrão para a maioria dos elementos.
• Uso: Não é usado com frequência em layouts modernos, pois pode causar problemas visuais, especialmente em layouts
responsivos.

• overflow: hidden; Oculta o conteúdo: O conteúdo que ultrapassa os limites do contêiner é cortado, e a parte excedente não é
visível.
• Uso: Ideal quando você deseja garantir que o conteúdo não "vaze" do contêiner, mantendo o layout limpo e organizado. Também é
útil para criar efeitos visuais, como barras de rolagem personalizadas ou para esconder partes de uma imagem ou de um texto.

• overflow: scroll; Sempre adiciona barras de rolagem: Adiciona barras de rolagem ao contêiner, mesmo que todo o conteúdo
caiba dentro dele. Isso força a exibição das barras de rolagem.
• Uso: Pode ser útil em interfaces onde você deseja que o usuário saiba que pode rolar o conteúdo, independentemente de haver ou
não transbordo.

• overflow: auto; Adiciona barras de rolagem apenas quando necessário: Adiciona barras de rolagem apenas se o conteúdo
ultrapassar os limites do contêiner.
• Uso: É o valor mais comum para gerenciar conteúdo em caixas ou contêineres onde você só deseja que as barras de rolagem
apareçam quando realmente houver algo para rolar.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (7/9) 166
Agora vamos construir um lógica utilizando o pseudo after Vamos adicionar uma nova classe a imagem que está
dentro do nosso CSS. O pseudo-elemento ::after é usado em CSS centralizada que será a classe que dará foco na imagem.
para adicionar conteúdo adicional ou efeitos decorativos a um
elemento sem precisar alterar o HTML. Ele é útil em várias
situações:

Adicionar Conteúdo Extra

• Descrição: O ::after permite inserir conteúdo extra, como
símbolos, texto, ou ícones, após o conteúdo principal de um
elemento.

Criação de Efeitos Decorativos

• Descrição: Pode ser usado para criar formas decorativas ou
sombras sem a necessidade de imagens extras.

Melhoria da Acessibilidade
• Descrição: Pode ser usado para adicionar conteúdo
visualmente necessário sem interferir no HTML que pode ser
lido por leitores de tela.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (8/9) 167
Nesse momentos vamos gerar um efeito blur na imagens Ao observarmos o nosso projeto e diminuir a tela, vamos verificar
desfocadas e garatir que nossa imagem em foco não fique que colocamos o tamanho de largura fixo de 32.78666, e quando
"borrada". diminuimos a tela do nosso dispositivo ele mantém esse valor, ou
seja, ele não calcula de forma automática a largura que nossos
elementos. Para isso vamos conhecer mais uma propriedade do
CSS.

A propriedade calc() em CSS permite realizar cálculos

matemáticos diretamente dentro das regras de estilo. Isso é
especialmente útil para criar layouts responsivos e dinâmicos,
onde você pode precisar ajustar tamanhos, espaçamentos e
posições de forma precisa.

Como Funciona calc()

A função calc() permite combinar diferentes unidades de
medida, como pixels (px), porcentagens (%), e em (em), para
realizar cálculos matemáticos que ajudam a definir valores CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 1/2 (9/9) 168
A propriedade width com min() e calc() é usada para definir a
largura de um elemento, escolhendo o menor valor entre duas
opções calculadas. Isso ajuda a garantir que o elemento se ajuste
corretamente ao layout, independentemente de mudanças no
tamanho da tela ou do contêiner pai.
Para transformarmos esse calculo que fizemos manualmente,
vamos adicionar a propriedade calc com a seguinte estrutura.
• Primeira Opção: Calcula a largura com base em um valor fixo,
ajustando para margens ou espaçamentos fixos.

• Segunda Opção: Calcula a largura com base no tamanho da

tela, ajustando para margens ou espaçamentos.

Usando min(), o CSS seleciona o menor valor entre essas duas

opções, ajudando a criar um layout que se adapta bem tanto a
Dessa forma conseguimos alcançar o mesmo valor de largura,
tamanhos fixos quanto a tamanhos de tela variáveis.
porém ainda temos o conflito de quando a tela ficar menor ele
ainda mantém os 1000px. Então vamos adicionar uma nova
conta utilizando a medida vw.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 2/2 (1/3) 169
Para a segunda parte da nossa resolução, vamos iniciar Para obtermos o layout desejado dos nossos "botões", vamos
adicionando os dois botões que serão representados por transforma-los em display:flex adicionando a classe flex em cada
elementos do tipo div. E vamos utilizar o unicode dos símbolos < um dos elementos de botão.
e >, como fizemos nas aulas passadas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 2/2 (2/3) 170
Vamos aplicar mais algumas propriedades para o nosso botão,
mas vamos adicionar classes diferentes para o botão da
esquerda e o botão da direita. Para que o seu posicionamento
fique correto no carrossel.

Agora vamos adicionar as demais imagens do Carrossel e

adicionar a sua estrutura no HTML.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Carrossel – Resolução 2/2 (3/3) 171
Agora vamos adicionar um contêiner, que irá encapsular todos os nossos elementos referente as nossas imagens.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Criando o Popups da Home da Hashtag (1/1) 172

No Desafio 2, vamos focar na criação de um popup para a página

inicial da Hashtag, utilizando apenas HTML e CSS. O objetivo é
construir um popup estilizado que se sobreponha ao conteúdo
da página, proporcionando uma forma eficaz de exibir
informações adicionais ou promover interações importantes sem
redirecionar o usuário para outra página.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (1/9) 173

Lembrando do Desafio do Popup desse módulo, sabemos que a estrutura dele não precisa estar dentro de nenhum elemento
semântico como header, main ou footer. Podemos adicionar um contêiner que será o elemento div no final de toda nossa
estrutura de HTML. Vamos reutilizar a estrutura do desafio popup, e modificar as estruturas e layout que for necessário.

Para o arquivo CSS, vamos reutilizar as classes flex, poup-aberto e popup.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (2/9) 174
Após a importação da estrutura e layout do popup, vamos Conseguimos verificar que existem algumas estruturas
adicionar a classe popup-aberto no elemento body, para que estão passando por cima do popup, então precisamos
conseguirmos visualizar nosso popup na página da adicionar a propriedade z-index dentro do contêiner
Hashtag. popup.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (3/9) 175
Vamos alterar a cor de fundo e o blur que estamos Agora vamos verificar quais elementos nós temos no
aplicando para o nosso popup, pois nesse momento Popup da Hashtag e se houver alguma estrutura que não
vamos estilizar o popup igual ao que aparece dentro da tenha no popup vamos apagar o elemento e também o
Home da Hashtag. seu css, um exemplo é o elemento de título e as classes de
títulos e realce do nosso desafio popup.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (4/9) 176
Para corrigirmos o posicionamento e largura da nossa No nosso container, vamos retirar o padding e adicionar a
imagem, vamos adicionar a seguinte estrutura de propriedade overflow:hidden.
aninhamento do nosso elemento container.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (5/9) 177
Vamos alterar as cores do nosso elemento "botão" de
fechar.

Precisamos adicionar também as classes flex e col dentro do

novo elemento "restante" para que ele herde as propriedades
flexbox.

Agora vamos adicionar um div com classe chamada

restante, que irá encapsular todos os elementos com
exceção da nossa imagem e o nosso botão "fechar".

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (6/9) 178
Vamos retirar a propriedade de gap do nosso elemento Vamos alterar as propriedades de cores do nosso elemento
container. container e retirar a propriedade de sombra.

E adicionar a propriedade gap e padding no elemento

"restante".

Também vamos precisar alterar a cor do nosso botão

fechar.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (7/9) 179
O próximo passo é adicionar o texto correto do nosso Agora vamos retirar a propriedade aling-self do nosso
popup e atribuir uma propriedade para alinhar o texto de botão, para que ele por padrão tenha o valor de strech.
"ponta a ponta"..

Abaixo do nosso texto temos uma estrutura de formulário

que contém um input e o nosso botão "quero saber mais",
então vamos adicionar essas estruturas no HTML.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (8/9) 180
Vamos adicionar uma estilização para o nosso elemento Nesse momento vamos modificar o layout do nosso botão
form, e utilizando o CSS Nesting toda estrutura de adicionando novas cores e borda.
estilização do botao irá ficar dentro da tag form que está
dentro do aninhamento do elemento "restante". E
adicionaremos um gap no form.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 2 – Desafio 2 – Gabarito (9/9) 181
Para finalizar o nosso popup vamos adicionar uma borda dentro do nosso elemento container.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 182
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT

Módulo 3

GRID NO CSS
GRID NO CSS
GRID NO CSS DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Apresentando o módulo (1/1) 183

Bem-vindo ao módulo “Grid no CSS”! Neste módulo, aprofundaremos o seu conhecimento sobre a ferramenta “Grid” do CSS, que é
uma das formas de construir layout em CSS.

Temas abordados:

• Como criar layout com Grid: Você aprenderá a como utilizar o Grid e as suas peculiaridades.
• Complementando o que aprendemos com Flexbox: Como vimos anteriormente, alguns elementos podem ser implementados
com Flexbox. Entretanto, outros ficam melhores com Grid. Por esse motivo, essa técnica pode ser muito útil.
• Grid: A propriedade Grid será explorada neste módulo.
• Display: grid: Assim como para a ferramenta Flex tínhamos display:flex, a lógica é similar para o caso do Grid. Sendo assim,
teremos display:grid quando utilizarmos essa técnica em CSS.

Este módulo é projetado para ampliarmos as suas ferramentas na realização de layouts com CSS. Nesse sentido, passaremos pelos
principais detalhes de como implementar o Grid.

Prepare-se para aprender essa importante ferramenta!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Como usar o Grid (1/14) 184

Nesta seção, iremos iniciar o nosso aprendizado de como utilizar o Grid. Vamos nessa!

O primeiro passo consiste em criar o arquivo “[Link]”, que será manipulado durante este módulo:

Após essa etapa, lembre-se que, ao utilizar o Visual Studio Code, basta pressionar a tecla “!” e em seguida para gerar a estrutura
do código html automaticamente:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (2/14) 185
Com os passos anteriormente descritos, podemos começar a incluir o código necessário para utilizar o Grid!

Vamos criar e editar alguns dos elementos existentes na página html a fim de que possamos manipulá-los e criar um layout de estilo
Grid.

Inicialmente, complete os seguintes passos:

1. Coloque o título da página html de “Grid”;

2. Crie uma <div> dentro do <body>;
3. Inclua diversos elementos <div> dentro dessa <div> mais externa. Neste caso, vamos utilizar cinco elementos divs internos para
facilitar a manipulação dos elementos.

Com essas etapas concluídas, inclua o elemento “class=grid” na <div> mais externa, uma vez que já sabemos que iremos utilizar o
comando display:grid futuramente.

A fim de facilitar, inclua nas divs internas as respectivas classes: class=“div1”, class=“div2”, class=“div3”, class=“div4” e class=“div5”.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (3/14) 186
Após essas etapas, o seu código deve ser similar ao seguinte:

Com essas etapas feitas, aperte “Go live” no canto inferior direito, a fim de rodar um servidor local no seu computador. Após
pressionado o botão, uma página html em branco será aberta:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (4/14) 187
Com esses elementos concluídos, vamos formatar um pouco o estilo do html!

Primeiramente, vamos incluir a tag <style> à página. Sendo assim, inclua, abaixo do body e acima da <div> mais externa, a tag <style>,
o estilo .grid e o comando display:grid.

Após esse processo, o <body> do seu html deve estar similar a seguinte estrutura:

Salve o seu código e atualize a página que está rodando no servidor local do seu computador.

Você irá notar que nada mudou! Isso aconteceu porque ainda não incluímos conteúdo nas divs internas, tal como, por exemplo, cor.

Vamos mexer nesses parâmetros agora! DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Como usar o Grid (5/14) 188
Para adicionar alguns parâmetros e visualizarmos as divs, vamos adicionar a cor vermelha, o tamanho e a altura dos elementos.

Sendo assim, dentro do escopo “.grid”, adicione & div e determine os valores para os atributos mencionados anteriormente. Neste
exemplo, utilizaremos: background-color: red ; height: 5rem ; e width: rem.

Após a conclusão dessas etapas e atualização da página, o código do <style> e a página html serão, respectivamente, parecidas com
as figuras a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (6/14) 189

A fim de visualizar as divs individualmente, podemos, dentro do navegador, apertar F12 e selecionar a aba “Elements”.

O código html da página será exibido, e, à medida que passamos o mouse, o navegador irá destacar o elemento em questão.

Adicionalmente, note que, assim como aparecia no flex, a palavra grid aparece ao lado do elemento <div class=“grid”>.

Isso será muito útil para conseguirmos entender como serão as linhas, as colunas e outros elementos do layout em grade.

Outro detalhe a ser notado é que, do lado direito, o navegador exibe algumas das propriedades, tal como alinhamento e posicionamento.

A imagem da próxima página ilustra a interatividade ao passar o mouse em cima das divs, enquanto as setas destacam,
respectivamente, o local que a palavra grid aparece no código e a escolha de posicionamento e alinhamento:
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Como usar o Grid (7/14) 190
local que aparece a palavra grid no html

escolha de alinhamento e
posicionamento do grid

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (8/14) 191
Repare que se clicarmos na palavra “grid”, indicada pela seta azul na imagem anterior, a página destacará o grid completo.

Note dois pontos essenciais: temos um layout em grade com 5 linhas e existem alguns delimitadores que dividem as linhas entre si
(as setas verdes da imagem a seguir apontam para as linhas).
Delimitadores

Vamos editar esse layout para ganharmos cada vez mais confiança ao mexer com o “grid”?

Primeiramente, mudaremos as cores! DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Como usar o Grid (9/14) 192
Para mudarmos as cores, vamos atribuir a cada uma das classes que criamos (div1, div2, div3, div4 e div5) uma cor diferente.

Para a div1, manteremos a cor padrão vermelho.

Para cada uma das outras divs, vamos atribuir uma cor diferente a partir do acesso às diferentes classes.

Utilize o comando “& .divx” e mude x para o número da classe desejada (a figura ao fim da página ilustra as modificações para cada
uma das classes).

Atribua a cor azul para a div2, a verde para div3, amarelo para div4 e roxo para div5.

Após realizar essa etapa e atualizar a página, a tag <style> e a sua página estarão similares, respectivamente, as seguintes imagens:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (10/14) 193
Vemos que, conforme esperado, somente as cores foram mudadas!

Além disso, note que continuamos com o mesmo número de linhas (ou também chamada de tracks).

Repare que o layout grid, por padrão, organiza a página por linhas.

Caso queiramos colocá-la em colunas, podemos atribuir a propriedade grid-auto-flow para column (lembre-se que o
grid-auto-flow vai especificar como as linhas e colunas serão criadas automaticamente).

Faça o teste de modificar a direção para column e atualize a página!

O seu código e a página devem ser similares, respectivamente, às seguintes imagens:

Escolha do direcionamento
por coluna

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (11/14) 194
Note que já temos algumas diferenças em relação ao flex, que foi estudado anteriormente!

O grid vai de ponta a ponta da tela, mas essa propriedade distribui igualmente cada caixa.

Por outro lado, com o flex, as divs estariam uma do lado da outra, e teríamos que mexer em propriedades de alinhamento para
chegarmos ao resultado exibido na tela.

Vamos, agora, mexer no tamanho das caixas para vermos como a propriedade se comporta!

Para isso, coloque width:50rem e height:50rem na propriedade da div, e você verá que as caixas crescerão (muito!), fazendo a página
html e parte do código ficarem similares as seguintes imagens:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (12/14) 195
Nesse sentido, a próxima pergunta usualmente é: como posso fazer para que o layout fique melhor?

Vamos, primeiramente, fazer as definições padrões para que saibamos a equivalência entre 1rem e número de pixels (lembre
que isso já foi feito nas aulas anteriores!):

Com isso pronto, sabemos que 100rem é equivalente a 1000 pixels.

Vamos reduzir o tamanho de cada div interna a 30 rem (300 pixels) e estipular o tamanho máximo da div externa em 100rem
(100 pixels).

Após essas etapas, o código e a página html estarão similares às imagens da próxima página:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (13/14) 196

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Como usar o Grid (14/14) 197

Ao explorar a página criada, você notará que o somatório de todas as divs é maior que o tamanho da div, que está delimitada
a 1000 pixels.

Adicionalmente, note no canto inferior direito que temos o tamanho dos elementos da página:

Sendo assim, podemos mexer nos tamanhos para adequar o layout ao que desejamos!

Além disso, também podemos modificar o número de linhas e colunas!

Com isso em mente, podemos encerrar o conteúdo planejado para esta seção.

Nas próximas seções, começaremos a mexer com essas propriedades, aprofundando, ainda mais, o seu conhecimento sobre
o grid! DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Definindo as linhas da Grade (1/10) 198
Para esta nova seção, vamos começar a manipular as linhas do layout em grade!

Primeiramente, é importante entender que existem as formas automática e manual para definir a quantidade e o tamanho das linhas
desse tipo de layout.

Caso quiséssemos criar as linhas de forma automática, basta incluir a propriedade grid-auto-row no código e especificar o tamanho
das linhas (neste caso, utilizaremos 40 rem):

Note que enquanto a propriedade grid-auto-flow está relacionada a como os conteúdos serão organizadas na tela (neste caso, em
colunas), a propriedade grid-auto-rows refere-se as características das linhas CASO elas sejam criadas.

Em outras palavras, se atualizarmos a página veremos que, visualmente, nada aconteceu.

Entretanto, ao clicar no grid, será possível notar que o tamanho da grid cresceu de 300 pixels para 400 pixels, como mostrado a seguir:
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Definindo as linhas da Grade (2/10) 199

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as linhas da Grade (3/10) 200
Caso queiramos especificar o tamanho de uma possível segunda linha, basta adicionar os tamanhos ao lado do grid-auto-rows:

Tamanho da possível primeira linha Tamanho da possível segunda linha

Lembre-se que se atualizarmos a página html, não haverá, visualmente, mudança, uma vez que só criamos uma linha e os tamanhos
são relativos às POSSÍVEIS linhas que são geradas automaticamente.

Para criarmos novas linhas, podemos mexer, a partir da propriedade grid-template-rows, no modelo (template) da página html que
estamos trabalhando.

Utilizando o arquivo [Link], podemos comentar a propriedade grid-auto-rows e adicionar tamanhos que desejamos para as linhas:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as linhas da Grade (4/10) 201
Ao atualizar a página, será possível observar que agora, de fato, temos duas linhas no nosso html, sendo cada uma com um tamanho
diferente:

40rem (400
pixels)

50rem (500
pixels)
Definição dos
tamanhos

E caso queiramos colocar uma terceira linha de tamanho 30rem abaixo da linha de 50rem? Como fazemos?

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as linhas da Grade (5/10) 202
Seguindo a mesma lógica, basta adicionar um terceiro valor na propriedade grid-template-rows, fazendo com que o código e a página
html fiquem parecidos, respectivamente, com as seguintes imagens:

40rem (400
pixels)

50rem (500
pixels)

30rem (300
pixels)

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as linhas da Grade (6/10) 203
Note que estamos decidindo o número de linhas manualmente e deixando a parte automática decidir o número de colunas.

Podemos, também, especificar o número de colunas manualmente, ou determinar o número de colunas manualmente e deixar o
número de linhas ser decidido automaticamente. Esse último caso o que veremos na próxima seção!

Para entender ainda melhor como o layout em grid processa a informação, podemos testar diferentes número de elementos.

Por exemplo, caso adicionemos 1 elemento, teremos 6 elementos no total. Como estamos especificando que queremos três linhas,
teremos duas colunas (que serão geradas automaticamente!).

Analogamente, se tivermos 7 elementos, a parte automática fará o trabalho de alocar mais uma coluna para o layout da página!

Para fazer o teste com 6 e 7 elementos, podemos criar, respectivamente, mais uma ou duas divs no código que estamos utilizando
(basta copiar e colar uma das divs):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as linhas da Grade (7/10) 204
A página, então, com 6 ou 7 divs ficarão similares às seguintes imagens:

Neste momento, é importante entender a diferença entre os layouts flex (visto anteriormente) e grid.

Enquanto no flex temos apenas uma linha ou apenas uma coluna, no grid podemos ter diversas linhas e colunas. Isso pode facilitar o
design de algumas páginas! DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Definindo as linhas da Grade (8/10) 205
Antes de encerrarmos essa seção, é importante mencionar que existem diferentes formas de definir o tamanho das linhas.

Além das unidades rem e px, podemos utilizar um percentual em relação à altura total do grid.

Para isso, temos que, primeiramente, definir a altura total que queremos do grid (por exemplo, height: 120rem).

Após essa etapa, basta definir no grid-template-rows as proporções que queremos para cada uma das linhas.

Neste exemplo, colocando a primeira linha tem 30% do tamanho, a segunda linha 35% e a terceira linha 35%, temos:

Uma outra forma de definir os tamanhos é utilizar frações (unidade fr).

Basicamente, o html vai pegar a quantidade total, dividir pelo height, e atribuir os valores de acordo com as frações dadas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as linhas da Grade (9/10) 206
Por exemplo, se quisermos todas as linhas com o mesmo tamanho, basta utilizar:

Caso utilizássemos, por exemplo, “grid-template-rows: 1fr 2fr 1fr;”, a primeira linha e a terceira linha teriam o mesmo tamanho, e a
segunda linha teria o dobro do tamanho de cada uma das duas.

É importante notar que se eliminarmos o tamanho do height, o grid deixará somente o espaço para cumprir a definição que fizemos.

Por último, mas não menos importante, caso queiramos todas as linhas do mesmo tamanho, podemos utilizar o comando repeat(x, y),
em que x são o número de linhas que desejamos e y é o tamanho para cada linha.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as linhas da Grade (10/10) 207
Nesta seção, lidamos com as linhas do layout em Grid, aprendemos a editar de forma manual ou automática o layout da página! Na
próxima seção, aprenderemos a fazer esses procedimentos com as colunas!

Antes de prosseguirmos para a próxima seção, vamos editar um pouco a página para termos as divs 6 e 7, que foram criadas por último,
com classes e cores diferentes (brown e lime, respectivamente).

modificação
modificação das
das cores
classes

Com isso feito, vamos em frente! Rumo à fluência em html e CSS, caro impressionador!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as colunas da Grade (1/8) 208
Na seção anterior, aprendemos a como mexer com as linhas do layout em Grade! Nesta seção, vamos expandir o raciocínio para
mexermos com as colunas!

Repare que, até o momento, não especificamos qual o tamanho de cada coluna. Como, então, o html está criando o tamanho de cada
uma das colunas?

Basicamente, pode-se perceber que a página está pegando o width disponível e atribuindo espaço igual para as três colunas existentes
(note que cada coluna possui o mesmo tamanho).

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as colunas da Grade (2/8) 209
Para determinar o tamanho de cada uma das possíveis colunas no código [Link], podemos, a partir da propriedade grid-auto-
columns, especificar a dimensão desejada!

Por exemplo, caso queiramos todas as colunas do mesmo tamanho, podemos utilizar a propriedade 1fr:

Ao atualizarmos a página, notaremos que todas as colunas continuam com o mesmo tamanho.

Se quisermos tamanhos diferentes, podemos utilizar os métodos ensinados na seção anterior. Por exemplo, para fazermos a segunda
coluna o dobro do tamanho da primeira e da terceira, podemos utilizar a unidade fr, resultando no código e na tela a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as colunas da Grade (3/8) 210
Neste momento, a pergunta que pode ser feita é: por que o espaço alocado para a div amarela não é o dobro da vermelha e da verde?

Lembre-se que no código html utilizado nós definimos a largura máxima width: 100rem.

Sendo assim, o código html ficará restrito àquele espaço máximo, buscando alocar os tamanhos da melhor forma possível.

Caso seja retirado o limite máximo fixo, a página conseguirá utilizar todo espaço em tela, mantendo as proporções estipuladas pelo
programador.

Note a diferença entre as distribuições com o limite máximo width: 100rem (imagem à esquerda) e sem esse valor (imagem à direita):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as colunas da Grade (4/8) 211
Caso queiramos fixar o número de colunas, assim como fizemos com as linhas, podemos utilizar a propriedade grid-template-columns.

Para isso, vamos comentar a linha da propriedade grid-auto-columns (lembre-se do atalho Ctrl+; no Visual Studio), uma vez que não haverá
criação automática de colunas:

Note que se comentarmos a linha grid-auto-flow, estaremos mudando a ordem de exibição das cores, uma vez que o padrão de organização
é por linha.

Em outras palavras, quando temos grid-auto-flow:column, preenchemos a coluna inteira antes de prosseguirmos para a próxima coluna.

Quando temos o padrão por linhas (ou grid-auto-flow:row), preenchemos a linha inteira antes de irmos para a próxima linha.

Vamos fazer um teste para vermos a diferença entre os dois?

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as colunas da Grade (5/8) 212
Quando utilizamos o padrão por linha, ficamos com a imagem à esquerda; quando temos por colunas, ficamos com a tela à direita:

Perceberam a diferença e importância de entendermos como cada uma das propriedades funciona? Isso pode mudar totalmente o
layout de uma página. Vamos em frente!
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Definindo as colunas da Grade (6/8) 213
Já aprendemos a manipular o número de linhas e de colunas, e também criarmos de forma automática e/ou manual essas
propriedades.

Note que podemos coordenar os tamanhos e espaçamentos de acordo com a nossa vontade!

Por exemplo, caso queiramos quatro colunas no total, com as duas primeiras de tamanho 1fr, a terceira com 2fr e a última com
tamanho 1fr, temos, sem limitarmos o width:

Por outro lado, caso a gente limite o width, o html buscará organizar da melhor forma possível:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as colunas da Grade (7/8) 214
Antes de irmos para a próxima seção, vamos editar um pouco o layout e numerarmos cada uma das divs:

Ao atualizarmos a página, notaremos que os números aparecerão no canto superior esquerdo da tela.

Vamos editar isso, centralizando e justificando os itens, mudando a cor e aumentando um pouco a letra:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Definindo as colunas da Grade (8/8) 215
Visualmente, notamos que a div4 não está muito clara. Sendo assim, podemos alterar a cor da div4 para preto, resultando em:

Com essas modicações feitas, podemos seguir para a próxima seção!

Vamos que vamos, caro impressionador!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (1/11) 216
O assunto que trataremos nesta seção é a propriedade grid.

Esta propriedade é diferente da display:grid, que especifica esse tipo de layout como um “contêiner” e possui, do inglês, os “grid
items” como elementos (a ideia é similar aos “flex items” que estudamos anteriormente).

No caso que estudaremos nesta seção, a propriedade grid é uma daquelas chamadas de shorthand property, que possuem sintaxes
específicas e permitem que o programador escolha os valores de múltiplos parâmetros simultaneamente.

Utilizando uma lógica similar a que as propriedades flex-grow, flex-shrink e flex-basis estão compreendidas dentro do flex, a
propriedade grid compreende todas as definições de layout vistas até agora (como, por exemplo, grid-auto-flow, grid-auto-rows, etc).

Caso queiramos visualizar no Visual Studio a descrição dessa propriedade, basta digitar grid, e a explicação, em inglês, aparecerá ao
lado:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (2/11) 217
É importante destacar que essa é uma das únicas propriedades que não há recomendação explícita para a utilização da versão shorthand
ao em vez da implementação manual das propriedades separadamente.

Por exemplo, caso acessemos a documentação grid do CSS no Mozilla ([Link] veremos
que há diversas formas de definição do parâmetros, o que pode tornar a vida do programador um pouco mais complicada.

De qualquer forma, é importante passar essas informações para termos na nossa “caixa de ferramentas” e utilizarmos quando necessário!

Se nós escrevermos um ou dois valores ao lado do grid, estaremos tratando das propriedades “template” relacionadas às linhas e
colunas, respectivamente.

Por exemplo, repetindo os comandos que utilizamos nas seções anteriores, temos a seguinte equivalência:

Sendo assim, no código [Link], podemos utilizar a versão curta e notaremos que não houve nenhuma modificação do layout (lembre-
se de comentar a versão longa!):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (3/11) 218
Além desse padrão de definição, existem outras formas de definir algumas das propriedades de modo shorthand.

Nesses novos casos, estaremos também abordando as outras propriedades, tais como grid-auto-flow, grid-auto-rows, grid-template-
rows e grid-template-columns.

No primeiro padrão, temos o caso que acontece quando queremos definir o número de linhas manualmente e deixar o número de
colunas automaticamente.

Para atingir esse objetivo, podemos definir em shorthand da seguinte forma:

Neste caso, se comentarmos as outras definições e atualizarmos a página, teremos a tela e código similares a:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (4/11) 219
Notou a diferença com relação ao layout que tínhamos anteriormente?

Da forma que escrevemos, a primeira coluna é preenchida inicialmente, depois a segunda, e assim sucessivamente.

Isso é fácil perceber pela numeração das divs (de 1 a 7) que implementamos anteriormente! As setas e os números a seguir mostram a
ordem de preenchimento dos elementos:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (5/11) 220
Caso a gente queira uma variação de tamanho (por exemplo, a primeira div com um tamanho, a segunda com duas vezes essa dimensão
e a terceira com o triplo do tamanho), podemos implementar da seguinte maneira:

Ao atualizar a página, teremos uma imagem similar a seguinte:

Note que, nesta imagem, o mouse foi colocado em cima da palavra grid para facilitar a visualização dos tamanhos relativos entre as divs.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (6/11) 221
Se quisermos especificar os tamanhos das colunas CASO elas sejam automaticamente geradas, podemos adicionar o tamanho, separado
por um espaço, ao lado da palavra auto-flow.

Por exemplo, para um tamanho de 40rem (ou 400 pixels pelas nossas definições), temos:

Sendo assim, ao atualizar a página e colocar o mouse sobre a palavra grid, temos a seguinte imagem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (7/11) 222
Note que o tamanho da div é maior que a tela azul. Isso acontece porque temos um limite de tamanho máximo width:100.

Caso a gente retire o limite width:100, será possível visualizar o layout da página ocupando o espaço todo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (8/11) 223
A última sintaxe que temos é para o caso que especificamos as colunas de forma manual e as linhas automaticamente.

A forma de especificar é dado por:

Ao atualizar a página, notaremos que a ordem de preenchimento mudará. Em outras palavras, primeiro as colunas serão
preenchidas e depois as linhas, conforme mostra a tela:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (9/11) 224
Se quisermos especificar o tamanho das linhas CASO elas sejam criadas, basta incluir o número ao lado da palavra auto-flow.

Por exemplo, caso queiramos a primeira linha com um tamanho, a segunda linha com o dobro do tamanho e a terceira linha desse
mesmo tamanho, temos a seguinte implementação:

Após atualizar a página, teremos a imagem a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (10/11) 225
Outro exemplo é se quisermos que cada uma tenha 40rem (ou 400 pixels), teremos o seguinte código:

Após essa implementação, teremos a seguinte imagem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade Grid (11/11) 226
Ao longo das próximas seções, dificilmente utilizaremos os padrões shorthand dessa propriedade devido a maior dificuldade.

Sendo assim, vamos voltar ao código que tínhamos antes:

Com a explicação do método shorthand feita, podemos seguir para a próxima seção!

Vamos aprender a como mudar espaçamentos, tamanho dos elementos, posicionamento, e muito mais!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (1/23) 227
Nesta seção, iremos abordar o posicionamento dos elementos na estrutura grid.

No Flex, que foi visto anteriormente e é menos flexível, nós mexíamos na propriedade order para posicionar os elementos.

Entretanto, lembre-se que tínhamos que definir a posição relativa dos elementos, dizendo que um elemento seria posicionado antes do
outro.

Por exemplo, poderíamos dizer que a div1 será posicionada antes da div2; a div2 antes da div3; e assim por diante.

No grid, por outro lado, conseguimos dizer exatamente em qual local o elemento será posicionado

Esse fato, apesar de simples, é muito importante, pois faz com que esse tipo de layout seja mais flexível!

Para entendermos como fazer esse posicionamento, vamos abrir as ferramentas do desenvolvedor (só apertar F12 com o navegador
aberto), selecionar a aba Elements e apertar a palavra grid para destacarmos a grade que temos.

Você notará que, após realizar esse processo, existirão números na parte superior e lateral que indicam, respectivamente, o número da
coluna e da linha em que a div é iniciada.

A imagem na próxima página detalha um pouco mais os elementos que aparecerão na tela: DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Posicionando os elementos (2/23) 228
Local em que se
aperta para exibir a
grade existente no
layout da página
html
Numeraçã
o das
linhas

Numeraçã
o das
colunas

Note que temos os números no início das linhas e/ou colunas, fazendo com que possamos indicar no código em que número o
elemento começa e termina.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (3/23) 229
Por exemplo, a div1 possui início na coluna 1 e linha 1; e fim na linha 2 e coluna 2. Sendo assim, a numeração pode ser vista da seguinte
maneira:
Número da coluna que a div1 começa Número da coluna que a div1 termina

Número da linha
que a div1 começa Número da linha
que a div1 termina

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (5/23) 230
Outro exemplo, a div3 começa na linha 1 e coluna 3; e termina na linha 2 e coluna 4 (observe as setas a seguir).

Número da coluna que a div3 começa Número da coluna que a div3 termina

Número da linha
que a div3 começa Número da linha
que a div3 termina

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (6/23) 231
Sendo assim, é possível perceber que com essa ferramenta podemos definir outro espaço (conjunto de linhas e colunas) para
início e término do elemento.

Caso queiramos migrar o elemento div3 para o espaço que fica abaixo do elemento div4 e ao lado da div7, podemos,
inicialmente, colocar o início da div3 para a coluna 4 e o fim para coluna 5.

Para fazer isso, vamos modificar as propriedades grid-column-start e grid-column-end para, respectivamente, o início e
término das colunas da div3.

Com essas modificações, temos o seguinte código:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (7/23) 232
Ao atualizar a página, você notará que o elemento div3 foi deslocado para a direita, conforme mostra a imagem a seguir:

Note que isso aconteceu porque, até agora, não especificamos a linha de início e final do elemento!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (8/23) 233
Para colocarmos no local que queremos, podemos colocar as linhas nas propriedades grid-row-start e grid-row-end:

Após essa inclusão no código, teremos o resultado que desejamos (note que as outras divs irão mudar automaticamente para se
adaptar):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (9/23) 234
Note que, até o momento, só fizemos os casos em que as divs ocupam um espaço dentro do quadro de layout.

Caso queiramos aumentar o espaço que ela ocupa, basta incluir nas propriedades grid-column-start e grid-column-end números que
aumentem o tamanho:

Entretanto, ao observar a página, notaremos que ela continua ocupando o mesmo espaço porque a definição do width continua em 30rem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (10/23) 235
Caso a gente modifique o width da div3 para 45rem, por exemplo, veremos que ele ultrapassa o espaço alocado para uma coluna:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (11/23) 236
Adicionalmente, perceba que, até este momento, nós especificamos os tamanhos dos elementos manualmente.

Caso a gente especifique width da div3 e não especifique o width e height das divs, os tamanhos dos elementos serão da dimensão dos
números, conforme mostrados a seguir:

Dessa forma, podemos mexer nas propriedades que estávamos vendo anteriormente (grid-template-rows, grid-template-columns, etc).

Entretanto, como queremos que as linhas sejam geradas automaticamente, podemos utilizar a propriedade grid-auto-rows com o
tamanho de, por exemplo, 30rem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (12/23) 237
Sendo assim, teremos que as linhas serão criadas de acordo com as necessidades:

Note que, de acordo com o código que temos, a penúltima coluna possui o dobro do tamanho da última, e é por isso que vemos a
largura da coluna das divs 3 e 4 estão maiores que as demais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (13/23) 238
Perceba que as possibilidades de ordenamento dos elementos depende muito do que o desenvolvedor deseja!

Por exemplo, podemos colocar a div1 na última coluna da primeira linha. Para isso, vamos criar uma classe para a div1 (note que não
havíamos criado uma classe específica para ele) e definir as propriedades grid-column-start e grid-column-end :

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (14/23) 239
Com base no imagem anterior, é possível perceber que o html desloca os elementos para as próximas divs existentes na grade, mas é
possível fazermos operações similares a fim de deslocar esses elementos para outros lugares.

Por exemplo, se quisermos deslocarmos a div2 para a primeira posição, basta posicionar de acordo com o que desejamos:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (15/23) 240
Então, com base no que vimos até agora, é possível mexer no layout conforme desejarmos!

Note que mesmo que possua elementos vazios, a grade continua existindo como se fosse um bloco!

Um ponto interessante é que o posicionamento dos elementos possui uma versão shorthand.

Para determinarmos a coluna inicial e/ou fim da linha, basta incluirmos o número da coluna inicial e número da coluna final com o
símbolo “/” entre os números.

Por exemplo, para fazer a div1 começar na coluna 4 e ir até 5 (ou seja, manter o layout do mesmo jeito), temos:

Para o caso da linha, temos a mesma lógica. Sendo assim, mantendo a div2 na mesma posição que está atualmente (fazer o elemento
começar nas linha e coluna 1 e terminar nas linha e coluna 2), tem-se:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (16/23) 241
Caso queiramos determinar somente a posição que o elemento começa, basta omitir o elemento “/” e o segundo número.

Como exemplo desse fato, podemos alterar grid-row para termos os elementos na a primeira, segunda e terceira linha. As modificações
no código e as respectivas figuras são exibidas a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (17/23) 242
De forma similar, podemos fazer esse procedimento para modificar as colunas de início da div2.

Os casos para fazer a div2 começar na coluna 1 e 2 são mostradas a seguir

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (18/23) 243
Outro caso de uso da versão shorthand é dizer a linha e o tamanho que queremos para o elemento.

Caso queiramos que o elemento comece na div2 e possua tamanho 2, basta acrescentar ao lado do número de início o elemento “/”,
com a palavra span, e seguida da duração:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (19/23) 244
Outro exemplo, se quisermos que a div2 e possua tamanho 3, basta colocar o número 3 ao lado da palavra span:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (20/23) 245
Note que se colocarmos “span 1” ou omitirmos a palavra span, será atribuído o tamanho padrão 1.

De forma alternativa, podemos também especificar em que coluna ou linha o elemento termina, e qual é o tamanho do elemento.

Por exemplo, utilizando um caso similar de tamanho 2 e fazendo com que a div2 termine na coluna 3, tem-se:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (21/23) 246
Outra possibilidade é colocar a div2 ocupando 3 espaços. O código ficará da seguinte maneira:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (22/23) 247
Outro exemplo é mexer na propriedade row. Por exemplo, para fazer a div2 começar na coluna 1 e se estender por 3 espaços, podemos
utilizar o seguinte código, que gerará a seguinte imagem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Posicionando os elementos (23/23) 248
Com base na figura anterior, notamos que aconteceu um fenômeno interessante!

Quando as divs não possuem posição determinada, elas são deslocadas de acordo com a necessidade.

Caso os elementos sejam especificados manualmente, o html irá fixar o posicionamento deles, fazendo com que coincidam caso
estejam sobrepostos.

Vimos, nesta seção, que podemos posicionar as divs de acordo com o que desejamos!

Na próxima seção, veremos um pouco de espaçamento entre os elementos!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Espaçamento entre os elementos (1/6) 249
Nesta seção, veremos um pouco do espaçamento entre os elementos do layout!

O espaçamento no layout tipo Grade é similar ao do flex!

Entretanto, antes de visualizarmos os efeitos de algumas propriedades do grid, vamos mexer no código para termos um layout apropriado.

Sendo assim, comente a especificações manuais de cada uma das divs existentes, fazendo com que o posicionamento seja automático:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Espaçamento entre os elementos (2/6) 250
Além disso, para facilitar o entendimento, vamos mexer também no número de linhas e colunas criadas automaticamente, alterando a
propriedade grid-template-columns.

Podemos fazer isso de diversas formas, tal como, por exemplo, limitar o layout a 4 colunas de mesmo tamanho:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Espaçamento entre os elementos (3/6) 251
Tendo esse novo layout em tela, agora sim podemos inserir espaçamentos entre os elementos!

Como já se deve imaginar, existem alguns tipos de espaçamento que podem ser utilizados.

Primeiramente, vamos incluir um espaçamento entre as linhas a partir da propriedade row-gap.

Para isso, basta especificar o espaço desejado (por exemplo, 2rem) e o layout ficará similar ao seguinte:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Espaçamento entre os elementos (4/6) 252
De forma análoga, podemos colocar espaçamento entre as colunas utilizando a propriedade column-gap.

Sendo assim, utilizando também o tamanho de 2rem, basta incluir essa definição no código:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Espaçamento entre os elementos (5/6) 253
Note que as duas propriedades que utilizamos são similares a que tínhamos na flex!

Pela lógica, assim como no flex, podemos utilizar a propriedade gap: 2rem caso tenhamos a situação em que o espaçamento da
linha é igual ao da coluna (row-gap = column-gap):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Espaçamento entre os elementos (6/6) 254
É importante ressaltar que existem as propriedades específicas para o layout em Grade, chamadas de grid-column-gap, grid-
row-gap e grid-gap.

Entretanto, essas propriedades estão obsoletas, como mostra o Visual Studio caso digitemos uma delas no código.

Por exemplo, ao digitar o grid-row-gap, aparecerá a seguinte imagem:

Portanto, note que o procedimento para definição de espaços é similar ao já visto na propriedade Flex!

Antes de seguirmos para a próxima seção, vamos colocar o espaçamento das linhas em 3rem e das colunas em 1rem para
fazermos mais um treino de modificação de gaps:

Com isso feito, podemos passar ao próximo conteúdo, com o intuito de aprimorar, ainda mais, o nosso conhecimento sobre o
Grid!
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Áreas dentro da Grade (1/14) 255
Nesta seção, iremos aprofundar o entendimento de como posicionar os elementos na estrutura grid!

Até o momento, sabemos como determinar manualmente o posicionamento dos elementos dentro do layout!

Entretanto, com o conhecimento que vimos até agora, precisamos definir separadamente o início e o fim das linhas e colunas.

Nesse sentido, é importante mencionar que existe a propriedade shorthand grid-area, que está relacionada às propriedades grid-row-
start, grid-row-end, grid-column-start e grid-column-end.

Sendo assim, para determinar a div2 com início na linha 2, término na linha 3, começo na coluna 3, e uma largura de dois espaços,
pode-se utilizar o seguinte padrão:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (2/14) 256
Lembra que quando mexíamos com as propriedades grid-row e/ou grid-column podíamos omitir alguns valores? Pois é, isso também
pode ser feito no grid-area!

Se omitirmos o último elemento, a div terá o tamanho padrão de uma divisão, conforme mostra o código e a imagem a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (3/14) 257
Caso a gente omita o terceiro e o quarto elemento, teremos apenas as especificações do grid-row-start e grid-row-end.

Por exemplo, caso façamos o teste de omitir os dois últimos elementos, teremos o seguinte código e tela:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (4/14) 258
Outra exemplo é caso queiramos que a coluna de início seja a 4. Fazendo as devidas comunicações, temos o seguinte padrão:

Percebeu a importância do shorthand dessa propriedade? Essa característica pode facilitar e simplificar o código consideravelmente!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (5/14) 259
Por último, mas não menos importante, podemos utilizar o shorthand em que apenas um número na propriedade grid-área é informado.

Sendo assim, caso utilizemos esse padrão, somente a linha de início será informada, conforme mostra o caso a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (6/14) 260
Outra característica da grid-area é que não precisamos associar o posicionamento dos elementos apenas com número! Podemos
associar as posições às letras!

Para isso, vamos utilizar o grid-template-areas! Talvez, este momento, não esteja claro o que isso quer dizer, mas logo ficará!

Primeiramente, vamos, a fim de tornar o entendimento mais intuitivo, diminuir a quantidade de divs existentes na página, trocar o
conteúdo de cada uma das divs de números para letra, modificar o número de colunas e trocar a cor da div5 para “lime”.

Para isso, faça as seguintes modificações no código:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (7/14) 261
Após essas modificações, o layout da página ficará a similar ao seguinte:

Com isso feito, podemos desenhar manualmente o nosso layout com o grid-template-areas!

E como realizamos esse layout? DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Áreas dentro da Grade (8/14) 262
Para realizar esse layout, basta especificar como queremos o nosso layout.

Por exemplo, podemos, como primeiro passo, escrever um layout da seguinte maneira:

A imagem acima ilustra o posicionamento de cada elemento com o espaço relativo ao layout (na próxima página, isso ficará mais
claro!).

Após isso, devemos associar a string indicada na imagem acima à div existente.

Com isso, escrevemos em cada uma das divs sua respectiva associação:

Com essa etapa feita, teremos associado cada uma das divs às letras especificadas no layout.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (9/14) 263
Após atualizar a página, teremos a seguinte imagem:

Consegue perceber que o layout está exatamente como queríamos? Cada letra ocupa o espaço que determinamos no grid-template-
areas!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (10/14) 264
É importante notar que o nome da div não precisa ser exatamente igual ao conteúdo e ao nome associativo entre grid-template-areas
e grid-area.

Adicionalmente, podemos especificar o layout do jeito que quisermos!

A título de exemplo, caso queiramos mudar o nome de “a” para “area” e retirarmos as letras “d” e “e” do layout, podemos modificar o
código da seguinte forma:

Para fazermos o layout do jeito que queremos, temos que, além disso, associar a definição acima ao nome area.

Sendo assim, é preciso fazer a modificação na div1, resultando no seguinte código:

Note que como retiramos as letras “d” e “e” da grade, elas não serão contidas no grid! Sendo assim, elas existem na página html, mas
não estão definidas na grade!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (11/14) 265
Após atualizar a página, será possível visualizarmos a grade do jeito que definimos (note que as duas divs não definidas estão fora da
grade e sobrepostas):

Divs que não

foram definidas
na grade

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (12/14) 266
É importante ressaltar que esse tipo de layout pode ser utilizado em diversas páginas!

Por exemplo, no blog da Hashtag ([Link] existe um layout clássico que poderíamos fazer! Entre
na página e note isso!

Antes de prosseguirmos, a fim de facilitar os próximos passos, vamos incluir todos os elementos de volta na grade, voltar ao nome antigo
de a para a div1 e atualizar a página:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (13/14) 267
Um último detalhe que você talvez tenha notado é que ao clicar na palavra grid, será possível perceber a existência de números negativos
na página:

Número negativos na página

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Áreas dentro da Grade (14/14) 268
Esses números servem para que, caso seja necessário, conseguirmos navegar de trás para frente.

Por exemplo, caso estejamos mexendo na propriedade grid-row-end, nós podemos não ter a certeza de quantas linhas temos.

Entretanto, caso queiramos um elemento na última linha, podemos especificar com o número negativo -1.

Como estaríamos contando de trás para frente nesse exemplo, os números negativos facilitariam as definições!

É essencial destacar que, quando tratamos de números, isso vale para as propriedades vistas até agora!

Por esta seção, terminamos o conteúdo planejado!

Na próxima seção, veremos como alinhar os elementos da grid!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (1/10) 269
Nesta seção, aprenderemos sobre alinhamento no grid!

Com a página que temos atualmente, note que o grid está ocupando todo o espaço disponível do nosso grid:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (2/10) 270
Como faríamos, então, para remanejar o bloco de elementos como um todo?

Em outras palavras, se quiséssemos, por exemplo, colocar esse bloco de elementos para a direita ou para a esquerda. Qual seria o
procedimento?

Primeiramente, é interessante perceber que, de acordo com as definições feitas no código, colocamos que teremos três colunas e cada uma
delas ocupará 1fr.

Nesse sentido, a página divide o espaço total disponível em três, gerando o resultado que temos até o momento.

Sendo assim, realmente, não faz sentido pensar em alinhamento vertical e/ou horizontal, uma vez que não há espaço sobrando.

Entretanto, caso nós coloquemos espaços ao redor do nosso grid, poderemos pensar em alinhar verticalmente e/ou horizontalmente.

Por exemplo, vamos colocar que cada coluna terá o tamanho de 10rem (100 pixels):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (3/10) 271
Com isso feito, teremos espaço ao lado para mexer no bloco, como mostra a imagem a seguir:

Espaço livre para

movimentação dos
elementos

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (4/10) 272
De forma alternativa e/ou complementar, podemos também reduzir a altura do nosso bloco, o que gerará espaço livre de movimentação
abaixo do bloco.

Para fazer isso, vamos, primeiramente, reduzir o tamanho de cada linha para 10rem, a fim de melhorar nossa visualização:

Após isso, é possível reduzirmos a altura (height) do nossa grid para 60rem, gerando espaço livre vertical, como mostra a figura a seguir:

Espaço livre para

movimentação dos
elementos

Espaço livre para

movimentação dos
elementos

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (5/10) 273
Com essas modificações feitas, podemos utilizar as instruções align-content e justify-content para alinhar, respectivamente, de forma
vertical e horizontal.

Por exemplo, caso queiramos colocar o bloco de linhas e colunas para baixo, podemos utilizar o align-content:end, como mostrado a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (6/10) 274
Note que na imagem anterior o bloco, como um todo, foi deslocado para baixo.

Outro exemplo, podemos colocar o bloco no meio (align-content:center), como mostra a imagem a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (7/10) 275
É possível, também, mexermos de forma horizontal no bloco.

Para isso, utilizamos a propriedade justify-content.

Por exemplo, podemos colocar o bloco para o canto direito a partir justify-content:end, como exibido a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (8/10) 276
Assim como fizemos no alinhamento vertical, podemos colocar o bloco no centro com justify-content:center, gerando o resultado a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (9/10) 277
Outro forma de alinhamento é o justify-content:stretch.

Essa forma pega o bloco e utiliza todo o espaço disponível.

Entretanto, como definimos tamanhos fixos para o nosso grid nas colunas ( grid-template-columns: repeat(3, 10rem) ), será possível notar
que não haverá, neste caso, modificação.

Um último exemplo interessante é se não fixarmos o width e centralizarmos o bloco, ficaremos como seguinte resultado:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Alinhamento dos elementos (10/10) 278
Note que o alinhamento relacionado a “content”, estamos mexendo no bloco como um todo; nas propriedades de “items”,
mexemos nos elementos separadamente.

Na ferramenta de desenvolvedor (aperte F12), podemos explorar os distintos comandos e veremos a página se alterar! Note
algumas opções possíveis na imagem a seguir:

Com essa última observação. encerramos, por esta seção, o conteúdo planejado!

Agora, meu caro impressionador, é hora de praticar , para fixar os conteúdos! E é isso que veremos nas próximas seções!
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Propriedade place-items (1/4) 279

Para essa aula vamos criar um arquivo novo de HTML com a seguinte estrutura:

Se analisarmos nosso arquivo e quisermos aplicar um alinhamento central ao elemento <div>, a abordagem mais comum e intuitiva
seria utilizar o conceito de Flexbox em vez de Grid.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade place-items (2/4) 280

Para criar um alinhamento central utilizando o conceito de Flexbox, podemos usar as propriedades align-items e justify-content.
Essas propriedades nos permitem alinhar os itens no eixo vertical e horizontal, respectivamente. A estrutura básica ficaria assim:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade place-items (3/4) 281
A propriedade place-items é uma maneira conveniente de alinhar itens dentro de um container que utiliza o CSS Grid. Ela combina
as propriedades align-items e justify-items, permitindo que você defina o alinhamento de todos os itens da grade em uma única
linha de código.

Como Funciona:
• align-items: Alinha os itens verticalmente (no eixo do bloco) dentro de suas células de grid.
• justify-items: Alinha os itens horizontalmente (no eixo em linha) dentro de suas células de grid.
A propriedade place-items pode aceitar um ou dois valores:
• Um valor: Se você fornecer apenas um valor, ele será aplicado tanto a align-items quanto a justify-items. Por exemplo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Propriedade place-items (4/4) 282
• Dois valores: Você pode especificar um valor para align-items e outro para justify-items. Por exemplo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Auto-fit e Auto-fill para criar Grids Responsivas (1/4) 283
Nessa aula vamos utilizar a seguinte estrutura dentro de um arquivo HTML:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Auto-fit e Auto-fill para criar Grids Responsivos (2/4) 284
Para criar um layout responsivo, poderíamos usar grid-template-columns: repeat(10, 1fr).

No entanto, podemos torná-lo ainda mais responsivo utilizando o Grid. Para isso, é importante identificar os breakpoints adequados,
permitindo ajustar essa propriedade conforme necessário e definir quantas colunas desejamos em diferentes tamanhos de tela. Isso
pode ser bastante trabalhoso, mas uma solução para simplificar esse processo é utilizar auto-fit e auto-fill, que permitem que o Grid
se ajuste automaticamente ao espaço disponível, facilitando a criação de layouts flexíveis.

A propriedade auto-fill no CSS Grid permite que as colunas do grid se expandam para preencher o espaço disponível, criando o
máximo possível de colunas com base em um tamanho de coluna definido. Se houver espaço extra na linha, ele simplesmente cria
novas colunas em vez de deixá-lo vazio. Isso é útil para layouts onde você deseja maximizar a utilização do espaço.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Auto-fit e Auto-fill para criar Grids Responsivos (3/4) 285
Nesse caso, o grid tentará preencher a linha com o maior número possível de colunas de pelo menos 100 pixels de largura. Se o
espaço permitir, novas colunas serão criadas.

A propriedade auto-fit é semelhante ao auto-fill, mas com uma diferença sutil: quando o espaço disponível na linha é maior do que
o necessário, o auto-fit vai fazer com que as colunas ajustadas para preencher o espaço deixem as colunas vazias. Isso significa que,
se houver espaço extra, as colunas já existentes serão esticadas para ocupar o espaço, em vez de criar novas colunas.

Neste caso, o grid irá ajustar as colunas para preencher a linha, mas se houver espaço extra, as colunas existentes se expandirão para
ocupar esse espaço, e não haverá novas colunas criadas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Auto-fit e Auto-fill para criar Grids Responsivos (4/4) 286
As propriedades auto-fill e auto-fit do CSS Grid são ambas usadas para criar layouts responsivos, mas possuem comportamentos
distintos quando se trata de como elas lidam com o espaço disponível. Aqui estão as principais diferenças:

1. Comportamento em Espaço Vazio

• auto-fill: Cria o maior número possível de colunas com base na largura mínima especificada. Se houver espaço extra na linha, ele
adiciona mais colunas, mesmo que elas estejam vazias.
• auto-fit: Também cria o maior número possível de colunas, mas, ao contrário do auto-fill, ele ajusta as colunas existentes para
ocupar o espaço disponível. Se houver espaço extra, as colunas existentes se expandem para preencher esse espaço, não criando
colunas vazias.

2. Visualização do Layout
• auto-fill: Se o espaço é maior do que o necessário para as colunas, ele ainda mostra o número máximo de colunas, resultando em
potencial espaço em branco (vazio) na grade.
• auto-fit: Se houver espaço extra, ele fará com que as colunas que já estão lá aumentem de tamanho para ocupar esse espaço,
eliminando colunas vazias na grade.

3. Uso Prático
• auto-fill é útil quando você deseja garantir que um certo número de colunas esteja sempre presente, mesmo que isso signifique
que algumas delas estejam vazias.
• auto-fit é preferido quando você quer um layout mais fluido, onde as colunas existentes se adaptam ao espaço disponível,
evitando áreas não utilizadas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Grid vs Flexbox (1/2) 287
O CSS Grid e o Flexbox são duas poderosas ferramentas de layout que oferecem soluções diferentes para o design de páginas web.
A escolha entre eles depende do tipo de layout que você deseja criar e das necessidades específicas do seu projeto.

Uso do CSS Grid

O Grid é mais adequado quando:

• Layouts Bidimensionais: Você precisa de um layout que envolva tanto colunas quanto linhas. O Grid permite que você organize
o espaço em duas dimensões, facilitando a criação de layouts complexos.
• Estruturas de Página: Quando você deseja definir a estrutura geral de uma página, como cabeçalho, rodapé, barra lateral e
conteúdo principal, o Grid oferece uma abordagem mais intuitiva.
• Espaços Fixos e Responsivos: É ideal para layouts que precisam ser responsivos e flexíveis, pois permite que você especifique
quantas colunas ou linhas devem ser criadas e como devem se comportar em diferentes tamanhos de tela.

Uso do Flexbox

O Flexbox é mais apropriado quando:

• Layouts Unidimensionais: Você precisa organizar elementos em uma única linha ou coluna. O Flexbox é ótimo para alinhações
simples e distribuições de espaço ao longo de uma única dimensão.
• Alinhamento e Distribuição: Se o seu foco está em como os itens devem ser alinhados e espaçados dentro de um contêiner, o
Flexbox é a escolha certa. Ele permite um controle preciso sobre o alinhamento vertical e horizontal dos itens.
• Tamanhos Intrínsecos: Quando os tamanhos dos itens são dinâmicos e dependem do conteúdo interno, o Flexbox se adapta
facilmente, fazendo com que os elementos cresçam ou encolham conforme necessário.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Grid vs Flexbox (2/2) 288
Diferenças Principais

• Direção de Layout: O Grid organiza elementos em uma estrutura de linhas e colunas (bidimensional), enquanto o Flexbox
organiza elementos em uma única linha ou coluna (unidimensional).
• Referência de Alinhamento: No Grid, o layout é definido em relação ao contêiner pai e sua estrutura; já no Flexbox, a disposição
dos elementos é baseada em seus tamanhos intrínsecos e no espaço disponível.
• Complexidade: Para layouts mais complexos que envolvem tanto a vertical quanto a horizontal, o Grid é mais adequado. Para
alinhamentos e distribuições mais simples, o Flexbox é mais fácil e intuitivo.

Resumo

• CSS Grid: Use-o para layouts mais complexos que precisam de um controle preciso sobre o espaço em duas dimensões.
• Flexbox: Use-o para layouts mais simples e para alinhar itens em uma única linha ou coluna, com base em seus tamanhos
intrínsecos.

Entender quando usar cada um desses métodos de layout pode melhorar significativamente a estrutura e a responsividade do seu
design, proporcionando uma melhor experiência para os usuários.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 - Construindo um layout com Grid (1/2) 289
Pessoal, agora é hora de treinarmos todo o conteúdo que aprendemos!

O presente desafio é baseado no desafio do Módulo 7.

A ideia é criar exatamente o mesmo layout da página já feita com Flexbox, mas, agora, utilizando a ferramenta Grid.

O arquivo [Link] está na seção Download. Baixe o arquivo, faça as modificações necessárias para gerar a página com Grid e busque
solucionar o desafio sozinho!

Seguem algumas dicas que podem auxiliar no desenvolvimento:

• Não trocaremos todos os flexs existentes, apenas alguns específicos para organizar os elementos no formato de grid;

• Duas grids externas foram utilizadas no novo layout (faz parte do desafio perceber se será necessário ou não trocar outros elementos
de flex para grid);

• Uma das divs em cada grid será eliminada.

A imagem a seguir, ilustra as dicas para resolver esse desafio. Vamos com tudo, impressionador!
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Desafio 1 - Construindo um layout com Grid (2/2) 290

Códig
o
antigo

Primeira grid
utilizada

Códig
o
Segunda grid novo
utilizada

Código Código novo

antigo

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (1/18) 291
A fim de facilitar a codificação, é recomendável fazer o seguinte: colocar, na mesma pasta, o gabarito da aula passada e o arquivo em
que as alterações serão feitas.

Isso facilita para visualizarmos as diferenças entre os dois arquivos conforme mexemos no estrutura.

Para isso, faça os seguintes passos: pegue os arquivos que temos no arquivo “[Link]”; crie uma pasta (no caso, pode ser com o
nome de gabarito); copie e cole os arquivos “[Link]” e “[Link]” dentro da pasta e renomeie as cópias para “desafio-1-
[Link]” e “[Link]”.

Com isso, a lista de arquivos dentro da pasta ficará similar a seguinte imagem.

Após fazer esse procedimento, dependendo do nome dos arquivos existentes no seu computador, a página html perderá o formato.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (2/18) 292
Para voltarmos a visualização correta da página, precisamos mudar os nomes de algumas referências dentro dos arquivos.

Primeiramente, mude o caminho para o arquivo da figura nos arquivos “[Link]” e “[Link]”, uma vez que a
figura está na mesma pasta dos arquivos html e css (vejo o arquivo a seguir):

Além disso, como mexeremos no css para implementarmos a página com grid, mude a referência do arquivo “[Link]”
para “[Link]”:

A partir de agora, todas as modificações serão feitas nos arquivos “[Link]” e “[Link]”, que são os arquivos
que irão implementar o novo layout com grid.

Com isso em mente, vamos começar a mexer, de fato, no layout da página!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (3/18) 293
Como mencionado no slide de introdução ao Desafio 1, vamos, primeiramente, comentar a div relativa a classe “container-
precondições” (lembre-se de comentar o fechamento da div):

Com isso feito, você notará que teremos quatro elementos alinhados para o espaço que queremos trabalhar com layout do tipo
grade:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (4/18) 294
Adicionalmente, com relação a parte de baixo da página, comentaremos a div relativa a classe “container-listas”:

Após fazer isso, notaremos que os elementos contidos nessa div estarão alinhados, como mostra a figura a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (5/18) 295
Antes de prosseguirmos, lembre-se, também, de comentar no css as classes relativas as divs que não existem mais:

Tendo resolvido esses detalhes, vamos, primeiramente, mexer na <div class="container-figure">, que contém os elementos que precisam
ser mexidos. Sendo assim, no css, vamos trocar o tipo de display para grid e comentar a instrução relativa ao gap, gerando os seguintes
códigos e página:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (6/18) 296
Ao observar a página, é possível notar que os elementos estão em uma coluna.

Como explicamos anteriormente, esse é o padrão (apenas uma coluna e as linhas são criadas automaticamente)

Entretanto, no layout que temos, podemos ir por dois caminhos: a página cria as colunas automaticamente e nós fixamos uma linha
(veremos mais a frente que não é somente uma linha!); ou criamos duas colunas e as linhas são feitas de forma automática.

No gabarito que disponibilizamos na plataforma, fizemos o Desafio 1 com a fixação em duas colunas e as linhas sendo criadas
automaticamente.

Para mostrar que os dois caminhos são equivalentes, resolveremos fixando uma linha e fazendo as colunas automáticas.

Sendo assim, o próximo passo é mudar o padrão da criação automaticamente (grid-auto-flow: column) e para vermos como ficaria o
layout, podemos colocar grid-template-rows:1fr :

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (7/18) 297
Após fazer essas alterações, podemos ver, na parte de cima da página, a seguinte imagem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (8/18) 298
Agora, meu caro impressionador, você notará um importante detalhe: na verdade, não temos apenas uma linha.

Na prática, são três linhas, como mostra a nossa imagem:

Neste caso, a imagem da televisão estaria ocupando as três linhas, e cada uma das linhas terá o tamanho individual de acordo com os
outros elementos contidos nela.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Desafio 1 – Gabarito (9/18) 299
Sendo assim, basta especificarmos o número de linhas e colocarmos o tamanho no automático, como mostrado a seguir:

Será possível notar que temos um layout um pouco mais similar ao que queremos chegar.

Agora, meu amigo, vem o “pulo do gato”. Ao observar a grid do jeito que está, veremos que, para termos o layout que queremos, a figura
precisa ocupar 3 espaços:

HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (10/18) 300
Sendo assim, podemos alterar a classe figure para ter o tamanho de 3 linhas.

Isso pode ser feito de várias maneiras, tal como, por exemplo:

Com essa implementação feita, você notará que o layout da grade de cima já está mais do jeito que imaginávamos:

HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (11/18) 301
Com isso feito, faltam dois detalhes: os espaços verticais e horizontais de separação e a centralização dos elementos.

Como já sabemos o espaçamento pelo código feito com o flex, basta incluir essas especificações nas definições da área:

HTML E CSS IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (12/18) 302
Por último, mas não menos importante, temos que centralizar os elementos horizontalmente.

Usualmente, quando tratamos de centralização horizontal, estamos tratando do comando justify, que pode ser relacionado a “content" ou
“items”.

Como queremos centralizar cada elemento da grade, vamos utilizar o justify-items.

Esse fato vai fazer com que a nossa parte superior do layout fique exatamente igual a nossa página feita com flex, como mostra o código e a
tela a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (13/18) 303
Para ajustar a parte inferior do layout, vamos, primeiramente, ver o número de linhas e colunas.

A partir da estrutura do html, note que temos duas linhas e três colunas.

Novamente, temos duas formas de proceder: ou fazemos as linhas fixas e as colunas sendo geradas automaticamente; ou deixamos as
colunas fixas e fazemos com que as linhas sejam geradas automaticamente pela página.

Para fazermos diferente da parte de cima e explorarmos outras formas de resolver problemas, vamos fixar o número de colunas e deixar as
linhas serem geradas automaticamente.

Ao olhar o código, observamos que a parte section inferior não possui classe.

Podemos utilizar uma classe específica ou, como sabemos que existem duas seções e a inferior é a segunda, utilizamos nth-child.

Para testar, podemos escrever, nesse caso:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (14/18) 304
Ao atualizar a página, será possível notar que todo o conteúdo inferior foi deslocado para direita.

Isso acontece porque a grid ocupará o espaço todo. Como queremos ocupar todo espaço necessário e ter três colunas, podemos escrever:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 - Gabarito (15/18) 305
Ao atualizar a página, chega-se ao seguinte resultado:

Note que conseguimos, então, implementar as três colunas. O que falta é mexer na palavra “Características”.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Desafio 1 – Gabarito (16/18) 306
Ao olhar o <h2>, podemos utilizar o nesting do css.

Sabemos que elemento deve começar na primeira coluna e ir até o final.

Escrevendo de forma diferente, podemos implementar isso no código, o que gerará o seguinte resultado:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (17/18) 307
Como podemos notar, estamos com os elementos ocupando todo o espaço disponível.

Para isso, podemos utilizar:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 1 – Gabarito (18/18) 308
Para finalizar o desafio com êxito, faltam apenas alguns detalhes! Estamos quase lá!

Note que falta, ainda, fazer o espaçamento correto horizontal e vertical dos elementos e o alinhamento da palavra Características.

Para isso, vamos alterar o pedaço de código da div inferior, gerando os seguintes código e imagem:

Com isso feito, terminamos o Desafio 1! Vamos aprimorar ainda mais o seu conhecimento no Desafio 2!
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 3 – Desafio 2 – Usando Grid na Seção Blog(1/1) 309
Pessoal, vamos treinar um pouco mais a utilização de grid!

De forma similar ao Desafio 1, vamos tomar como exemplo o Desafio 2 do módulo 7 e implementar a página com grid.

É recomendável tentar resolver sozinho a fim de praticar os conceitos e comandos aprendidos nesta aula!

Com esse exercício, aprofundaremos o entendimento de quando é recomendável fazer o layout com grid e quando devemos fazer com
flex.

Vamos, então, pegar a seção “Post no Blog” na página da Hashtag e implementar os elementos com grid!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 2 – Gabarito (1/7) 310
Galera, vamos, então, fazer as modificações necessárias para implementar a seção “Post no Blog” com grid!

A parte de preparação para resolver o Desafio 2 é similar ao Desafio 1.

Colocaremos os arquivos contidos em “[Link]” dentro da pasta Gabarito (pode ser outro nome), podendo mexer diretamente nesse
arquivo!

Uma pergunta que é normal ao lidar com grid é: como saber se é melhor determinar o número de colunas e linhas; deixar automático as
duas grandezas; ou fixar os dois valores?

Essa decisão depende muito da aplicação! Neste caso, como temos sempre o mesmo número de linhas e colunas, vamos fixar essas duas
grandezas.

Primeiramente, caso a versão do seu arquivo não tenha isso corrigido, vamos retirar um possível <body class=“popup-aberto”> que faz
com que um pop-up apareça toda vez que sua página é aberta:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 2 – Gabarito (2/7) 311
Adicionalmente, vamos trocar a imagem que temos no html pelo caminho fornecido na plataforma da Hashtag.

Sendo assim, podemos alterar a imagem da classe “secao secao-conteúdos” :

Tendo feito isso, agora sim vamos alterar o layout para flex!

Ao explorar a página html, vemos que a seção do blog da Hashtag é implementado com flex:

Sabendo desse detalhe, vamos, então, alterar esse container para grid!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 2 – Gabarito (3/7) 312
Para fazer isso, podemos ir no CSS e mudar o contêiner para grid, obtendo os seguintes código e imagem:

Como é possível observar, os elementos ficaram alinhados, uma vez que não especificamos o layout do nosso grid.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 2 – Gabarito (4/7) 313
Como já sabemos que queremos o layout em 2 linhas e 2 colunas, e todas as caixas são do mesmo tamanho, podemos definir o grid-
template-rows e grid-template-columns.

Com isso, teremos os seguintes código e imagem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 2 – Gabarito (5/7) 314
Note que com apenas algumas modificações o layout já se assemelha ao esperado, e podemos deletar especificações feitas anteriormente
que não são mais necessárias.

Por exemplo, a propriedade de tamanho que utilizamos no flex dentro de “caixa-postblog” não é mais relevante.

Esse fato acontece porque utilizamos o grid, e os tamanhos já são selecionados automaticamente.

Sendo assim, podemos comentá-lo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 2 – Gabarito (6/7) 315
Para chegarmos no mesmo resultado que tínhamos no flex, falta apenas inserir o gap.

Esse gap servirá tanto para linhas quanto para colunas, mantendo o layout uniforme:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Desafio 2 – Gabarito (7/7) 316
Após essa última modificação, conseguimos chegar ao resultado desejado!

Nos próximos módulos, vamos mexer com animações, responsividade de sites, e muito mais!

Avante, impressionador!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 3 – Exercícios Extras - Grid Garden(1/1) 317

O Grid Garden é uma plataforma interativa projetada para ajudar você a praticar e dominar os conceitos de CSS Grid de maneira
divertida. Neste jogo, você terá a tarefa de posicionar elementos em um "jardim" virtual, usando propriedades do Grid como grid-
column, grid-row, e justify-items para regar cenouras e evitar ervas daninhas.

Cada nível do Grid Garden traz novos desafios, permitindo que você explore o poder do layout bidimensional do CSS Grid de
forma prática. Com ele, você aprende e aplica cada conceito de maneira gradual e envolvente, enquanto reforça o entendimento
do posicionamento e alinhamento de elementos.

Acesse o Grid Garden e mergulhe na prática de CSS Grid: [Link]

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 318
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT

Módulo 4

ANIMAÇÕES E EFEITOS NO CSS

ANIMAÇÕES E EFEITOS NO CSS

ANIMAÇÕES E EFEITOS NO CSS

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Apresentação do módulo (1/1) 319

Bem-vindo ao módulo “Animações e Efeitos no CSS”!

Neste módulo, vamos aprofundar o nosso conhecimento sobre Animações!

Mais especificamente, será visto o seguinte:

✔ Como criar animações e efeitos no CSS

✔ Transições

✔ Efeitos 2D e 3D

✔ Animações e Keyframes

Vamos, então, em frente! Veremos bastante conteúdo, alguns exercícios e, ao final do módulo, temos dois Desafios para serem
resolvido!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (1/18) 320
Fala, pessoal!

Nesta seção, vamos aprender sobre transições!

Com esse conhecimento, seremos capaz de resolver algumas questões que foram apresentadas nas seções anteriores deste curso!

Por exemplo, quando vamos em [Link] e passamos o mouse em cima de um dos cursos, notamos que há
uma coloração gradual:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (2/18) 321
Essa característica é um exemplo de transição, em que a coloração não é algo repentino.

Outro exemplo, é quando passamos o mouse em cima do símbolo do Whatsapp da página.

É possível notar que o símbolo baixa de forma gradual.

Esses efeitos são muito legais, não é mesmo? Vamos aprender a fazer isso na prática!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (3/18) 322
O primeiro passo é similar aos feitos anteriormente quando começamos um novo assunto.

Vamos criar o arquivo transiçõ[Link] dentro do Visual Studio Code, apertar “!” + “tab” para completar o conteúdo e mudar o título
do html para “Transicoes”:

Tendo essa base inicial feita, precisamos, antes de criar transições, ter elementos na página para criarmos essas transições.

Sendo assim, vamos mexer no body do nosso html!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (4/18) 323
Com isso, vamos criar um parágrafo de nome “CURSO DE EXCEL” e mudar o seu estilo:

Como mexeremos bastante nos estilos dos elementos, vamos seguir a boa prática de programação e criar um arquivo chamado
[Link], linkando-o ao html:

Após isso, fazemos, no arquivo de CSS, as alterações de layout.

Inicialmente, colocamos o padrão, o tamanho da fonte do html, os estilos para o body e o parágrafo <p>.

Lembre-se, também, de adicionar o arquivo padrão de tamanhos na pasta de trabalho!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (5/18) 324
Com essas etapas feitas, temos, na pasta de trabalho, os seguintes arquivos e um .CSS similar ao da imagem a seguir:

Agora, sim, vamos implementar o que queremos!

A ideia é, ao passar o mouse sobre o elemento do site, colorirmos gradualmente o objeto!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (6/18) 325
Neste caso, vamos fazer com a mesma cor utilizada no site da Hashtag (note que qualquer cor poderia ser utilizada!).

Para analisar qual cor está sendo usada no site da Hashtag, podemos forçar o estado de “:hover”, que é o estado quando passamos o
mouse em cima do elemento.

Para isso, após acessar a ferramenta de desenvolvedor (basta apertar F12), faça os seguintes passos:

1 – Aperte na seta que fica no canto superior esquerdo para ver o elemento dentro da estrutura do html;

2 - Após isso, aperte no elemento que deseja ver;

3 – No canto inferior direito, aperte na tecla “:hov”;

4 – Por fim, clique na caixa ao lado do “hov”.

Depois desses passos, você verá que o elemento da tela ficará em laranja.

Os números na página a seguir mostram os passos a serem seguidos, e a imagem mostra como fica a tela após esses passos:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (7/18) 326
1

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (8/18) 327
Com o objetivo de implementar essa funcionalidade no CSS, podemos incluir a propriedade “:hover” das seguintes maneiras:

Note que a maneira do lado esquerdo é mais elegante e deixa o código mais organizado, uma vez que as informações sobre o
parágrafo p estão contidas no mesmo elemento.

Entretanto, perceba, ao acessar o html, que a transição do elemento é mais brusca que a da Hashtag.

Sendo assim, vamos alterar um pouco mais o código para conseguirmos o mesmo efeito!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (9/18) 328
Com o objetivo de implementar essa funcionalidade no CSS, podemos incluir a propriedade “:hover” das seguintes maneiras:

É importante fazer dois comentários com relação a essa implementação do hover.

Primeiramente, perceba que, ao acessar o html, a transição do elemento é mais brusca que a da Hashtag.

Em seguida, vamos alterar um pouco mais o código para conseguirmos o mesmo efeito!

O segundo ponto é que a maneira do lado esquerdo é mais elegante, eficiente e deixa o código mais organizado.

Entretanto, note que não há espaçamento entre os elementos “&” e “:”. Caso houvesse, estaríamos adicionando um “hover” nos
elementos abaixo do parágrafo, e não no parágrafo em si!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (10/18) 329
É importante notar que sempre colocamos a transição no elemento “cru”, ou seja, antes do parágrafo ter alguma modificação.

A propriedade de transição muito utilizada é a transition, que é uma propriedade “short-hand” com quatro propriedades: transition-
property, transition-duration, transition-timing-function e transition-delay.

Inicialmente, vamos explorar cada uma das propriedades separadamente. Após o entendimento, utilizaremos a “transition” para unir
as quatro.

A transition-property indica qual tipo de propriedade estamos modificando.

Por exemplo, queremos mudar a cor. Assim, podemos escrever transition-property:color.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (11/18) 330
Caso queiramos alterar a color e a font-weight, podemos indicar da seguinte maneira:

Na prática, geralmente definimos que transições podem ocorrendo para todas as propriedades, escrevendo transition-property:all.

Com isso definido, conseguimos, a partir das outras propriedades, ajustar melhor o que queremos fazer.

A próxima propriedade é a transition-duration, que basicamente é “duração da transição” desde o início até o seu fim.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (12/18) 331
Por exemplo, ao colocar a duração de cinco segundos, já temos um efeito similar ao que aparece no site da Hashtag.

É importante notar que como colocamos “transition-property: all”, todas as propriedades demorarão cinco segundo para chegarem
ao seu resultado final.

Por exemplo, se atualizarmos a página e não tivermos cache, o teste durará cinco horas para aparecer. Se quisermos algo mais
específico, podemos especificar somente a cor ou outra(s) propriedades.

Um valor que pode ser utilizado é 0.3 segundos, resultando no seguinte código:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (13/18) 332
Um valor que pode ser utilizado é 0.3 segundos, resultando no seguinte código:

Note que, até o momento, informamos a duração da transição, mas não informamos como seria feito essa transição.

Por exemplo, se não falarmos nada, o site faz de forma linear.

Caso queiramos que o site ande mais rápido no início ou no final, podemos utilizar o transition-timing-function.

Para melhor entendimento, pode-se entrar na documentação do mozilla para entender melhor as diversas opções disponíveis.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (14/18) 333
Para isso, basta posicionar o mouse em cima do parâmetro transition-timing-function e clicar em MDN-Reference:

Após isso, você será redirecionado para o site da documentação do parâmetro ([Link]
BR/docs/Web/CSS/transition-timing-function).

Será possível visualizar, na página em português, as possíveis opções.

Na versão en-US ([Link] existe um gráfico mostrando as

possíveis variações.

Basta ir até o final da página e clicar no easing-function ([Link]

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

.
 000
Módulo 4 – Transições 1-2 (15/18) 334
O site da documentação mostra as variações e como o valor final da propriedade é alterado:

Assim, existem diferentes formas de alterar, ou determinar exatamente a forma com a função Cubic-Bézier.

Lembre-se que o CSS é um mar de informação. É necessário entender o fundamento e, a partir desse ponto, modificamos de acordo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (16/18) 335
Do jeito que o código está, será difícil ver a diferença com uma transição de cor em apenas 0.3 segundos.

Sendo assim, vamos mexer no deslocamento para ficar mais claro.

Em outras palavras, vamos fazer a frase CURSO DE EXCEL ir de um canto ao outro:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (17/18) 336
Para isso, sabemos que a propriedade transform:translateX fará uma translação no texto, jogando-o para o lado direito.

Sendo assim, podemos colocar, por exemplo, transform:translateX(400px) e fazer o tempo de transição igual a 5 segundos,
resultando no movimento desejado:

Como não determinamos a forma de movimento, ele utilizará o padrão definido.

Podemos alterar, então, para linear, ease, ease-in, ease-out, ease-in-out ou outro movimento desejado.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 1-2 (18/18) 337
O que faltou vermos foram as opções para “steps”, que são padrões de movimentos específicos.

Isso nós veremos na segunda parte de Transições! Vamos em frente, caro impressionador!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 2-2 (1/8) 338
Fala, galera!

Vamos completar, então, o aprendizado sobre transições!

Vimos, até agora, as definições para “transition-timing-function” utilizando valores.

Para funções, vamos começar com o mais simples, que é por “steps”.

A tradução para steps seria passos. Assim, podemos dividir as nossas transições em “passos”.

Por exemplo, se colocarmos steps(5), teremos cinco passos na página, e você verá a palavra andando a distância em cinco etapas ao
passar o mouse sobre o objeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 2-2 (2/8) 339
Apesar de a função “steps” funcionar, podemos determinar como contaremos os passos.

Por exemplo, podemos definir que o movimentação de translação será iniciado com o pulo, que o pulo será feito no final do tempo;
que o movimento será inicializado e finalizado com um pulo; e que não há pulo no início e nem no final do intervalo.

No caso em que não colocamos o segundo parâmetro (steps (5, jump-end)), que é o caso padrão, é possível perceber que o
movimento de translação é finalizado com um pulo.

Se quisermos que a transição aja de forma diferente, existem outras três possibilidades:

• steps(5, jump-start)- o pulo para a próxima divisão é efeito imediatamente após o posicionamento do mouse. Em outras palavras,
há um pulo no início do movimento;

• steps(5, jump-both)- existe o pulo no início e no final do movimento. Note que, neste caso, acabamos “ganhando” um pulo
(existem 6 pulos no total);

• Steps(5, jump-none) – a translação não começa e nem termina com o pulo;

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 2-2 (3/8) 340
É importante ressaltar que existe dois comandos abreviam duas funções, que são step-end, que é equivalente a steps(1, end), e step-
start, que é similar a steps(1, start).

Será possível notar que apenas um passo será dado, sendo no final do intervalo (step-end) ou no início (step-start).

Tendo visto essas funções, vamos aprender sobre a função cubic-bezier, que é mais genérica que os outros termos vistos.

De forma geral, são escolhidos dois pontos intermediários, que são incluídos na chamada da função, para fazer a interpolação de
movimento entre os pontos inicial e final.

Ao olhar o gráfico da documentação easing-function, essa explicação fica mais clara, sendo possível visualizá-la com as respectivas
explicações:

PONTO INTERMEDIÁRIO 2
PONTO INTERMEDIÁRIO 1

PONTO
INICIAL DO
ELEMENTO PONTO
FINAL DO
ELEMENTO
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Transições 2-2 (4/8) 341
É possível perceber que com essa função conseguimos criar uma forma mais personalizada de criar movimentações.

Um fato interessante é que podemos criar situações em que o elemento passa do ponto final que desejamos, e depois volta até o o
ponto que queremos.

Esse fato pode ser visto no gráfico da esquerda a seguir.

Entretanto, note que não conseguimos fazer esse fato com todas as propriedades.

Vamos supor, por exemplo, que queremos clarear a cor laranja até chegar ao branco.

Como no caso das cores o branco é valor máximo para cada um dos valores rgb(255, 255, 255)), não é possível fazer essa
funcionalidade, gerando o comportamento exibido no gráfico da direita a seguir.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 2-2 (5/8) 342
Vamos mexer no código para vermos de forma visual o comportamento da função cubic-bezier na página.

Para isso, podemos colocar a frase “CURSO DE EXCEL” em uma div a fim de visualizarmos isso.

Sendo assim, vamos colocar o parágrafo <p> dentro da div, alterar a background-color e o width da <div> para visualizarmos melhor:

Você notará que, na página, o parágrafo passará ligeiramente do espaço da div.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 2-2 (6/8) 343
A imagem a seguir mostra o momento em que o texto está além dos limites estabelecidos pela div:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 2-2 (7/8) 344
Por exemplo, se fizermos a definição transition-timing-function: cubic-bezier(0.5, 1, 0.75, 1.25), será possível notar que o elemento
tem um comportamento similar ao do gráfico exibido anteriormente.

Uma pergunta que pode ser feita é com relação às possíveis aplicações do que vimos. Existem inúmeras!

É isso que faz aqueles efeitos interessantes nas páginas html.

Entretanto, como podemos perceber, a gente só pode colocar dois pontos.

Existe a função linear que podemos utilizar mais de dois pontos, mas ela ainda está em fase de teste.

Sempre que uma função estiver em teste, é recomendável, a princípio, não utilizá-la, pois talvez ela só funcione em um dos
navegadores.

Agora, sim, terminamos a nossa terceira propriedade, a transition-timing-function.

A função que falta nós vermos é a transition-delay, que é bem intuitiva.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Transições 2-2 (8/8) 345
De forma geral, o transition-delay aguarda um tempo inicial para começar a executar a transição.

Por exemplo, colocar transition-delay:2s significa que a página vai esperar 2 segundos antes de iniciar a transição.

Por último, mas não menos importante, para juntar as quatro propriedades vistas em uma só, utilizamos a função short-hand
transition.

Para, então, fazer funcionalidade similar com o short-hand, podemos fazer o seguinte (à esquerda, a declaração normal; à direita, a
versão short-hand):

Ao analisar a página, será possível notar que possui a mesma funcionalidade.

Agora, sim, conseguimos ver tudo de transição! Vamos em frente! DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Efeitos 2D (1/29) 346
Fala, pessoal!

Agora que já vimos uma chuva de conteúdo relativo a transições (lembre-se que a função short-hand “transition” é utilizada para
quatro parâmetros), vamos ver efeitos 2D.

Veremos cinco propriedades para efeitos 2D, tal como, por exemplo, inclinar o elemento, aumentá-lo de tamanho, e muito mais!

A preparação do local do arquivo que utilizaremos é similar a algumas aulas passadas.

Para facilitar, podemos colocar o que vimos na aula passada dentro de uma pasta, criando uma nova pasta onde colocaremos os
códigos que alteraremos ao longa da aula.

Utilizamos o padrão do texto html, mudando o título para “Efeitos 2D”, e o CSS padrão, lembrando de linkar o estilo com a referência
do arquivo.

A organização da pasta e os códigos HTML e CSS serão similares às seguintes imagens:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (2/29) 347

Lembre-se que a pasta não precisa conter, exclusivamente, somente os arquivos do projeto. Caso haja outros arquivos armazenados
nessa pasta, a imagem anterior que está a esquerda será ligeiramente diferente.

Com o objetivo de ilustrar cada uma das propriedades 2D, vamos criar uma div para cada propriedade, atribuindo títulos e classes
diferentes para cada uma delas.

No CSS, vamos especificar alguns parâmetros para a div geral e especificar para cada uma das divs parâmetros específicos de forma a
identifica-las mais facilmente DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Efeitos 2D (3/29) 348
Para facilitar a visualização, vamos criar uma margem entre as divs de 1rem.

Fazendo as devidas alterações, temos, no HTML e no CSS os seguintes códigos:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (4/29) 349
Com as alterações anteriores, vamos colocar o nome de cada uma das propriedades nas divs da página html.

Além disso, vamos centralizar as palavras dentro do bloco e alterar as cores do texto dos blocos em azul, verde e roxo para branco a
fim de melhorar a visualização.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (5/29) 350
Com isso feito, vamos ver cada uma das propriedades e como elas funcionam!

O Translate move o elemento para a esquerda, direita, cima ou para baixo. Mais especificamente, essa propriedade se desdobra em duas:
eixo X e eixo Y.

Sendo assim, podemos colocar o texto na página HTML, inserir uma margem e centralizar o texto, resultando nas seguintes imagens:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (6/29) 351
Para implementarmos, de fato, o efeito que desejamos, precisamos utilizar a propriedade transform em conjunto com o efeito que
queremos.

Sendo assim, podemos utilizar transform: translate (X, Y), em que X é o tamanho do deslocamento no eixo X (deslocamento positivo
para a direita e negativo para a esquerda) e eixo Y (deslocamento positivo para baixo e negativo para cima).

Por exemplo, caso coloquemos transform: translate (1rem, 1rem) na div1, será possível notar que o retângulo vermelho será
deslocado para a direita e para baixo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (7/29) 352
Como mencionado anteriormente, lembre-se que a propriedade translate é um short-hand para translateX e translateY.

Por exemplo, caso utilizemos translateX(10rem) e/ou translateY(10rem), teremos o deslocamento, respectivamente, horizontal e
vertical:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (8/29) 353
Perceba que, no caso do Translate, a propriedade sobrepõe os outros elementos, como um deslocamento da div.

Antes de prosseguirmos, vamos deixar de forma a mostrar que o elemento está mexido para direita e para cima.

Assim, podemos utilizar, por exemplo, transform: translate (2rem, -0.5rem):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (9/29) 354
Agora, vamos eestudar a propriedade transform:rotate.

Basicamente, com essa propriedade,o elemento será rotacionado no sentido horário, caso o ângulo seja positivo, ou no anti-horário, se for
negativo.

Por exemplo, caso utilizemos transform:rotate(90deg), será possível notar que a div2 rotacionou para a direita:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (10/29) 355
Outros exemplos clássicos para visualizar o efeito são 180 graus, 270 graus e 360 graus, sendo esse último o caso a visualização similar
quando não há rotação.

As imagens a seguir mostram esses casos e os respectivos códigos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (11/29) 356
Note que como uma volta inteira é 360 graus, a utilização de graus negativos resulta em efeito visual similar a rotação positiva.

Por exemplo, caso utilizemos transform:translate(-90deg), teremos efeito visual similar ao de 270 graus:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (12/29) 357
É importante notar que podemos utilizar números que não sejam múltiplos de 90 graus.

Por exemplo, podemos utilizar 45 graus ou, até mesmo, 10 graus. Antes de passarmos para a próxima propriedade, vamos deixar em 10
graus para visualizarmos o efeito.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (13/29) 358
A próxima propriedade a ser vista é o Scale, que permite escalar a div de acordo com o desejado.

Caso utilizemos o fator 1, será possível notar que não haverá alteração, uma vez que estamos multiplicando o tamanho do elemento por 1.

Entretanto, caso utilizemos o fator 0.5, o elemento será reduzido pela metade tanto na dimensão horizontal quanto na vertical, como
mostrado a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (14/29) 359
Então, podemos brincar com essa propriedade.

Por exemplo, caso coloquemos isso dentro do hover, determinemos o tempo de transição e como será feito essa mudança (ease-in, por
exemplo), teremos uma mudança ao passar o mouse sobre o elemento:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (15/29) 360
Note que de forma similar ao Translate, podemos modificar o tamanho somente no eixo X, no eixo Y ou nos dois.

Vamos, por exemplo, ver o efeito de aumentarmos o tamanho no eixo X ou no Eixo Y em 50 %.

Para isso, podemos colocar Scale (X ou Y) no html e utilizar transform:scaleX(1.5) ou transform:scaleY(1.5):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (16/29) 361
Note, então, que, na verdade, a propriedade scale(1.5) é um short-hand para o caso scale(1.5, 1.5).

Se quisermos mudar os valores, podemos colocar, por exemplo, scale(0.5,1.5), fazendo com que escalemos pela metade do tamanho no eixo
X e que o tamanho aumente em 50% no eixo Y:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (17/29) 362
Antes de prosseguirmos para a próxima propriedade, vamos apenas ajustar o nome Scale (X ou Y) para termos o nome (X ou Y) em uma
linha inferior ao Scale.

Sendo assim, vamos ajustar o padding para 2rem e ficaremos com o seguinte resultado:

Note que dependendo da sua página o valor do padding pode ser diferente!
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Efeitos 2D (18/29) 363
Adicionalmente, note que no Translate a omissão de um dos valores significa translação apenas no eixo X.

No caso do Scale, a inclusão de apenas um valor significa que o elemento será escalado nas duas dimensões.

Agora, sim, podemos seguir para o Skew!

O Skew é um pouco mais difícil para visualizar. Ao traduzir o termo do inglês para o português, será possível notar que a palavra significa
algo similar a inclinar.

Sendo assim, o Skew vai “deitar” o elemento com relação ao eixo que desejarmos.

Ao exibir a página, nós temos três eixos: X, Y e o Z.

Os eixos X e Y estão em um plano, enquanto o eixo Z está como se estivesse “saindo” da tela. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Efeitos 2D (19/29) 364
A imagem a seguir mostra os três eixos, em que os eixos X e Y estão em preto, e o eixo Z está destacado em vermelho:

Z X

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (20/29) 365
Nesse sentido, ao colocarmos skewX com algum ângulo de argumento, o elemento irá “deitar” em relação ao eixo X. A imagem a seguir
mostra o movimento que é gerado com essa propriedade para o eixo X.

Z X

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (21/29) 366
Para visualizarmos melhor, vamos usar quatro exemplos (0, 30, 60 e 90 graus), representados, respectivamente, da esquerda para a direita:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (22/29) 367
Como é possível perceber, no caso de 90 graus o elemento ficará totalmente horizontal.

Isso faz com que, uma vez que o elemento não tem espessura, não vejamos nada.

Adicionalmente, perceba que no caso de 180 graus teremos o caso similar ao de 0 graus.

Sendo assim, há uma simetria de posicionamento com/para 90 graus.

Repare que em ângulos entre 90 e 180 graus o bloco não é invertido.

Esse fato acontece porque estamos girando em cima do eixo X!

Como falado no início desta seção, o Skew não é tão intuitivo quanto as outras propriedades.

Gaste um tempo e procure entender o que acontece!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (23/29) 368
No caso do eixo Y, a ideia é similar ao eixo X. Entretanto, haverá uma rotação visual em outro sentido, como mostra a figura a seguir:

Z X

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (24/29) 369
Para visualizarmos melhor, vamos usar, de forma similar ao skewX, quatro exemplos (0, 30, 60 e 90 graus), representados, respectivamente,
da esquerda para a direita:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (25/29) 370
Como é possível perceber, no caso de 90 graus o elemento ficará totalmente vertical.

Isso faz com que, uma vez que o elemento não tem espessura, não vejamos nada. É o caso análogo do skewX!

Adicionalmente, todas as propriedades, tais como ter o caso de 180 graus similar ao de 0 graus, a simetria de posicionamento com/para 90
graus e a não inversão do bloco entre 90 e 180 graus o bloco, acontecem.

Esse fato acontece porque estamos girando em cima do eixo Y!

Essa propriedade, apesar de ser um pouco mais complicada, possui diversas aplicações!

Outro ponto importante é que podemos deitar o bloco nos dois eixos simultaneamente!

Por exemplo, caso queiramos inclinar o bloco 30 graus no eixo X e 45 graus no eixo Y, basta utilizar skew(30deg, 45deg).

Antes de seguir para a Matrix, vamos deixar em 10 graus: skew(10deg, 10deg).

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (26/29) 371
A propriedade Matrix nada mais é que uma short-hand para a Translate, Scale e Skew.

Entretanto, não é uma short-hand muito simples.

Primeiramente, a ordem de implementação é um pouco mais complexa, sendo dada por:

em que ScaleX, SkewY, SkewX, ScaleY, TranslateX e TranslateY são os respectivos valores desejados.

Além disso, enquanto no SkewY e SkewY “puros” a gente podia utilizar graus, nesse caso nós precisamos informar a tangente do ângulo.

Essa conta é um pouco desnecessária, que pode ser feita manualmente ou pelo CSS em si.

Por exemplo, vamos utilizar a propriedade separadamente da div4 skew(10deg, 15deg):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (27/29) 372
Caso queiramos ver qual é a tangente do ângulo, basta abrir a ferramenta do desenvolvedor, clicar no Skew da div4, depois em Computed e
ver em Transform (ver imagem a seguir):

O CSS já fará a equivalência no transform, sendo o segundo e terceiro valor as tangentes dos ângulos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (28/29) 373
Outro detalhe é que a Matrix utiliza o valor em pixel puro ao informar o TranslateX e Translate Y.

Sendo assim, caso queiramos escalar no eixo X de 0.8 e 1.2 no eixo Y; transladar 100 pixels no eixo horizontal e 200 no vertical; e continuar
com os ângulos mostrados anteriormente, teremos os seguintes código e resultado:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 2D (29/29) 374
Após ver a propriedade Matrix, finalizamos o conteúdo planejado para esta aula!

Na próxima seção, veremos efeitos 3D!

Vamos com tudo, impressionador!!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (1/20) 375
Fala, galera!

Vamos ver, agora, os efeitos 3D!

Nós vimos que existem diversos efeitos 2D e várias propriedades interessantes!

Para o caso de 3D, algumas dessas características serão mantidas, outras serão alteradas e algumas não terão muita aplicação prática.
Vamos estudar isso em mais detalhes?

Quando falamos em visualização 3D, usualmente vem a imagem de um cubo na nossa cabeça.

É exatamente isso que vamos fazer! Iremos construir um cubo e explorar as suas três dimensões (comprimento, altura e profundidade):

altur
a

profundidad compriment DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

o
 000
Módulo 4 – Efeitos 3D (2/20) 376
Para prepararmos o ambiente que vamos desenvolver o cubo, podemos fazer os seguintes passos:

1. Pegar o gabarito disponível na página da Hashtag;

2. Copiar e colar os códigos html e CSS;
3. Alterar os nomes com o indicativo “aula” no final ;
4. Eliminar as partes específicas de implementação 3D;
5. Referenciar o CSS “[Link]” no HTML.

Com essas etapas feitas, chegaremos nos seguintes códigos e arquivos :

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (3/20) 377
Inicialmente, podemos notar que temos 1 div da classe “bloco” e 3 divisões dentro dessa classe.

Ao apertar “Go Live” no nosso Visual Studio Code, poderemos visualizar a seguinte página:

Assim, para começarmos o desenvolvimento do cubo, vamos editar um pouco o formato com que os elementos do HTML são exibidos.

Editaremos, então, a nossa classe “bloco” no nosso CSS, colocando as propriedades display: flex, align-items: center, justify-content:
center, width: 10rem e height: 10rem.

Adicionalmente, a partir da nossa classe “bloco”, acessaremos as nossas “divs filhas” utilizando a função nth-child, e colocaremos as
cores lightblue, lightgreen e lightcoral para, respectivamente, as divs 1, 2 e 3.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (4/20) 378
Após as modificações mencionadas anteriormente, teremos o código CSS e a respectiva página html similares a:

Entretanto, note que os três blocos estão empilhados, e não é isso que queremos para construir o nosso bloco!

Vamos, então, fazer algumas alterações para conseguirmos construir o nosso cubo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (5/20) 379
Primeiramente, vamos colocar uma margem relativa ao bloco:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (6/20) 380
Podemos, além disso, centralizar esse cubo, colocando o nosso body centralizado horizontalmente e verticalmente:

Note que poderíamos juntas os dois elementos body sem problema algum. Deixamos dessa forma porque são características
particulares, e não gerais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (7/20) 381
Outra modificação apenas a título de código que pode ser feita é colocar o .bloco dentro do body lembrando de colocar o & na frente da
definição:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (8/20) 382
Se pensarmos bem como é a elaboração de um cubo, note que não podemos manter as divs empilhadas.

Isso acontece porque, na verdade, precisamos colocar os três quadrados na mesma posição específica, e, a partir disso, faremos
movimentos para termos o efeito de visualização 3D.

Sendo assim, um dos caminhos é atribuir um posicionamento absoluto para as nossas divs.

Com isso, precisamos fazer o posicionamento relativo dessas divs em relação a classe bloco e o absoluto dentro de cada div:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (9/20) 383
Entretanto, o bloco, em si, não tem tamanho definido.

Vamos, então, retirar a margem, uma vez que já centralizamos o elemento pelo flex, e, para termos as divs centralizadas em relação ao
bloco, vamos atribuir valores às altura e largura de 10rem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (10/20) 384
Note que como só precisamos de 3 lados para gerar o efeito de um cubo, não precisamos criar mais quadrados para compor o nosso cubo.

Sendo assim, vamos definir quais partes serão a da frente, da esquerda e do topo.

Para ser mais fácil, podemos criar uma classe para cada lado do quadrado e alterarmos no CSS, resultando nos seguintes códigos:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (11/20) 385
Agora sim podemos começar a montar, de fato, o nosso cubo!

Para isso, vamos utilizar as propriedades de transformação para alterarmos a visualização.

Note que teremos que rotacionar alguns dos elementos para termos essa ideia de profundidade.

A div “Frente” não precisará ser mexida significativamente, já que é a que tem inclinação nula.

Então, vamos começar pela div “Esquerda”.

Para visualizarmos melhor, vamos tirar a visualização das divs Frente e Topo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (12/20) 386
Até agora, havíamos visto o rotate, que rotacionava em termos de ângulo:

Entretanto, o que precisamos é que haja rotação em torno do eixo y.

Assim, podemos utilizar o rotatey, que faz com que o bloco faça o seguinte movimento:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (13/20) 387
Note que, para o cubo, precisamos que o bloco fique perpendicular ao eixo da tela.

Assim, como queremos que a letra “E” de “Esquerda” fique mais perto da tela, utilizamos um grau negativo (a angulação positiva faria o
elemento girar para o outro lado).

Assim, após implementar rotatey(-90), a div sumirá da tela, mas continuará existindo:

Com isso feito, depois que implementarmos as outras faces do cubo, poderemos inclinar um pouco e teremos o efeito desejado.

Como a “Frente” ficará do jeito que está, vamos mexer no “Topo”!

De forma similar ao procedimento anterior, vamos eliminar a exibição das outras duas divs para não confundir.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (14/20) 388
Perceba que a div “Esquerda” já sumiu, então basta utilizar o “display: none” para a frente

O raciocínio para a div “Topo” é similar à “Esqueda”, mas com rotação em relação ao eixo X.

Novamente, precisamos que a div fique perpendicular ao plano da página, conforme mostrado a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (15/20) 389
Com esse último passo feito, estamos com o nosso cubo quase pronto (note que a “Frente” fica da forma que já está)!

Sendo assim, temos o seguinte resultado:

Agora, o que precisamos fazer é inclinar o nosso bloco como um todo, fazendo com que os planos que estão perpendiculares à página
fiquem visíveis na tela.

Entretanto, antes de iniciarmos, é necessário informar ao código html que queremos visualizar o efeito 3d.

Para isso, utilizamos a propriedade transform-style: preserve-3d:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (16/20) 390
Agora, podemos inclinar o bloco como um todo nos eixos x e y, sendo possível visualizar melhor cada uma das divs.

Note que, para fins de testes, poderíamos fazer as alterações diretamente no Chrome, chegar em valores apropriados para melhor
visualização e, por fim, fazer a alteração no código principal.

A imagem a seguir exibe o exemplo em que colocamos a rotação

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (17/20) 391

Ao darmos um zoom somente no bloco, notamos que o que está faltando é fazer a translação nos eixos a fim de formarmos o cubo, como
pode ser visto na figura a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (18/20) 392
Note que ao rotacionar as figuras, também mexemos na direção e sentido dos eixos.

Sendo assim, utilizamos a função translatez para ajustar os planos de forma a serem um cubo.

Com isso, ajustaremos a translação em 5rem, resultando nas imagens e códigos finais a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (19/20) 393
Note que algumas das propriedades 3D são similares às 2D, com, obviamente, algumas adaptações.

Entretanto, uma nova propriedade que só faz sentido com o 3D é a perspective(), que pode diminuir a distância entre o usuário e o eixo Z.

Mudando essa característica no “bloco”, isso fica muito mais claro.

Por exemplo, utilizando para testar diretamente na ferramenta do desenvolvedor, podemos usar com 21rem:

SEM COM
PERSPECTIVE PERSPECTIVE

Perceba que podemos utilizar essa e outras propriedade em conjunto com o hover, fazendo com que o objeto se mova ao passar o mouse
sobre o objeto!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Efeitos 3D (20/20) 394
Adicionalmente, é importante fazer algumas observações:

• A propriedade que só existe no 2D é a skew(), com as devidas as especificações skewX e skewY.

• O rotate() utilizado na aula passado faz um movimento angular com o objeto (horário ou anti-horário), enquanto os rotateX, rotateY e
rotateZ fazem movimentos nos ângulos;

• O rotate3D() é um short-hand para rotateX, rotateY e rotateZ. Entretanto, assim como matrix3D(), as especificações são bem menos
intuitivas;

É relevante mencionar que com transições conseguimos fazer movimento entre um ponto inicial e um final de movimento!

Com animações, conseguimos determinar o comportamento do objeto em todos os pontos do movimento.

E é exatamente isso que veremos na próxima seção! Vamos em frente!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Keyframes (1/5) 395
Fala, galera!

Começaremos com o estudo de Keyframes!

Para começarmos, utilize os códigos html e css da aula passada, renomeando-os e ajustando referências:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Keyframes (2/5) 396
Com isso feito, vamos continuar!

Vamos fazer esse cubo se movimentar na página por, por exemplo, cinco pontos:

2 4

1 3 5

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Keyframes (3/5) 397
O nome desses pontos são chamados de keyframes, que, pela tradução, são os “pontos-chaves” do movimento do cubo!

Entretanto, antes de configurarmos esses elementos, o primeiro passo é posicionar o cubo no ponto inicial que desejamos!

Para isso, vamos retirar do body o justify-content, tiramos qualquer transição e/ou hover que estava configurado, e colocamos um
pading para termos uma margem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Keyframes (4/5) 398

Após isso, vamos determinar o nome da animação, a porcentagem do tempo da animação e as localizações de cada um dos pontos 1 a 5.

Sendo assim, após testarmos esse posicionamento na ferramenta do desenvolvedor, podemos utilizar os keyframes da seguinte forma:

Nesse sentido, de acordo com cada percentual de animação determinada anteriormente, o bloco fará a transição definida.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Keyframes (5/5) 399

Note que, então, o processo de animação em duas etapas: primeiramente, definimos os keyframes; após isso, implementamos, em si, a
animação!

Com isso, chamaremos o “keyframes animação-cubo” para especificarmos como será a movimentação da animação.

Entretanto, isso é assunto para a próxima aula!

Vamos “animar”, galera!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (1/11) 400
Fala, impressionador!

Nas aulas passadas, vimos que algumas animações podem ser feitas com a propriedade translate, mas não temos tanta “liberdade” em
termos visuais.

Sendo assim, na aula passada, introduzimos o conceito de Keyframes!

Nesta aula, veremos a animação em si! Notaremos que existem inúmeras possibilidades de animações que podem ser feitas!

Primeiramente, é importante mencionar que podemos utilizar a propriedade animation para criar a animação.

A Animation é um short-hand para 9 possíveis propriedades, sendo 8 funcionais e 1 em teste, que é chamada de animation-timeline.

Para propriedades que são grandes e possuem peculiariaddes, é recomendável ir na documentação do Mozilla referente à
documentação.

Para isso, basta digitar “animation:” e clicar em MDN Reference no Visual Studio.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (2/11) 401
Neste caso, o link em português será aberto, mas é interessante utilizar o inglês (basta trocar pt-BR por en-US), que resulta no seguinte
link: [Link]

Existem diversas possibilidades para o animation, como mostrado na imagem a seguite:

Entretanto, uso das propriedades é intuitivo, então podemos concatenar todas elas e utilizar na propriedade short-hand animation.

Para iniciarmos a nossa explicação, vamos copiar e colar o exemplo disponibilizado na página para ilustrar o uso dessa propriedade
(lembre-se de comentar para não modificar o código neste momento):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (3/11) 402
Vamos, então, ver cada propriedade individualmente para entendermos melhor as possibilidades:

• duration: informa quanto tempo dura a animação;

• easing:-function: praticamente tudo que vimos na parte de transição relativo a de “distribuição da duração”, tal como, por exemplo,
ease-in, ease-out, ease-in-out, entre outros.
• delay: quanto a animação vai demorar para começar;
• iteration-count: quantas vezes a animação será rodada, tal como, por exemplo, uma vez, duas vezes, ou, até mesmo, de forma
contínua;
• direction: indica se a animação percorrerá do keyframe 0% ao 100%, ou vice-versa, ou de forma alternada;
• fill-mode: determina como a animação será iniciada, se queremos começar no 0%,
• play-state: podemos determinar se animação é se queremos ela pausada ou rodando;
• name: é o nome que damos a animação. No nosso caso, seria, conforme especificado na aula passada quando definimos o keyframe,
“animação-cubo”.

Vamos, então, ver cada uma das propriedades citadas acima.

Para o caso do duration e delay, é intuitivo e simples: basta informar o tempo em segundos ou, caso queiramos um tempo fracionário,
utilizamos a divisão por ponto.

Por exemplo, para termos 1 segundo e meio utilizaríamos 1.5 segundos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Animation e suas propriedades (4/11) 403
Note que os termos long-hand para essas duas propriedades seriam animation-duration e animation-delay.

A próxima propriedade intuitiva é o animation-interation-count, que indica quantas vezes animação a seguir.

Os exemplos a seguir ilustram os casos em que queremos a animação rodando 1 vez, 2 vezes ou infinitas vezes:

Adicionalmente, temos o easing-function, que a propriedade completa é chamada de animation-timing-function;

Outra propriedade é o animation-name, que indica o nome da animação (neste exemplo, seria “animação-cubo”)

No caso do play-state, teríamos as opções para rodar (running) ou pausar (paused), como ilustrado nas imagens a seguir:

Para o animation-direction, poderíamos ter a ordem normal, a ordem reversa, alternar entre a ordem direta e inversa começando pela
ordem direta, ou o alternar entre a ordem direta e inversa começando pela ordem reversa:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (5/11) 404
A propriedade animation-fill-mode é um pouco mais chato de entender, então só veremos com exemplos.

Inicialmente, não incluiremos nos nossos testes, mas depois a sua utilização será ilustrada.

Vamos começar testando a nossa animação da seguinte maneira:

E será possível que o cubo se moverá na tela entre os pontos especificados, conforme ilustra a figura seguir de um determinado instante
de tempo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (6/11) 405
Repare, entretanto, que o cubo perdeu a propriedade de estar “rotacionado” na tela porque não especificamos isso no keyframes.

Sendo assim, basta incluirmos a rotação desejada que teremos o efeito que gostaríamos (isto é, fazer o cubo inclinado percorrer a tela):

Durante animação, será possível perceber que o cubo não está subindo e/ou descendo de forma igual.

Em alguns pontos, ele sobe muito na tela, enquanto em outros ele fica mais abaixo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (7/11) 406
Para ajustar isso, temos que mexer nos valores incluídos no translate.

Perceba que isso depende muito da vontade do programador e do ajuste fino realizado durante a elaboração da página.

Fazendo os devidos ajustes, podemos perceber que o movimento fica mais “harmônico” com os seguintes valores:

Feito isso, podemos fazer algumas alterações para começarmos a sentir como as propriedades alteram o movimento.

Por exemplo, podemos mudar a “distribuição do movimento” para ease-in-out, retirar o delay e fazer a animação rodar em loop:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (8/11) 407
Outro exemplo é alternar entre a ordem direta e reversa, como mostrado a seguir:

Enfim, existem inúmeras possibilidades!

Um exemplo interessante é colocar duas iterações e fazer o cubo parar quando o mouse está em cima do cubo.

Para isso, temos que mudar a propriedade iteration-count e, dentro do hover, a play-state:

Outro caso é utilizarmos a função cubic-bezier, fazendo, por exemplo, com 20% da animação ter 80 % do resultado, e 60% do tempo ter
50% do resultado:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (9/11) 408
Entretanto, perceba que o efeito não é exatamente o desejado, pois, como visto anteriormente, as vezes essa função não permite um
movimento de ida e volta.

Sendo assim, note que podemos buscar esse movimento mudando os pontos do keyframes, como mostrado a seguir:

Para se familiarizar com as variações possíveis, mude os parâmetros e veja os efeitos visuais que as mudanças causam!

Por último, mas não menos importante, vamos explorar a propriedade fill-mode.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (10/11) 409
Para essa propriedade, chamada de automation-fill-mode, temos quatro opções: backwards, both, forwards e none.

Ao colocar o mouse em cima da opção selecionada, existe uma explicação do significado.

Basicamente, tem-se as seguintes explicações:

• Forwards – as características especificadas no último keyframe são mantidas após a animação já estar completa;

• Backwards – as características do primeiro keyframe são implementadas antes da animação começar a rodar

• None – não há mudança na propriedade entre o tempo em que a animação é aplicada e o tempo em que a animação começa a rodar
ou após ela estar completa

• Both – os modos forwards and backwards são aplicados simultaneamente

Como exemplo, é sugerido mudar a palavra “forwards” do comando abaixo para backwards, none e both para ver o efeito na tela:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Animation e suas propriedades (11/11) 410
Outra forma de visualizar, é colocarmos o texto em negrito durante o primeiro ponto do keyframe.

Assim, será possível perceber as diferenças na implementação do negrito.

Para fazer isso, basta colocar o font-weight maior, como mostrado a seguir:

Com isso, será possível perceber as sutilizas de cada uma das opções (backwards, both, forwards e none).

Alterne entre as possibilidades para entendermos melhor esses conceitos!

Em seguida, teremos mais uma aula, e, após isso, os Desafios 1 e 2 para praticarmos o que foi ensinado!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – @media prefers reduced motion (1/3) 411
Fala, pessoal!

Apesar de termos visto como realizar animações, nós, como desenvolvedores, precisamos tratar os casos em que o usuário não deseja
que ocorra uma animação.

Por exemplo, existem pessoas que ficam enjoadas com o movimento ou simplesmente não gostam de animações, e, por esse motivo,
desabilitam o flag para animações.

Para simular o comportamento do navegador quando esse é o desejo do usuário, temos que ir na ferramenta do desenvolvedor (apertar
F12) e pressionar Ctrl + shift + P:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – @media prefers reduced motion (2/3) 412
Digite “prefers-reduced-motion: reduce” e selecione a opção, como mostrado na imagem a seguir:

Com isso, a página, quando o usuário desabilitar o flag, parará a animação.

Para tratarmos o caso em que o usuário que essa opção, precisamos informar o CSS, colocando o código que queremos executar
quando não há preferênci:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – @media prefers reduced motion (3/3) 413
Com isso feito, será possível notar que a animação irá parar.

Entretanto, caso retiremos a opção de movimento reduzido, a animação voltará a funcionar normalmente.

Com o objetivo de testar, basta seguir o mesmo procedimento anteriormente descrito e clicar na opção, como mostra a imagem a
seguir:

Assim, caso o usuário tenha preferência de menos mobilidade, isso será respeitado; caso não haja preferência, a página funcionará
normalmente.

Vamos em frente, pessoal! DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Desafio 1 – Criando um Elemento Animado (1/2) 414
Fala, galera!

Vamos colocar em prática tudo o que aprendemos!

Basicamente, teremos que construir uma bola com efeito de sombra que se movimenta por cinco pontos da tela:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 1 – Criando um Elemento Animado (2/2) 415
Note que todos os assuntos necessários para realização do desafio foram abordados nesta aula ou nos módulos passados.

Seguem algumas dicas que podem ajudá-los durante a implementação deste desafio:

• Primeiramente, pense em como criar uma bola: lembre-se que a bola pode ser entendida como um quadrado com a
propriedade de border-radius (o raio da borda) alterado;

• Após criar a borda, lembre-se que necessitamos criar o efeito 3D nesta bola. Será que utilizaremos os efeitos 2D e/ou 3D que
aprendemos? Não sei, fica o questionamento e a reflexão para vocês! Pode ser que sim, pode ser que não. Implemente e teste para
buscar entender a melhor forma de implementação

• Outro ponto é que temos a sombra embaixo da bola, que é uma sombra que vai mudando, mas a animação será implementada
posteriormente;

• Repare que: temos 5 pontos na animação; a animação está em loop infinit; a bola possui a mesma velocidade durante todo o
tempo; e algumas outras coisas já devem começar a ser entendidas ao observar a animação.

Busquem implementar sozinhos e, na próxima aula, veremos como implementar esse desafio!

Dito isso, mãos à obra! DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Desafio 1 – Gabarito (1/7) 416
Pessoal, espero que tenham tentado resolver o Desafio 1!

Caso não tenham conseguido e/ou tentado resolver, não tem problema! Veremos uma das possíveis soluções (note que existem inúmeras
formas de resolver!)

Primeiramente, vamos copiar e colar os arquivos HTML e CSS “DoZero” na pasta Gabarito, renomeando os arquivos com o sufixo “-aula”.

Dessa forma, alteraremos os novos arquivos, mas tendo o gabarito na mesma página para possíveis comparações.]

Após esse procedimento, chegamos a seguinte organização da pasta e a códigos similares a (lembre-se de mudar a referência do CSS):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 1 – Gabarito (2/7) 417
Para iniciarmos, vamos implementar a div que usualmente criamos (10 rem x 10 rem), mudar a cor de fundo para vermelho colocar
espaçamento do elemento em relação ao topo da página.

Repare que colocamos as novas características do CSS separadas do texto padrão para buscar maior organização do código.

Caso queiramos ainda mais clareza, podemos incluir o bloco “.bola” dentro do body, de forma a termos algo similar ao seguinte:

Como implementamos uma div com width e height do mesmo tamanho, basta colocarmos border-radius:50% para criarmos uma bola,
como mostrado a seguir:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 1 – Gabarito (3/7) 418
Com esses passos finalizados, vamos tentar incluir visualmente o efeito 3D na bola.

Caso testemos algumas propriedades utilizadas anteriormente, tal como o rotatex e rotatey, notaremos que não
conseguiremos o efeito que queremos.

Isso só foi possível na aula passada porque utilizamos um cubo, que são feitos de várias faces. Sendo assim, foi possível
ajustar as rotações das faces individualmente e gerar o efeito visual desejado.

No caso da bola deste Desafio, caso quiséssemos fazer isso de forma análoga, teríamos que criar várias faces e fazer algumas
modificações manuais bem trabalhosas. Isso necessitaria do auxílio do Javascript para criarmos diversas faces, o que não é
preciso!

Sendo assim, é possível perceber que o efeito de ter uma bola 3D nada mais é que uma sombra interna com suas devidas
características.

Por isso, vamos incluir, mexendo na ferramenta do desenvolvedor para conseguirmos fazer um ajuste fino de valores, um
box-shadow na nossa bola com seu devido deslocamento, o desfoque (Blur) e especificação de rgba.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 1 – Gabarito (4/7) 419
Sendo assim, após as devidas modificações, chegamos ao seguinte resultado:

Particularmente, acredito que o relevo está bem interessante!

Entretanto, a sobra está bem para dentro. Seria interessante a deslocarmos ligeiramente a sombra para termos o efeito desejado.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 1 – Gabarito (5/7) 420
Então, vamos deslocar ela para a esquerda e paracima, gerando uma melhor noção de profundidade, conforme exibido na imagem a seguir:

Com isso implementado, vamos mexer na sombra que fica abaixo da bola!

Para colocarmos uma segunda sombra, basta adicionar “,” e as outras especificações ao lado da última informação sobre a primeira sombra.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 1 – Gabarito (6/7) 421
Com base nas especificações que queremos, gostaríamos de uma sombra um pouco a direita do centro, com um pequeno desfoque e
menor que o tamanho da bola.

Sendo assim, fazendo o ajuste fino dos parâmetros, chegamos na seguinte imagem e especificação:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 1 – Gabarito (7/7) 422
Repare que ao olhar o gabarito percebemos que o efeito da bola subir e descer está relacionado a distância da sombra e da bola.

Nesse sentido, quando fizermos a animação, mexeremos nessa propriedade para gerarmos esse efeito visualmente!

Entretanto, antes de qualquer coisa, é necessário definir os keyframes que fazem parte da animação.

Como o objetivo de ter mais espaço para implementarmos a bola subindo e descendo, vamos ajustar o padding do body para 15rem:

Além disso, note que o efeito que gostaríamos está relacionado a translações nos eixos x e y, fazendo a bolinha se deslocar em, por exemplo,
200 % do seu tamanho horizontalmente e 100% verticalmente.

Caso quiséssemos visualizar esse efeito, basta adicionar o comando translate da seguinte forma:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Transições na Home da Hashtag (1/1) 423

Estamos quase lá! Neste segundo desafio, focaremos em um aspecto crucial

para melhorar a experiência do usuário: as transições.

Vamos adicionar transições na barra de navegação e no ícone de WhatsApp,

proporcionando uma interação mais suave e atraente. Além disso, você terá a
liberdade de criar novas transições na Home, mesmo que não estejam
presentes na versão oficial. Essa é uma excelente oportunidade para exercitar
sua criatividade e aplicar o que aprendeu até agora.

Ao finalizar este desafio, estaremos um passo mais perto de concluir nosso

projeto Home da Hashtag. Vamos lá!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Gabarito (1/10) 424

Os primeiros elementos que vamos aplicar o conceito de transições, será os elementos da navegação do cabeçalho da Home da
Hashtag, e além de adicionarmos a propriedade transition, também vamos aproveitar para utilizar o Nesting, aninhando os
elementos e classes para obter uma estrutura mais organizada e legível do nosso CSS.

O trecho transition: color ease-in 200ms; aplica uma transição suave à mudança de
cor dos links (a) no cabeçalho de uma lista.
Aqui está o que cada parte faz:

• color: Define que a transição será aplicada à propriedade color, ou seja, à cor do
. texto do link.

• ease-in: Especifica a função de temporização da transição. O ease-in faz com que a

mudança de cor comece mais lenta e acelere à medida que a transição ocorre.

• 200ms: Define a duração da transição. Nesse caso, a mudança de cor ocorrerá ao

longo de 200 milissegundos.

Assim, quando a cor do link mudar (por exemplo, ao passar o mouse sobre ele), a
transição será suave, em vez de instantânea, com uma aceleração inicial.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Gabarito (2/10) 425
Agora vamos aplicar uma transição nos nossos botões, então vamos verificar dentro do nosso arquivo o elemento com classe
botao, e vamos aplicar a seguinte estrutura de transição:

No código .botao, as propriedades transition: ease-in 100ms; e transition-

property: border; definem como as transições relacionadas à borda do
botão devem acontecer. Aqui está o que cada parte faz:

• transition: ease-in 100ms;:

• Define a transição para ocorrer em 100 milissegundos.
.
• O ease-in faz com que a transição comece lenta e acelere ao longo do
tempo, criando um efeito suave e natural.

• transition-property: border;:
• Especifica que a transição será aplicada apenas às mudanças na
propriedade border do botão. Isso significa que, quando a borda do
botão for alterada (como em um hover, foco, ou outro estado), a
transição será animada de forma suave, ao longo de 100ms.

Assim, se houver alguma mudança no estilo da borda (por exemplo, a

cor ou a espessura) quando o usuário interagir com o botão, essa
mudança será feita de forma suave e rápida.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Desafio 2 – Gabarito (3/10) 426
Na estrutura da seção Diferenciais, vamos adicionar algumas estruturas para a âncora com texto Empresa e aplicarmos alguns
estilos e transição.
Nesse código, utilizamos aninhamento (Nesting) para organizar a estrutura,
permitindo que as regras de estilo sejam aplicadas de maneira mais clara e
relacionada. Ao aninhar o seletor & a dentro de .diferenciais-h3-empresas,
estamos definindo estilos específicos para os links (<a>) dentro dessa classe, e o
&:hover aplica uma mudança quando o link for interagido (hover).

Agora, explicando a propriedade transition: color ease-in 200ms;:

• transition: color ease-in 200ms;:
• color: Define que a transição será aplicada à mudança de cor do texto.
• ease-in: Faz com que a transição inicie lenta e acelere até o final, criando uma
animação suave e agradável.
. • 200ms: Especifica a duração da transição, que ocorrerá em 200
milissegundos.

• &:hover { color: #f60; }:

• Quando o usuário passa o mouse sobre o link (hover), a cor do texto muda
para #f60 (um tom de laranja).
• Devido à transição definida anteriormente, essa mudança de cor acontece de
forma suave, levando 200ms para completar.

Portanto, a transição suaviza a mudança de cor ao interagir com o link,

tornando a experiência do usuário mais agradável e fluida.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Gabarito (4/10) 427

Agora vamos alterar algumas propriedades e classes da nossa seção Na

mídia, reorganizando o código utilizando Nesting, para organizar os
elementos dentro da classe principal, e como o nosso projeto possui uma
classe que permite nossos elementos se tornarem container flex, vamos
adicionar a classe chama flex dentro do título e links dessa seção ,
reorganizando as suas propriedades, além de adicionarmos uma transição, já
que o objetivo do desafio é praticar essa propriedade.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Gabarito (5/10) 428
Aqui estamos aplicando uma animação de transição suave para os links (<a>) dentro
da classe .namidia-links. Agora, vamos analisar cada parte:

• transition: transform ease-in 200ms;:

• transform: Define que a transição será aplicada a mudanças feitas na propriedade
transform, que controla efeitos visuais, como movimento, rotação e escala.
• ease-in: Define que a transição começa de forma lenta e acelera até o final,
criando uma animação gradual e suave.
• 200ms: Especifica que a transição durará 200 milissegundos (0,2 segundos),
dando uma sensação fluida ao efeito de transformação.

• &:hover, &:active { transform: scale(1.1); }:

• :hover: Quando o usuário passa o mouse sobre o link.
• :active: Quando o link está sendo clicado ou ativado.
• transform: scale(1.1);: Aplica um efeito de escala, ampliando o tamanho do link
em 10% (1.1 vezes o seu tamanho original) ao passar o mouse ou clicar nele.

A combinação dessas propriedades cria uma animação suave de aumento

(escala) no tamanho do link ao ser interagido, dando um feedback visual ao
usuário que está passando o mouse sobre o elemento ou clicando nele, o que
melhora a experiência de navegação.

Resumindo, o código faz com que os links dentro de .namidia-links aumentem

de tamanho suavemente em 200ms quando o usuário passa o mouse (hover)
ou interage diretamente (active), criando um efeito visual agradável e
interativo.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 4 – Desafio 2 – Gabarito (6/10) 429
Podemos aplicar uma estrutura similar para a nossa seção Blog, quando passarmos o cursor do mouse por cima da imagem, podemos
adicionar uma transição, além de utilizar o Nesting para organizar a nossa classe e propriedades:

• transition: Esta propriedade aplica uma transição animada quando há uma

mudança na propriedade especificada, no caso, a transform.

• transform: Significa que a transição será ativada sempre que houver uma
alteração na propriedade transform do elemento.

• ease-in: Define que a transição começará devagar e acelerará até o final, criando
um efeito de suavidade ao início da animação.

• 200ms: Define a duração da transição, ou seja, o tempo que levará para a

animação ser concluída, que é de 200 milissegundos (ou 0,2 segundos).

. • &:hover: Aplica o estilo quando o usuário passa o mouse sobre o elemento .caixa-
postblog.

• transform: scale(1.05);: Faz o elemento aumentar seu tamanho em 5% (1.05 vezes

o seu tamanho original) quando o mouse estiver sobre ele, criando um efeito de
"zoom".

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Gabarito (7/10) 430
Na seção Como ajudar, vamos adicionar uma transição em todas as âncoras da nossa seção.

• transition: Esta propriedade é usada para criar uma animação suave

entre dois estados de uma propriedade quando ela é alterada. No caso,
estamos aplicando essa transição para o color do link (elemento <a>).

• color: Define que a transição será aplicada especificamente na

mudança da cor do texto do link, tornando essa alteração gradual, em
vez de instantânea.

• ease-in: Indica que a transição começa devagar e acelera ao final,

dando uma sensação mais suave ao início da mudança de cor.
.
• 200ms: Refere-se à duração da transição, que ocorrerá ao longo de 200
milissegundos (0,2 segundos).

Resumo do comportamento:
Quando a cor do link (elemento <a>) mudar, essa alteração não será
abrupta. Ao invés disso, haverá uma animação suave, em que a cor se
transforma gradualmente ao longo de 200 milissegundos. O efeito
começa devagar e depois acelera, proporcionando uma transição visual
mais agradável para o usuário.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Gabarito (8/10) 431
Para a seção Minicurso, vamos melhorar o layout da seção utilizando a estrutura de grid, ao invés de flex. Então vamos modificar
algumas estruturas do CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Gabarito (9/10) 432
Agora na seção Rodapé vamos adicionar as transições das âncoras e dos ícones svg que está seção possui.

Explicação da transição do elemento svg:

• transition: ease-in 200ms;: Aplica uma transição suave para as

propriedades que mudam, levando 200ms para completar a
animação. O efeito "ease-in" faz a transição começar devagar e
acelerar no final.

• transition-property: fill, stroke;: Especifica que a transição será

aplicada às propriedades fill (cor de preenchimento do SVG) e
. stroke (cor da borda do SVG).

Isso significa que, quando houver alterações nas cores de

preenchimento ou borda do SVG, elas acontecerão de forma suave,
em 200 milissegundos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 4 – Desafio 2 – Gabarito (10/10) 433
Para finalizar vamos fazer um ajuste para o elemento de whatsapp, e para ele ter o efeito no hover precisamos modificar o elemento
rodapé que alteramos anteriormente para:

Explicação da transição:

• transition: ease-in 200ms;: Aplica uma transição suave que dura

200 milissegundos. O efeito "ease-in" faz com que a animação
comece devagar e acelere no final, proporcionando uma
sensação mais natural ao olho humano.

• transition-property: color, transform;: Define que a transição

será aplicada a duas propriedades: color (cor do link) e transform
(qualquer transformação aplicada ao link, como escalar, mover
. ou girar).

Essas transições ocorrerão sempre que houver mudanças nessas

propriedades (por exemplo, em um hover ou click), e a animação
será fluida, levando 200ms para completar a transição.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 434
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT

Módulo 5

RESPONSIVIDADE E OTIMIZAÇÕES

RESPONSIVIDADE E OTIMIZAÇÕES

RESPONSIVIDADE E OTIMIZAÇÕES
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Apresentação do Módulo (1/1) 435
Bem-vindos ao nosso próximo módulo do curso de HTML e CSS. Hoje, vamos mergulhar em um tema fundamental para qualquer
desenvolvedor web: Responsividade.

No mundo atual, onde os dispositivos vêm em diversas formas e tamanhos, é essencial que nossas páginas sejam flexíveis e se
adaptem a diferentes telas, sejam elas de desktop, tablet ou mobile. Ao longo deste módulo, vamos aprender sobre media queries,
uma poderosa ferramenta que nos permite aplicar estilos diferentes com base nas características do dispositivo, como largura da tela.
Falaremos também sobre como construir layouts eficazes que funcionem bem em qualquer formato. Vamos explorar como utilizar
imagens responsivas que se ajustam automaticamente ao tamanho da tela, garantindo uma apresentação visual consistente e
atraente.

Além disso, vamos introduzir o conceito de variáveis no CSS, que facilitam a manutenção e a organização do seu código, permitindo
que você altere rapidamente as cores, tamanhos e outros valores de estilo em um único lugar.
O carregamento de fontes também será um tópico importante, onde discutiremos como otimizar a inclusão de fontes
personalizadas para melhorar o desempenho da sua página. E, claro, não podemos esquecer das otimizações gerais que ajudam a
garantir que sua página carregue rapidamente, proporcionando uma melhor experiência ao usuário.

Por fim, abordaremos o processo de deploy, que é essencial para tornar seu site acessível ao público. Vamos ver como colocar sua
criação na web de forma eficiente e segura.

Prepare-se para uma jornada que vai aprimorar suas habilidades e prepará-lo para criar sites mais modernos, responsivos e prontos
para o futuro! Vamos começar!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Media queries (1/8) 436
Media queries

Uma media query no CSS é uma técnica que permite aplicar estilos diferentes a um documento com base nas características do
dispositivo que está sendo utilizado para visualizá-lo, como a largura, altura, orientação e resolução da tela. Essa funcionalidade é
fundamental para o desenvolvimento de layouts responsivos, que se adaptam a diferentes tamanhos de tela, garantindo uma
experiência de usuário otimizada em dispositivos variados, como desktops, tablets e smartphones.

Quando aplicamos um estilo no arquivo [Link] sem o uso de media queries, esse estilo é considerado global e será aplicado a
todos os dispositivos, independentemente do tamanho da tela ou de outras características do dispositivo. Isso significa que, se você
definir um estilo para um elemento, ele se manterá ativo em qualquer dispositivo que carregar essa folha de estilo.

Vamos criar um arquivo [Link] adicionando um elemento de título com um texto : Testando, além disso, criaremos um arquivo
[Link] e adicionaremos um estilo para entendermos sobre os conceitos descritos acima:

A estrutura que acabamos de criar utiliza o estilo global, através do [Link] para o nosso elemento <h1>.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Media queries (2/8) 437
Agora que estamos prontos para avançar em nosso aprendizado, vamos utilizar uma ferramenta
poderosa que todos os navegadores modernos oferecem: o DevTools. Você pode acessá-lo
facilmente pressionando a tecla F12 em seu teclado. Essa ferramenta é extremamente útil para
desenvolvedores, pois permite inspecionar elementos da página, depurar código e, o mais
importante para nós agora, testar como nosso site se comporta em diferentes tamanhos de tela.

Como funciona o DevTools e a ferramenta de dimensões responsivas

• Abrindo o DevTools:
• Pressione F12 ou clique com o botão direito do mouse em qualquer lugar da página e
selecione "Inspecionar". Isso abrirá o painel do DevTools, que geralmente aparece na parte
inferior ou lateral da tela.
• Acessando a Ferramenta de Dimensões Responsivas:
• No DevTools, você verá um ícone que se parece com um dispositivo (geralmente localizado na
parte superior esquerda do painel, com a descrição "Toggle device toolbar" ao passar o mouse
por cima). Clique nesse ícone ou pressione Ctrl + Shift + M (ou Cmd + Shift + M no Mac) para
ativar a visualização responsiva.

Alterando o Tamanho da Tela:

• Com a visualização responsiva ativada, você verá uma barra na parte superior do painel onde
poderá escolher diferentes dispositivos, como iPhones, iPads e desktops. Selecione um
dispositivo da lista para simular o tamanho da tela correspondente.
• Você também pode ajustar a largura e altura da tela manualmente arrastando as bordas ou
digitando valores específicos na caixa de dimensões. Isso permite que você veja como o layout
se comporta em diferentes resoluções e proporções.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Media queries (3/8) 438
Testando Estilos para Diferentes Telas

• Verificação Imediata: À medida que você altera a largura da tela, o DevTools aplica automaticamente suas media queries definidas
no CSS. Assim, você pode observar como os estilos mudam em tempo real, conforme as condições da media query são atendidas.
• Ajustes e Experimentos: Se você perceber que certos estilos não estão funcionando como desejado em uma tela menor, pode
ajustar diretamente o CSS no painel do DevTools. Clique no elemento desejado e faça alterações nos estilos, como mudar a cor, o
tamanho da fonte ou as margens, e veja imediatamente o resultado na tela.
• Depuração: Caso algo não esteja aparecendo corretamente, você pode inspecionar os elementos e verificar quais estilos estão
sendo aplicados, se estão sendo sobrescritos por outros estilos, e assim por diante.

Benefícios
Utilizar o DevTools e a ferramenta de dimensões responsivas permite que você:
• Teste rapidamente como seu design se adapta a diferentes tamanhos de tela.
• Faça ajustes instantâneos e visualize os efeitos sem precisar recarregar a página ou modificar diretamente o código fonte.
• Melhore a responsividade do seu layout, garantindo que ele funcione bem em qualquer dispositivo.

Essa prática é uma parte essencial do desenvolvimento web moderno, pois nos ajuda a criar sites que não apenas se adaptam, mas
também proporcionam uma ótima experiência para todos os usuários.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Media queries (4/8) 439
Abaixo estão algumas médias de tamanhos de tela para diferentes categorias de dispositivos, que são úteis para considerar ao
desenvolver layouts responsivos:

Considerações

• Os tamanhos de tela podem variar significativamente entre diferentes dispositivos e fabricantes.

• É importante testar seu design em uma variedade de tamanhos para garantir que ele permaneça responsivo e funcional.
• As media queries podem ser usadas para aplicar estilos específicos para cada um desses tamanhos, garantindo que seu layout seja
otimizado para todos os usuários.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Media queries (5/8) 440
Como funciona uma media query

Uma media query é escrita utilizando a regra @media, seguida de uma condição que define quais características do dispositivo serão
consideradas. Os estilos dentro da media query são aplicados apenas se as condições especificadas forem atendidas.

A sintaxe @media media-type and condition é uma parte fundamental do CSS para aplicar estilos de forma condicional, dependendo
das características do dispositivo ou da janela do navegador. Essa abordagem é essencial para a construção de layouts responsivos,
permitindo que você ajuste a aparência de sua página em diferentes tamanhos de tela e tipos de dispositivos.

Componentes da Sintaxe

• @media:
• É a regra que inicia a media query. Ela informa ao navegador que as regras CSS dentro de seu bloco só devem ser aplicadas se as
condições especificadas forem atendidas.

• media-type:
• Especifica o tipo de mídia ao qual a regra se aplica. Os tipos de mídia mais comuns são:
• all: Para todos os dispositivos (padrão).
• screen: Para dispositivos com tela, como monitores e smartphones.
• print: Para impressão.
• speech: Para dispositivos que utilizam síntese de voz.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Media queries (6/8) 441

Você pode também não especificar um media-type, caso a media query seja aplicável a todos os tipos.

• and:
• Este operador permite combinar múltiplas condições. Se você usar and, a media query será aplicada apenas se todas as condições
especificadas forem verdadeiras.

• condition:
• Refere-se às características específicas do dispositivo, como largura da tela, altura, orientação, resolução, entre outras. Aqui estão
alguns exemplos comuns:

• max-width: A largura máxima da tela.

• min-width: A largura mínima da tela.
• orientation: A orientação da tela (portrait ou landscape).

As condições são colocadas entre parênteses.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Media queries (7/8) 442
Também podemos utilizar múltiplas condições para serem
ao lado :

As múltiplas condições permitem que você combine

diferentes cenários em que os estilos devem ser aplicados,
proporcionando um controle mais refinado sobre o layout.
Vejamos como isso funciona:

Condição 1 (all and (max-width: 480px)):

• Aplica os estilos especificados quando a tela é igual ou
menor que 480 pixels de largura, alcançando
dispositivos como smartphones. Por exemplo, você pode
querer alterar a fonte, a cor de fundo ou o layout para se
ajustar a essa tela menor.

Condição 2 (screen and (min-width: 600px)):

• Aplica os estilos quando a tela é igual ou maior que 600
pixels de largura, o que geralmente se refere a tablets e
desktops. Aqui, você pode aplicar um estilo diferente,
mais adequado para uma tela maior, como um layout
em múltiplas colunas ou um tamanho de fonte maior.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Media queries (8/8) 443
A condição orientation em media queries do CSS é utilizada para aplicar estilos com base na orientação da tela do dispositivo. Ela
ajuda a diferenciar entre dois tipos de orientação: landscape (paisagem) e portrait (retrato). Vamos entender cada uma delas.
A sintaxe básica para usar a condição orientation em uma media query é a seguinte:

landscape:
• Refere-se a uma tela que está na orientação horizontal. Isso significa que a largura da tela é maior que a altura.
• Normalmente, essa orientação é comum em dispositivos como laptops e desktops, além de quando os smartphones ou tablets
são girados de lado.

portrait:
• Refere-se a uma tela que está na orientação vertical. Isso significa que a altura da tela é maior que a largura.
• É a orientação padrão para a maioria dos smartphones e tablets quando mantidos na posição vertical.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desktop x First Mobile (1/3) 444
Quando se trata de criar sites responsivos, a escolha entre desktop first e mobile first na abordagem de desenvolvimento CSS é
uma decisão importante que impacta como o layout e a funcionalidade do seu site serão implementados. Vamos explorar as
diferenças entre essas duas abordagens e discutir quando cada uma delas é mais apropriada.

O que é Desktop First?

Desktop First é uma abordagem em que você começa a desenvolver o design e o CSS para telas grandes (como desktops) e, em
seguida, aplica ajustes para telas menores (como tablets e smartphones). Aqui estão algumas características dessa abordagem:

Vantagens:
• Complexidade Inicial: Muitas vezes, os sites são projetados inicialmente para telas grandes, onde você pode incluir mais
elementos e complexidade visual.

• Recursos Visuais: Facilita o uso de gráficos e elementos que são mais adequados para telas grandes.

Desvantagens:
• Dificuldade em Simplificar: Às vezes, pode ser difícil simplificar o design à medida que você desce para tamanhos menores.

• Desperdício de Recursos: Pode resultar em uma carga maior de recursos em dispositivos móveis, que podem não ser tão
potentes quanto os desktops.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desktop x First Mobile (2/3) 445
O que é Mobile First?

Mobile First é uma abordagem em que você começa a desenvolver o design e o CSS para telas pequenas (como smartphones) e,
em seguida, expande para telas maiores (como desktops). Essa abordagem é cada vez mais popular devido ao aumento do uso de
dispositivos móveis. Veja algumas características:

Vantagens:
• Foco na Usabilidade: Ao começar pelo mobile, você é forçado a priorizar a usabilidade e a simplicidade, criando uma experiência
mais fluida para usuários de dispositivos móveis.

• Carregamento Otimizado: Os sites geralmente carregam mais rápido em dispositivos móveis, pois você pode focar em recursos
mínimos.

• Melhor Performance: Reduz o risco de sobrecarregar a versão móvel com recursos desnecessários, levando a uma experiência
mais leve e responsiva.

Desvantagens:
• Limitações de Design Inicial: Você pode sentir que a criatividade é limitada no início, já que os elementos precisam ser mais
simples.

• Adição de Complexidade: À medida que você vai para telas maiores, pode ser um desafio adicionar elementos sem tornar o
design confuso.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desktop x First Mobile (3/3) 446
Quando Usar Cada Abordagem?

• Quando Começar pelo Desktop First:

• Se o seu projeto é inicialmente focado em usuários de desktop, como aplicativos internos ou painéis de controle.
• Se você precisa de gráficos complexos e layouts elaborados que são mais adequados para telas grandes.
• Quando sua audiência primária já usa principalmente desktops.

• Quando Começar pelo Mobile First:

• Se você está criando um site voltado para o consumidor, especialmente com um público-alvo jovem que usa smartphones.
• Quando a simplicidade e a velocidade são essenciais, como em blogs ou sites de conteúdo.
• Se você deseja garantir uma ótima experiência em dispositivos móveis desde o início, já que muitos usuários acessam a web
principalmente por smartphones.

Conclusão

A escolha entre desktop first e mobile first depende do seu público-alvo e das necessidades do projeto. Ambas as abordagens têm
seus prós e contras, e entender o contexto em que seu site será usado pode ajudar a tomar a melhor decisão. Se você prioriza a
experiência móvel e uma performance otimizada, mobile first pode ser a melhor escolha. Por outro lado, se o foco é em layouts
complexos e recursos visuais, desktop first pode ser mais adequado.

Independentemente da abordagem que você escolher, a chave para um design responsivo eficaz é testar continuamente em
diferentes dispositivos e tamanhos de tela!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Escolhendo as Medias Queries (1/4) 447
No passado, o conceito de responsividade na web era bastante diferente do que conhecemos hoje. Os desenvolvedores enfrentavam
um cenário limitado, onde as opções de dispositivos eram reduzidas e, consequentemente, a necessidade de criar layouts
adaptáveis era mais simples, mas também desafiadora.

Tradicionalmente, considerávamos apenas três tamanhos de tela principais: desktop, tablet e mobile. Essa abordagem se
concentrava em apenas duas pontos de quebra (breakpoints) que permitiam aos desenvolvedores ajustar o layout de um site. O
primeiro breakpoint geralmente era definido para telas de desktop, com uma largura mínima de cerca de 1024 pixels, enquanto o
segundo breakpoint era voltado para dispositivos móveis, tipicamente em torno de 768 pixels.

Limitantes e Oportunidades

Essa estrutura rígida trazia limitações consideráveis. Os desenvolvedores eram forçados a pensar em soluções que funcionassem
para apenas um número limitado de situações. As técnicas de design responsivo na época se baseavam em media queries simples
e no uso de floats para criar layouts. O CSS era utilizado principalmente para ajustar estilos, mas sem a flexibilidade que temos hoje.
Ainda assim, essa abordagem inicial foi crucial para o desenvolvimento da web, pois estabeleceu os fundamentos da responsividade.
Aprendemos a importância de criar experiências de usuário consistentes em diferentes dispositivos, mesmo que isso significasse
enfrentar desafios e limitações. Essa era uma época em que a criatividade e a adaptação eram essenciais para atender às
necessidades de uma audiência crescente e diversificada.

Com o avanço da tecnologia e o aumento da diversidade de dispositivos e tamanhos de tela, a responsividade evoluiu
significativamente. Hoje, não apenas temos uma variedade infinita de dispositivos, mas também ferramentas e técnicas sofisticadas
que nos permitem criar experiências web fluidas e adaptáveis para qualquer situação. Mas a jornada que começamos, com apenas
três telas e dois breakpoints, foi fundamental para moldar o que conhecemos como design responsivo moderno!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Escolhendo as Medias Queries (2/4) 448
A Abordagem Atual para Responsividade na Web

Hoje, a criação de sites responsivos é uma parte essencial do desenvolvimento web. Com uma vasta gama de dispositivos, cada um
com suas próprias dimensões e resoluções, os desenvolvedores precisam adotar abordagens mais dinâmicas e flexíveis do que
nunca. Uma das principais práticas atuais é o uso de media queries em conjunto com técnicas de design flexível, como flexbox e
grid.

Verificando a Responsividade em Diferentes Dispositivos

Uma das etapas cruciais no processo de desenvolvimento responsivo é testar o layout do site em diversos dispositivos e tamanhos
de tela. Os desenvolvedores frequentemente utilizam as ferramentas de desenvolvedor dos navegadores, acessíveis através do
atalho F12, que oferecem uma funcionalidade chamada Responsive Design Mode. Essa ferramenta permite que você simule como
seu site se comporta em diferentes tamanhos de tela, desde dispositivos móveis a desktops.

Ajustando o Layout ao Diminuir a Tela

Ao diminuir a largura da tela no modo responsivo, os desenvolvedores podem observar onde o layout começa a "quebrar". Esse
processo envolve:

• Monitoramento Atento: À medida que a largura da tela é reduzida, os desenvolvedores devem observar cuidadosamente a
aparência e a usabilidade do site. Eles prestam atenção a elementos que se sobrepõem, que ficam cortados ou que não se
alinham corretamente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Escolhendo as Medias Queries (3/4) 449

• Identificação de Problemas: Às vezes, à medida que a tela encolhe, alguns componentes do site, como imagens, textos ou
botões, podem não se comportar como esperado. É fundamental identificar esses pontos de quebra e resolvê-los.

• Ajuste com Media Queries: Uma vez identificadas as quebras, os desenvolvedores usam media queries para aplicar estilos
específicos a diferentes tamanhos de tela. Por exemplo, pode-se definir um estilo para telas de 768 pixels e outro para telas de 480
pixels.

• Meta Mínima de 320 Pixels: Para garantir que o site seja 100% responsivo, é importante projetá-lo para funcionar em telas de 320
pixels de largura, que é uma das dimensões mais comuns para smartphones. Isso garante que, mesmo em dispositivos menores,
a experiência do usuário permaneça suave e acessível.

A responsividade hoje não é apenas uma opção, mas uma necessidade no desenvolvimento web. O processo de ajustar layouts e
testar em diferentes tamanhos de tela, especialmente ao monitorar como os elementos se comportam ao reduzir a largura, é
fundamental para criar experiências de usuário consistentes e agradáveis. Com as ferramentas modernas e as práticas de design
responsivo, os desenvolvedores têm à disposição uma gama de recursos que lhes permite criar sites que não apenas funcionam
bem em qualquer dispositivo, mas também se destacam em uma variedade de contextos e configurações.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Escolhendo as Medias Queries (4/4) 450
Breakpoints Comuns para Media Queries

• Desktop Grande: 1920px até 1365px

• Para telas grandes, como monitores widescreen e TVs.

• Desktop Médio: 1366px até 1179px

• Para laptops e alguns monitores de desktop.

• Desktop Pequeno / Tablet em Paisagem: 1280px até 990px

• Para tablets em modo paisagem e alguns laptops menores.

• Tablet em Retrato: 991px até 765px

• Para tablets em modo retrato e grandes smartphones.

• Smartphones em Paisagem: 766px até 479px

• Para smartphones em modo paisagem.

• Smartphones em Retrato: 480px até 360px

• Para smartphones em modo retrato, incluindo modelos mais antigos.

Importância dos Breakpoints

Utilizar esses breakpoints permite que os desenvolvedores implementem estilos específicos para diferentes tamanhos de tela,
garantindo que o layout, a tipografia e os elementos interativos do site sejam otimizados para a melhor experiência de usuário
possível.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Imagens responsivas – Tag img (½) (1/6) 451
Quando falamos em imagens responsivas no desenvolvimento web, estamos lidando com a necessidade de ajustar as imagens
para que se adaptem corretamente a diferentes tamanhos de tela, como desktops, tablets e celulares. Utilizamos a tag <img> para
incorporar imagens em nossas páginas, e é fundamental garantir que elas sejam exibidas de maneira proporcional e eficiente em
todos os dispositivos.

Além de ajustar o layout, otimizar o tamanho dos arquivos de imagem também é uma preocupação central. Cada imagem que
você carrega em sua página possui um tamanho em kilobytes (KB) ou megabytes (MB), o que afeta diretamente o tempo de
carregamento e a performance do site. Imagens grandes podem tornar o site mais lento, principalmente em conexões móveis, o
que impacta negativamente a experiência do usuário.

Nessa aula vamos utilizar a imagem de fundo da HOME da Hashtag. E podemos verificar as caracerísticas dela ao passar o
mouse por cima de sua url com o inspecionar.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag img (½) (2/6) 452
O site Derivv permite redimensionar uma imagem para vários Você carrega a imagem que você quer criar em outras
tamanhos diferentes de forma rápida. Basta fazer o upload da dimensões, escolhe as dimensões novas e depois é só fazer o
imagem, definir os tamanhos desejados e gerar as novas donwload da imagem.
versões das imagens. Após a criação, é possível baixar todas
as imagens como um arquivo compactado (zip). Isso é útil
para otimizar o uso de imagens em diferentes dispositivos e
breakpoints, garantindo que o site seja responsivo sem
sobrecarregar com imagens de alta resolução em telas
menores (Derivv).

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag img (½) (3/6) 453
Para essa aula vamos gerar todas as imagens referentes aos Vamos aprender uma nova propriedade da tag img. A
breakpoints que mencionamos nas aulas passadas, e você propriedade srcset da tag <img> no HTML permite especificar
pode gerar todas dentro de um único arquivo zipado e depois diferentes arquivos de imagem para diferentes resoluções ou
descompactar e adicionar no seu projeto. condições de tela. Isso ajuda a carregar imagens mais
adequadas ao dispositivo do usuário, melhorando a
performance e a qualidade visual.

A sintaxe da propriedade srcset na tag <img> segue este

formato básico:

• srcset: uma lista de imagens com suas larguras associadas

(por exemplo, [Link] 300w significa que a imagem
[Link] será usada para telas com largura de 300px
ou menos).

O navegador escolhe a melhor imagem com base na largura

da tela ou na densidade de pixels.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag img (½) (4/6) 454
Então dentro de um arquivo [Link], vamos adicionar uma A propriedade sizes no HTML, usada junto com srcset, permite
tag <img> e utilizar essa propriedade, adicionando todas as definir a largura esperada da imagem em diferentes condições
imagens que criamos no site derivv e suas larguras associadas. de tela. O navegador escolhe a imagem mais adequada com
base na lista de tamanhos especificada.

Cada condição usa um valor de largura:

• 3835w: Carrega [Link] em telas até 3835px de Para telas de até 480px de largura, a imagem terá 480px de
largura. largura.
• 1920w: Usa [Link] para telas de até 1920px. Para telas de até 767px, a imagem será 767px de largura.
• E assim por diante, até 480w, para telas menores, carregando E assim por diante, até 3835px, para telas maiores que 1920px.
[Link]. O navegador usa esses valores para escolher a melhor imagem
Isso otimiza o carregamento, garantindo que a imagem disponível no srcset e adaptá-la ao espaço disponível.
adequada seja exibida conforme o dispositivo.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Imagens responsivas – Tag img (½) (5/6) 455
Você também pode utilizar os valores de vw dentro da Como todas as imagens utilizam o mesmo valor quando
propriedade size. falamos na medida vw, podemos utilizar a propriedade sizes da
seguinte maneira:

Quando o atributo sizes usa 100vw, isso significa que a imagem

está sendo ajustada para ocupar 100% da largura da viewport
(ou seja, da janela do navegador) em todos os tamanhos de tela.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens Responsivas – Tag img (½) (6/6) 456
Boas Práticas para Imagens Responsivas e Otimizadas:

• Uso de Várias Resoluções: Para garantir que suas imagens sejam adequadas a diferentes dispositivos, você pode usar a técnica
de fornecer diferentes versões da mesma imagem para diferentes breakpoints. Isso evita carregar uma imagem de alta
resolução em dispositivos com telas menores, economizando largura de banda e tempo de carregamento.

• Atributos HTML como srcset e sizes: Esses atributos na tag <img> ajudam a carregar automaticamente a melhor versão da
imagem, com base no tamanho da tela do usuário. Assim, você pode garantir que uma imagem menor seja carregada em um
celular, enquanto uma imagem de maior resolução é exibida em um desktop.

• Otimização de Arquivos: Use formatos de imagem mais leves e modernos, como WebP, ou ferramentas de compressão para
reduzir o tamanho dos arquivos sem sacrificar a qualidade visual.

• Considerar o Contexto: Em breakpoints menores, você pode exibir imagens com menos detalhes, ajustando a qualidade e o
tamanho conforme necessário. Isso evita desperdício de dados e melhora a navegação em dispositivos móveis.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – O que é DPR? (1/4) 457
O Que é DPR (Device Pixel Ratio)?

O Device Pixel Ratio (DPR) é uma medida que expressa a relação entre os pixels físicos da tela de um dispositivo e os pixels lógicos
que você utiliza no desenvolvimento web (como os definidos em CSS). Em outras palavras, o DPR indica quantos pixels físicos
correspondem a um único pixel lógico na tela.

Como Funciona o DPR

• Pixels Lógicos: São os pixels que você define em seu código, como as dimensões de um elemento em CSS. Por exemplo, se você
define a largura de um elemento como 100 pixels, isso se refere a 100 pixels lógicos.
• Pixels Físicos: São os pixels reais na tela do dispositivo. Por exemplo, um dispositivo com alta densidade de pixels terá mais pixels
físicos em um espaço menor.

Exemplo Prático
• DPR de 1: Um pixel lógico é igual a um pixel físico. Isso é comum em telas padrão, como a maioria dos monitores de desktop.
• Visualização: Se você define uma imagem de 100x100 pixels em CSS, ela ocupa 100x100 pixels físicos na tela.

• DPR de 2: Um pixel lógico é igual a 2 pixels físicos na largura e 2 pixels físicos na altura.
• Visualização: Em um dispositivo com DPR de 2, uma imagem definida como 100x100 pixels em CSS ocupará 200x200 pixels
físicos na tela, resultando em uma imagem mais nítida e detalhada.

• DPR de 3: Um pixel lógico é igual a 3 pixels físicos na largura e 3 pixels físicos na altura.
• Visualização: Uma imagem de 100x100 pixels em CSS será exibida como 300x300 pixels físicos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – O que é DPR? (2/4) 458
Por Que é Importante o DPR?

• Qualidade da Imagem: Com o aumento do uso de dispositivos de alta resolução, como smartphones e tablets, o DPR se tornou
um aspecto crucial para garantir que as imagens e os elementos gráficos sejam exibidos de forma nítida e clara.

• Design Responsivo: Compreender o DPR ajuda os desenvolvedores a criar layouts responsivos que se adaptam a diferentes
dispositivos e resoluções, proporcionando uma experiência de usuário otimizada.

• Desenvolvimento de Aplicativos: Para desenvolvedores de aplicativos, o DPR é essencial para garantir que os elementos da
interface do usuário sejam dimensionados corretamente em diferentes dispositivos.

Ter três telas com o mesmo tamanho físico, mas com diferentes resoluções e valores de Device Pixel Ratio (DPR), é um conceito
importante para entender como a qualidade visual e a experiência do usuário podem variar em dispositivos que parecem idênticos à
primeira vista. Vamos explorar como isso funciona.

Telas com o Mesmo Tamanho Físico

Vamos considerar que todas as três telas têm, por exemplo, 6 polegadas de tamanho na diagonal. No entanto, as diferenças entre
elas residem na resolução e no DPR:

Tela de Baixa Resolução:

• Resolução: 800 x 600 pixels
• DPR: 1.0
• Descrição: Embora tenha o mesmo tamanho físico, a quantidade total de pixels é menor, resultando em uma imagem menos
nítida e com menor definição. Elementos na tela podem parecer mais "pixelados".
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – O que é DPR? (3/4) 459
Tela de Alta Resolução (DPR 1.0):
• Resolução: 1920 x 1080 pixels (Full HD)
• DPR: 1.0
• Descrição: Esta tela apresenta uma qualidade de imagem muito melhor que a tela de baixa resolução, com imagens e texto mais
nítidos e detalhados. O tamanho físico é o mesmo, mas a maior densidade de pixels melhora a clareza visual.

Tela de Alta Resolução (DPR 2.0):

• Resolução: 1920 x 1080 pixels
• DPR: 2.0
• Descrição: Com um DPR de 2.0, cada pixel lógico é exibido em 2 pixels físicos. Portanto, a tela possui 2x a quantidade de pixels
físicos. Isso significa que, para o mesmo conteúdo em pixels lógicos (como 100x100 pixels), a tela exibirá 200x200 pixels físicos,
resultando em uma qualidade de imagem ainda mais nítida e suave, ideal para gráficos e textos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – O que é DPR? (4/4) 460
Implicações Práticas

• Qualidade da Imagem:
• Uma tela com alta resolução e um DPR maior proporciona uma qualidade de imagem superior. Isso é especialmente importante
para aplicações gráficas, design de interface e visualização de imagens, onde os detalhes são cruciais.

• Experiência do Usuário:
• A experiência do usuário pode ser afetada por como o conteúdo é exibido. Em uma tela de baixa resolução, textos e imagens
podem parecer desfocados ou pixelizados, o que pode dificultar a leitura e a interação. Em contraste, telas de alta resolução
melhoram a clareza, tornando a navegação mais agradável.

• Desenvolvimento Responsivo:
• Para desenvolvedores, entender as diferenças de DPR é essencial para criar layouts responsivos que se adaptem a diferentes
dispositivos. É fundamental utilizar imagens de alta qualidade e considerar o DPR ao definir tamanhos em CSS, para garantir que
o conteúdo seja exibido corretamente em todas as telas.

Conclusão
Ter três telas com o mesmo tamanho físico, mas com diferentes resoluções e DPRs, ilustra como a qualidade visual pode variar
enormemente. Isso é relevante para designers, desenvolvedores e usuários, pois determina como o conteúdo é percebido e
como ele deve ser projetado para cada tipo de dispositivo. Com o crescente uso de dispositivos móveis e telas de alta resolução,
considerar o DPR é uma parte fundamental do desenvolvimento web moderno.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag img (2/2) (1/4) 461
Agora que entendemos o conceito sobre DPR, vamos utilizar a imagem do banner da Home da Hashtag, junto com o
código criado na aula retrasada para aplicar esse conceito.

Quando você passa o mouse sobre o atributo src da tag <img>, o que está sendo destacado é o URL da imagem que será carregada.
Esse atributo é obrigatório no elemento <img>. Nos navegadores que suportam srcset, o src é tratado como uma imagem candidata
com uma densidade de pixels padrão de 1x (ou seja, a imagem será usada para dispositivos com densidade de pixels normal) a
menos que o srcset defina uma imagem específica com essa densidade ou contenha descritores de largura (w).

Em resumo:
• src é o fallback para a imagem se o srcset não for suportado.
• Nos navegadores que suportam srcset, o src será usado para dispositivos com densidade de 1x, a menos que uma opção mais
adequada seja definida no srcset.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag img (2/2) (2/4) 462
No exemplo fornecido, a propriedade srcset está sendo usada para oferecer uma imagem alternativa de alta resolução:

Aqui está o que acontece:

• O atributo src define a imagem padrão que será carregada (neste caso, [Link]).
• O atributo srcset="Imagens/[Link] 2x" define uma versão de maior resolução (duas vezes a densidade de pixels). Se o
dispositivo tiver uma densidade de pixels 2x, o navegador irá carregar essa imagem ([Link]) para manter a qualidade
visual.

Isso é útil para garantir que imagens sejam exibidas com alta qualidade em dispositivos com telas de alta densidade, como
smartphones modernos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag img (2/2) (3/4) 463
A aba Network do DevTools permite monitorar todas as solicitações de recursos feitas pela sua página, incluindo imagens. Ao
carregar a página, você pode ver todas as imagens que estão sendo baixadas, seu status de carregamento, e detalhes como o
tamanho e o tempo de carregamento.

Para verificar o tamanho de uma imagem:

• Abra o DevTools (pressione F12).

• Navegue até a aba Network.
• Filtre por Img para ver apenas as imagens.
• Clique na imagem desejada para visualizar detalhes, incluindo o tamanho em bytes.
Isso ajuda a otimizar o desempenho da página ao identificar imagens grandes que podem ser reduzidas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag img (2/2) (4/4) 464

As estruturas de tamanho de tela, como o srcset e sizes, devem ser definidas no HTML e não no CSS por várias razões:

• Carregamento Otimizado: O HTML permite que o navegador decida qual imagem carregar antes mesmo de renderizar a página.
Isso evita o download desnecessário de imagens grandes que podem não ser necessárias em telas menores.

• Peso Inicial da Imagem: Ao definir as imagens diretamente no HTML, você garante que apenas a imagem apropriada para a tela
do usuário seja baixada, reduzindo o peso da página e melhorando o tempo de carregamento.

• Acessibilidade: Imagens definidas no HTML permitem que o conteúdo seja mais acessível, especialmente em dispositivos móveis,
onde a largura da tela pode variar significativamente.
Portanto, usar o HTML para essas configurações é essencial para a eficiência e a performance da página.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag picture (1/3) 465
Art Direction se refere à estratégia de escolher imagens que não apenas se ajustam ao tamanho da tela, mas que também se
adequam ao contexto visual e à mensagem desejada. A tag <picture> é fundamental para essa prática, pois permite o uso de
diferentes imagens baseadas em critérios específicos, como a resolução da tela e a orientação do dispositivo.

Comparação entre <img> e <picture>:

• Flexibilidade: Com <picture>, é possível definir várias fontes de imagem, garantindo que a mais apropriada para cada situação
seja carregada. Isso não só melhora a performance, mas também a estética do design, pois permite a escolha de composições
visuais que se adaptam melhor a diferentes formatos de tela.

• Eficiência no Carregamento: Ao usar <img>, a mesma imagem pode ser carregada em diferentes tamanhos, o que pode levar ao
desperdício de largura de banda, especialmente em dispositivos menores. Já a tag <picture> permite que imagens totalmente
diferentes sejam utilizadas, evitando o download de arquivos pesados que não são necessários para determinadas resoluções.

Essas abordagens garantem uma experiência visual mais rica e eficiente para os usuários, otimizando tanto a estética quanto a
funcionalidade das páginas web.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag picture (2/3) 466
A tag <picture> é uma ferramenta poderosa para implementar Art Direction em imagens responsivas. Ela permite que você
especifique diferentes fontes de imagem para diferentes condições, como resolução de tela e orientação, garantindo que a imagem
mais adequada seja carregada para cada situação.

Sintaxe e Funcionamento:

• Estrutura: A tag <picture> envolve uma ou mais tags <source> e, opcionalmente, uma tag <img>. Cada <source> pode ter
atributos como media (para condições de mídia) e srcset (para especificar diferentes arquivos de imagem).

• Processo: O navegador avalia as condições especificadas nas tags <source> e carrega a primeira imagem que atende aos critérios.
A tag <img> serve como um fallback, garantindo que uma imagem sempre seja exibida, mesmo que nenhuma condição seja
atendida.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – Tag picture (3/3) 467

No código apresentado, a tag <source> dentro da tag

<picture> possui duas propriedades importantes:

• srcset: Este atributo especifica o caminho da imagem que

deve ser carregada. No exemplo, Imagens/banner-hero-
[Link] é a imagem designada para ser utilizada em
telas pequenas.

• media: Esse atributo define uma condição de mídia. A

imagem será carregada apenas se a largura da tela for
igual ou inferior a 767 pixels. Isso significa que, em
dispositivos móveis ou em janelas reduzidas, a imagem
mobile será utilizada, otimizando o carregamento e a
exibição.

Caso a condição não seja atendida, a tag <img> serve como

um fallback, garantindo que uma imagem padrão (neste
caso, Imagens/[Link]) seja exibida.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – CSS (1/8) 468
Propriedades e Aplicações

• background-image:
• Define uma imagem de fundo para a div. Neste caso, a imagem banner-
[Link] é aplicada como fundo.
• Usamos essa abordagem quando a imagem faz parte do design de fundo
e não do conteúdo principal da página, diferente de quando inserimos
imagens diretamente no HTML com <img>.

• background-position: 50%:
• Define o posicionamento da imagem de fundo dentro da div.
• A 50% centraliza a imagem tanto horizontal quanto verticalmente.
• Isso é útil para garantir que a parte central da imagem seja visível,
especialmente se a imagem for cortada devido ao background-size
• .
• background-size: cover:
• Faz com que a imagem de fundo cubra toda a área da div, mantendo a
proporção da imagem.
• Ou seja, a imagem será ajustada para cobrir a área sem distorcer suas
dimensões, mas parte dela pode ser cortada (dependendo do tamanho da
div).
• Isso garante que, independentemente do tamanho da tela ou janela, a
imagem sempre preencha completamente o espaço, criando um design
responsivo.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Imagens responsivas – CSS (2/8) 469
• height: 471px:
• Define a altura da div. Sem essa propriedade, a div não teria altura, então a imagem de fundo não seria exibida.
• Diferente de uma imagem inserida com <img>, que tem suas próprias dimensões, uma div só ocupa espaço se você definir suas
dimensões ou se houver conteúdo dentro dela.
• Portanto, ao especificar a altura, você garante que a div terá uma área visível onde a imagem de fundo será aplicada.

Por que a imagem não aparece sem o height?

• Uma div vazia (sem conteúdo dentro) não tem altura por padrão, ou seja, seu tamanho é 0px, então, mesmo que você aplique
uma imagem de fundo, ela não será visível, porque a div tecnicamente não tem espaço.
• Definir um height garante que a div tenha espaço onde a imagem de fundo possa ser exibida.

Comparação com a abordagem no HTML

• No HTML, podemos usar <img> e controlar a responsividade com atributos como srcset e sizes para adaptar diferentes imagens a diferentes
resoluções.
• Quando usamos CSS para manipular uma imagem de fundo, temos controle total sobre o seu comportamento, estilo, e posicionamento, mas
não podemos modificar o tamanho da imagem conforme o dispositivo diretamente, como fazemos com srcset.
Se o objetivo for usar imagens como parte do layout visual (não conteúdo), essa abordagem com background-image e propriedades CSS é mais
apropriada.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – CSS (3/8) 470
O uso de responsividade com a regra @media permite adaptar o estilo de uma página para diferentes tamanhos de tela.

O que esse código faz?

• @media all and (max-width: 767px):

• Este é um Media Query, usado para aplicar estilos específicos quando a tela (ou janela do navegador) tiver uma largura máxima
de 767px.
• Esse valor de 767px geralmente é usado para representar dispositivos móveis como smartphones, ou seja, ele detecta quando a
tela está menor que 767 pixels de largura.
• A palavra-chave all significa que essa regra se aplica a todos os tipos de mídia (telas, impressoras, etc.). Neste caso, estamos
focando em dispositivos de tela.

Responsividade no contexto deste código:

• Imagem de fundo para mobile: Quando a tela for menor ou igual a 767px, a div vai carregar uma nova imagem de fundo,
[Link]. Isso é uma técnica comum para responsividade, onde você fornece uma imagem otimizada para
dispositivos móveis, que geralmente é mais leve e melhor ajustada ao formato das telas menores.
• Altura menor: A div terá sua altura ajustada para 319px, que é menor que a altura usada para telas maiores (471px). Isso é feito
para garantir que o layout fique mais compacto e se ajuste melhor ao tamanho reduzido da tela.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Imagens responsivas – CSS (4/8) 471

A condição -webkit-min-device-pixel-ratio: 2 usada dentro de uma media query se refere à densidade de pixels de um dispositivo e
é especificamente voltada para dispositivos que utilizam o motor de renderização WebKit, que é o motor por trás de navegadores
como o Safari (em iPhones e iPads) e versões anteriores do Chrome e Opera.
Vamos entender cada parte: -webkit-min-device-pixel-ratio: 2:

• -webkit:
• Esse é um prefixo específico para navegadores que utilizam o motor WebKit (principalmente dispositivos da Apple e algumas
versões de navegadores antigos). Ele foi necessário em uma época em que certas funcionalidades CSS eram implementadas de
forma experimental ou específica em navegadores como Safari e Chrome. Hoje em dia, muitos navegadores já suportam essa
funcionalidade sem o prefixo.

• min-device-pixel-ratio:
• Refere-se à relação de pixels do dispositivo. Essa propriedade mede a quantidade de pixels físicos (no hardware) em relação aos
pixels lógicos (no CSS).
• Um valor de 2 significa que o dispositivo tem uma alta densidade de pixels, também conhecido como tela retina (ou seja, para
cada pixel que o CSS define, o dispositivo usa 2 pixels físicos).
• Em termos simples, dispositivos com min-device-pixel-ratio: 2 têm telas mais nítidas e com maior resolução, como muitos
smartphones modernos e monitores de alta definição.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Imagens responsivas – CSS (5/8) 472
2:
• O valor 2 indica que o dispositivo possui pelo menos o dobro de pixels físicos para cada pixel CSS. Isso é comum em
dispositivos com telas de alta resolução, como iPhones, iPads e outros dispositivos com telas retina.

Quando usar?
• A media query com -webkit-min-device-pixel-ratio: 2 é usada para aplicar estilos específicos em dispositivos com telas de
alta densidade, como substituir imagens por versões de maior resolução. Isso garante que as imagens e gráficos fiquem nítidos
em dispositivos modernos com telas de alta qualidade.

Por exemplo, no código fornecido, carrega uma versão de alta resolução da imagem ([Link]) quando o dispositivo tem uma
densidade de pixels de 2 ou mais, garantindo que a imagem pareça nítida em telas de alta definição.

Uma outra forma que podemos criar responsidade da nossa imagem dentro do nosso CSS é a seguinte estrutura:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Imagens responsivas – CSS (6/8) 473
As duas partes do código que utilizam -webkit-image-set e image-set estão relacionadas à definição de diferentes versões de uma
imagem de fundo, dependendo da densidade de pixels do dispositivo. Isso permite que o navegador carregue a versão mais
apropriada da imagem, garantindo tanto qualidade quanto desempenho. Vamos entender cada uma delas:

1. background-image: -webkit-image-set(...):
• -webkit-image-set é uma propriedade específica para navegadores que utilizam o motor WebKit (como o Safari e algumas
versões anteriores do Chrome e Opera).
• A função image-set() permite definir várias resoluções da mesma imagem para diferentes densidades de pixel. Isso é útil para
garantir que dispositivos com telas de alta densidade (como telas retina) carreguem uma imagem de maior qualidade,
enquanto dispositivos com resoluções mais baixas carreguem uma versão menor e mais leve.

• "Imagens/[Link]" 1x define a imagem a ser usada em dispositivos com uma densidade de 1x, ou seja, uma
densidade de pixel padrão (dispositivos com tela comum).
• "Imagens/[Link]" 2x define a imagem a ser usada em dispositivos com densidade de 2x ou maior, como telas retina,
que possuem uma maior densidade de pixels por polegada (ppp).
Isso permite carregar a versão adequada da imagem para cada tipo de dispositivo, otimizando o tempo de carregamento e
garantindo uma boa qualidade visual.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Imagens responsivas – CSS (7/8) 474
2. background-image: image-set(...):
• image-set() é a versão padrão (sem o prefixo -webkit) e funciona em navegadores modernos que suportam essa funcionalidade
sem a necessidade de um prefixo específico.
• A lógica é a mesma do -webkit-image-set, mas é uma implementação mais amplamente suportada. Com essa propriedade,
navegadores modernos poderão entender e aplicar a seleção de imagens correta conforme a densidade de pixels do dispositivo.

O comportamento é idêntico ao de -webkit-image-set(), mas é aplicável a navegadores modernos como o Chrome, Firefox, Edge e
outros que suportam a funcionalidade padrão de image-set(). Ele carrega a versão 1x (baixa densidade) ou 2x (alta densidade) da
imagem dependendo do dispositivo.

Resumo das funções:

• Ambas as funções (-webkit-image-set e image-set) permitem que você defina múltiplas versões da imagem e o navegador
escolhe qual versão carregar com base na densidade de pixels da tela do dispositivo.
• Isso é importante para otimização de performance e qualidade visual:
• Dispositivos com telas normais (1x): Carregam a versão padrão da imagem, que é mais leve e consome menos recursos.
• Dispositivos com telas de alta densidade (2x): Carregam a versão de alta resolução da imagem, garantindo que ela seja
exibida com nitidez.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Imagens responsivas – CSS (8/8) 475

Por que usar essas propriedades?

• Performance: Em dispositivos com telas de menor resolução, carregar uma imagem menor (como a versão 1x) reduz o uso de
banda e acelera o carregamento da página.

• Qualidade visual: Em dispositivos de alta resolução (como smartphones modernos), carregar uma imagem maior (como a
versão 2x) garante que ela seja exibida com alta nitidez, sem ficar pixelada ou desfocada.

Aplicação prática:

Se você deseja que seu site funcione bem tanto em telas de alta densidade (como as telas retina da Apple) quanto em telas
normais, usar image-set() permite ajustar automaticamente a qualidade da imagem de acordo com o dispositivo, sem a
necessidade de criar media queries complexas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Variáveis no CSS (1/5) 476

Variáveis em CSS são uma forma de armazenar valores reutilizáveis, como cores, tamanhos, espaçamentos, etc., que podem ser
usados várias vezes no código. Elas permitem manter o estilo do site mais organizado, fácil de manter e modificar, principalmente
quando há a necessidade de aplicar as mesmas propriedades em vários lugares. No CSS, as variáveis são chamadas de Custom
Properties.

A utilidade das variáveis em CSS está diretamente ligada a facilitar a manutenção, a organização, a consistência e a flexibilidade do
código. Vou listar as principais utilidades com mais detalhes:

1. Facilidade na Manutenção
• Alteração rápida: Se você definir uma cor, um tamanho ou um espaçamento como uma variável, poderá alterar o valor em um
único lugar e ele será refletido em todas as partes do site onde a variável foi usada. Isso economiza tempo, especialmente em
projetos grandes, pois não é necessário alterar cada instância manualmente.

2. Coerência no Design
• Uniformidade: Variáveis garantem que o mesmo valor seja usado consistentemente em várias partes do código. Isso evita que
diferentes valores semelhantes (como tons de cor ligeiramente diferentes) sejam acidentalmente aplicados em diferentes
elementos, mantendo um design coerente.

3. Reutilização de Código
• Evita repetição: Variáveis ajudam a evitar a repetição de valores no CSS, tornando o código mais limpo e legível. Ao reutilizar
variáveis, você centraliza valores comuns, o que facilita a manutenção.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Variáveis no CSS (2/5) 477

4. Facilidade para Criação de Temas

• Temas dinâmicos: Usar variáveis permite alternar rapidamente entre diferentes temas (como tema claro e escuro) apenas
alterando os valores das variáveis, sem a necessidade de reescrever todo o código CSS.

5. Customização por Componentes

• Componentes reutilizáveis: Em sistemas de design ou ao trabalhar com componentes reutilizáveis, variáveis podem ser usadas
para personalizar a aparência de diferentes partes de uma interface sem duplicar o código.

6. Simplificação de Media Queries

• Responsividade mais fácil: Variáveis podem ser usadas para ajustar valores conforme a resolução da tela. Ao usá-las dentro de
media queries, você pode alterar valores de forma dinâmica para diferentes dispositivos.

7. Flexibilidade e Escalabilidade
• Adaptabilidade: À medida que seu projeto cresce, o uso de variáveis torna o código mais escalável, permitindo que você
adicione novos valores ou altere os existentes sem se preocupar em quebrar o layout geral do site.

8. Compatibilidade com Ferramentas de Desenvolvimento

• Integração com pré-processadores: Embora os pré-processadores CSS como Sass e LESS também ofereçam variáveis, as
variáveis nativas do CSS têm a vantagem de serem dinâmicas e acessíveis diretamente pelo navegador, além de poderem ser
manipuladas em tempo de execução via JavaScript.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Variáveis no CSS (3/5) 478

Como funcionam as variáveis em CSS?

Definindo uma variável:

• As variáveis em CSS são definidas usando o prefixo -- seguido do nome da

variável.

• Elas podem ser declaradas em qualquer seletor, mas geralmente são

colocadas dentro do seletor :root, que representa o documento inteiro,
tornando-as acessíveis globalmente.

1. :root
• O que é?: :root é um seletor CSS que se refere ao elemento raiz do documento, ou seja, o elemento <html>. Qualquer variável
definida dentro do :root estará disponível globalmente, em qualquer parte do CSS.
• Por que usar?: Isso é útil para garantir que as variáveis possam ser acessadas e reutilizadas em todo o arquivo CSS, o que
facilita a manutenção e a coerência do design.

2. Definição das variáveis

Dentro do bloco :root, você está criando cinco variáveis CSS:

--azul: #0588c4;
• Esta variável representa uma cor azul. O valor hexadecimal #0588c4 é um tom específico de azul.
• Pode ser usada para definir a cor de fundo, bordas, textos ou qualquer outra propriedade que aceite cores.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Variáveis no CSS (4/5) 479

--azul-claro: #78d4ff;
• Esta variável armazena uma cor azul mais clara, que pode ser usada em contraste com o azul mais escuro para destacar
elementos ou criar hierarquia visual.

--azul-escuro: #035276;
• Esta variável contém uma cor azul mais escura. Normalmente, tons escuros são usados para enfatizar ou dar contraste em
relação a outros elementos de cores mais claras.

--laranja-avermelhado: #c44105;
• Esta variável define uma cor laranja avermelhada. Pode ser usada para chamar a atenção, como em botões ou alertas, já que
tons de vermelho ou laranja costumam destacar mais elementos.

--propriedade-box: border-box;
• Aqui, você está armazenando a propriedade border-box, que é um valor comum da propriedade box-sizing. Isso pode ser útil
se você deseja reutilizar essa propriedade em diferentes elementos de forma consistente.
• O valor border-box define que a largura e a altura de um elemento incluem o padding e a borda, facilitando o controle do
tamanho dos elementos no layout.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Variáveis no CSS (5/5) 480
Para utilizar as variáveis definidas no CSS, a sintaxe é simples. Você usa a função var() para acessar a variável. Dentro dos
parênteses de var(), você passa o nome da variável, que começa com dois hífens (--).

Sintaxe básica:

Para usar essas variáveis no seu CSS, você faz assim:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (1/12) 481
O que são fontes seguras para a web?

Fontes seguras para a web, (ou web-safe fonts), são aquelas que, historicamente, são amplamente suportadas pela maioria dos
sistemas operacionais e navegadores. Essas fontes, como Arial, Times New Roman e Verdana, estão pré-instaladas na maioria dos
dispositivos, o que permite seu uso sem precisar importá-las ou fornecê-las via link no HTML ou CSS.

No desenvolvimento de sites, você pode perceber que nem todas as fontes precisam ser importadas no CSS, como é o caso de
fontes como Arial, Verdana e Montserrat. Isso acontece por dois motivos principais: fontes "sistema" e fontes "web".

1. Fontes do Sistema
Fontes como Arial, Verdana e Times New Roman são chamadas de fontes do sistema. Elas vêm pré-instaladas na maioria dos
sistemas operacionais (Windows, macOS, Linux) e, por isso, não precisam ser baixadas ou carregadas da internet. Quando você
usa uma dessas fontes no CSS, como font-family: Arial;, o navegador verifica se essa fonte já está instalada no sistema do usuário.
Se estiver, ela é aplicada imediatamente.
Essa abordagem é muito eficiente, pois não há necessidade de solicitar recursos adicionais (como arquivos de fonte) do servidor,
tornando o carregamento do site mais rápido.

2. Fontes Web
Por outro lado, fontes como Montserrat ou Roboto são chamadas de fontes web. Elas não vêm instaladas no sistema da maioria
dos usuários. Por isso, para usar essas fontes, é necessário "importá-las" de um serviço de hospedagem de fontes (como o Google
Fonts), ou incluir os arquivos de fonte no próprio projeto. A importação é feita no CSS com a regra @import ou a inclusão direta
em HTML via <link>.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (2/12) 482
Como carregar uma fonte localmente

Assim como com imagens, você pode baixar a fonte Roboto em arquivos de formato específico (como .ttf ou .woff) e armazená-la
na pasta do seu projeto. Em seguida, você pode referenciar esses arquivos no seu CSS usando a regra @font-face. Isso permite
que a fonte seja carregada diretamente do seu servidor, sem depender de links externos.

Passos para usar a fonte Roboto localmente:

• Baixar a fonte: Acesse Google Fonts, selecione a fonte Roboto, e clique para baixar os arquivos da fonte.
• Salvar os arquivos: Após o download, você terá os arquivos de fonte em seu computador. Coloque esses arquivos dentro de
uma pasta no seu projeto, por exemplo, uma pasta chamada fonts/.
• Usar no CSS: Agora, no seu arquivo CSS, você vai referenciar a fonte localmente usando a regra @font-face:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (3/12) 483
O Google Fonts é uma plataforma gratuita que oferece uma vasta coleção de fontes que podem ser facilmente usadas em sites
e projetos web. O uso é simples e rápido, e você pode adicionar qualquer fonte ao seu site em minutos. Aqui está um guia passo
a passo de como utilizar o Google Fonts para selecionar fontes e gerar os links que você vai inserir no HTML ou CSS.

Passo 1: Acessar o Google Fonts

Primeiro, acesse o site do Google Fonts: Google Fonts. Lá, você verá uma vasta galeria de fontes, cada uma com exemplos de
como elas aparecem no texto.

Passo 2: Selecionar a Fonte

• Pesquisar ou navegar: Você pode procurar diretamente pelo nome de uma fonte específica (como "Roboto", "Montserrat",
"Open Sans", etc.), ou explorar as categorias disponíveis (serifadas, sans-serif, manuscritas, etc.).
• Visualizar: Ao clicar em uma fonte, você poderá visualizar diferentes estilos (regular, negrito, itálico) e pesos (400, 700, etc.)
para ver como ela se comporta no texto.
• Personalizar o estilo: O Google Fonts permite que você visualize a fonte com texto personalizado, altere o tamanho e veja
diferentes estilos disponíveis.

Passo 3: Selecionar os Estilos da Fonte

Depois de encontrar a fonte desejada, siga estes passos para selecioná-la:
• Adicionar ao projeto: Clique no botão "+ Select this style" para adicionar a fonte à sua seleção.
• Escolher os estilos: Você pode selecionar um ou mais estilos (como regular, negrito, itálico, etc.), dependendo do que precisa.
Isso é importante para carregar apenas os estilos que realmente serão utilizados, otimizando o desempenho do site.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (4/12) 484
Você consegue selecionar os tipos de fonte e suas características, como negrito e itálico, que irá utilizar dentro do seu projeto.

Depois de selecionar, você irá clicar no ícone de "sacola", para conseguir verificar os
tipos de importação e como você importa a fonte selecionado para dentro do seu
projeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (5/12) 485
O site irá mostrar todas as referências e importações para a fonte selecionada.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (6/12) 486
Como Funciona a Importação de Fontes por Link no HTML

Quando você importa uma fonte usando um link no HTML, seu navegador está basicamente fazendo uma solicitação para pegar
o arquivo de fonte hospedado em um servidor externo (como o Google Fonts). Vamos entender como esse processo acontece e
como o navegador consegue “buscar” a fonte na API do Google Fonts.

O que é um link de importação de fonte?

Um link de importação de fonte é uma linha de código HTML que informa ao navegador que ele deve buscar determinados
arquivos de fonte em uma URL específica. Isso é feito por meio da tag <link>, que é usada para carregar recursos externos, como
fontes, estilos CSS ou até favicons.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (7/12) 487

Por que Usar?

Usar essas tags <link rel="preconnect"> com o Google Fonts é uma prática recomendada para melhorar a performance. Quando
você usa fontes externas, como do Google Fonts, há latência no carregamento dessas fontes, pois o navegador precisa primeiro
se conectar aos servidores do Google. Com o preconnect, você está basicamente dizendo ao navegador para "preparar" essas
conexões antecipadamente, o que melhora a velocidade com que a fonte é carregada e exibida na página.

O uso de preconnect com servidores de fontes (como [Link] e [Link]) é uma estratégia para melhorar
a velocidade do carregamento de páginas. Ele ajuda a reduzir o tempo que o navegador gasta esperando para estabelecer
conexões e buscar recursos, resultando em uma melhor experiência de usuário, especialmente quando se trata de fontes
externas.

1. <link>: Carregando Recursos Externos

A tag <link> no HTML é usada para referenciar recursos externos, como folhas de estilo (CSS), fontes e outros arquivos que sua
página precisa. No caso específico dessa linha, ela está carregando uma folha de estilo que define as propriedades da fonte
Roboto. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Importando Fontes (8/12) 488

2. href="[Link]
A propriedade href contém o URL onde a folha de estilo com a definição da fonte Roboto pode ser encontrada. O Google Fonts
gera esse link automaticamente quando você seleciona uma fonte e suas variantes no site. Vamos entender o que cada parte
dessa URL representa:

• [Link] Este é o domínio que hospeda a API do Google Fonts. É o serviço onde as fontes são
armazenadas e distribuídas para a web.

• /css2?family=Roboto: Isso especifica que você está solicitando a fonte da família "Roboto".

• ital,wght@0,400;0,700;1,400: Esta parte é um pouco mais detalhada e define as variantes da fonte que você deseja carregar:

• ital refere-se ao estilo itálico.

• wght refere-se ao peso da fonte (ou a espessura do texto).

No exemplo:
• 0,400: Refere-se ao estilo não-itálico (0 significa normal) com peso 400 (que é o peso normal).
• 0,700: Refere-se ao estilo não-itálico (0 significa normal) com peso 700 (que é negrito).
• 1,400: Refere-se ao estilo itálico (1 significa itálico) com peso 400.

Essas combinações permitem que você defina quais variações da fonte Roboto você quer carregar no seu projeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (9/12) 489
3. rel="stylesheet"
O atributo rel define o relacionamento do documento HTML com o recurso que está sendo referenciado. No caso de fontes do
Google, o valor rel="stylesheet" indica que o recurso carregado é uma folha de estilos (CSS). Esse CSS contém as definições para
carregar a fonte Roboto com as variações que você especificou.

4. &display=swap
O parâmetro display=swap faz parte da estratégia de renderização de fontes e define como a fonte será exibida no seu site
enquanto ela está sendo carregada. Isso afeta o comportamento do texto durante o carregamento da fonte.
• swap: Com essa opção, o navegador usará uma fonte de fallback (uma fonte padrão do sistema) enquanto a fonte Roboto está
sendo baixada. Assim que a fonte Roboto estiver disponível, o navegador substitui a fonte de fallback pela Roboto. Isso evita que o
texto fique invisível enquanto a fonte está sendo carregada, o que é chamado de "flash of invisible text" (FOIT).

Quando estamos lidando com fontes personalizadas em um site, existem duas formas principais de incluí-las: usando o <link> no
HTML ou usando a regra @font-face no CSS. Ambas são eficientes, mas funcionam de maneiras diferentes e têm vantagens em
contextos específicos.

1. Usando o <link> no HTML

Essa é a maneira mais comum e simples de incluir fontes quando elas vêm de serviços online, como o Google Fonts.
Como funciona:
• O que ele faz: Esse código importa uma folha de estilo (CSS) hospedada em um servidor externo, como o Google Fonts. Nessa folha
de estilo, já existem regras prontas para carregar a fonte desejada.
• Vantagens: Simplicidade. Não é necessário gerenciar arquivos de fontes ou cuidar de onde eles estão hospedados. O Google ou
outro serviço faz todo esse trabalho.
• Quando usar: Ideal para quando você está utilizando fontes populares, especialmente se estiver utilizando uma fonte de um
repositório como o Google Fonts, onde a fonte já é otimizada e distribuída em formatos adequados.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Importando Fontes (10/12) 490
2. Usando @font-face no CSS
A segunda abordagem é mais personalizada e flexível. Aqui, você define manualmente as fontes diretamente no CSS usando a regra
@font-face.

Como funciona:
• @font-face: Esta regra permite que você defina fontes personalizadas diretamente no seu arquivo CSS.
• font-family: "MinhaRoboto": Você está criando um nome personalizado para a fonte que será usada no CSS. Nesse caso, o nome da
sua fonte será "MinhaRoboto".
• font-weight: 400: Define o peso (espessura) da fonte. O peso 400 é o padrão (normal).
• font-display: swap: Assim como no método do Google Fonts, essa propriedade define que uma fonte de fallback será usada até que
a fonte personalizada seja carregada.
• src: Define a origem da fonte. Existem algumas opções aqui:
• local("Roboto"): Tenta carregar a fonte localmente do sistema do usuário (se ele já tiver a fonte Roboto instalada no computador).
• url([Link] Caso a fonte não esteja disponível localmente, ela será carregada de um
servidor externo, a partir de um arquivo .ttf (TrueType Font).

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (11/12) 491

Vantagens:

• Controle total: Você tem mais flexibilidade, pois pode escolher onde os arquivos da fonte estão hospedados, como os arquivos serão
carregados, e até definir formatos diferentes para diferentes navegadores.

• Personalização: Ideal quando você precisa usar fontes personalizadas ou exclusivas que não estão disponíveis em bibliotecas como
o Google Fonts.

• Fallback local: A estrutura local() permite que o navegador utilize uma fonte já instalada no dispositivo do usuário, o que pode
melhorar o desempenho.

Quando usar:

• Quando a fonte não está em um serviço online: Se você tiver uma fonte personalizada ou quiser usar uma fonte não disponível no
Google Fonts, a regra @font-face permite adicionar a fonte diretamente.

• Quando você quer hospedar as fontes: Se você deseja controlar onde a fonte é hospedada (em seu próprio servidor, por exemplo),
essa é a melhor abordagem.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Importando Fontes (12/12) 492

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Fontes Variáveis (1/4) 493

As fontes variáveis do Google Fonts são uma tecnologia avançada de fontes que permite que uma única fonte contenha múltiplas
variações de estilo e peso, em vez de ter que carregar várias fontes diferentes para cada variação que você deseja usar. Isso é feito
através da utilização de um formato de fonte OpenType chamado OpenType Font Variations.

Principais Características das Fontes Variáveis

• Variações em um único arquivo:

• Com fontes variáveis, você pode ter uma única fonte que inclui diferentes pesos (como leve, regular, negrito) e estilos (como normal,
itálico) em um único arquivo de fonte. Isso reduz a quantidade de requisições de rede necessárias para carregar várias fontes,
melhorando a performance do seu site.

• Interpolação:
• As fontes variáveis permitem a interpolação entre estilos. Por exemplo, você pode usar valores que vão de um peso 100 (muito leve)
até um peso 900 (muito grosso) simplesmente ajustando uma propriedade no CSS, como font-weight. Isso significa que, em vez de
precisar de um arquivo separado para cada peso, você pode gerar pesos intermediários.

• Flexibilidade:
• As fontes variáveis oferecem uma flexibilidade incrível em design, permitindo que os desenvolvedores e designers ajustem a
espessura, largura e outros atributos da fonte com precisão. Isso é especialmente útil em layouts responsivos, onde o estilo da fonte
pode ser ajustado de acordo com o tamanho da tela.

• Menos requisições HTTP:

• Como todas as variações estão contidas em um único arquivo, isso resulta em menos requisições ao servidor, o que pode aumentar
a velocidade de carregamento da página.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Fontes Variáveis (2/4) 494
Vantagens das Fontes Variáveis

• Eficiência de carregamento: Carregamento mais rápido devido à redução do número de arquivos de fonte.
• Aprimoramento do design: Os designers têm mais liberdade para experimentar com diferentes estilos e pesos sem a necessidade
de múltiplas fontes.
• Suporte para personalização: Proporciona uma experiência mais rica para os usuários, permitindo que a tipografia se adapte ao
contexto e ao design do site.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Fontes Variáveis (3/4) 495
Montserrat: CSS Class for a Variable Style

Na tipografia web, o uso de classes CSS para definir estilos de fontes é uma prática comum. Vamos entender como criar uma classe
CSS para a fonte Montserrat, que é uma fonte variável, permitindo a personalização do seu estilo e peso.
Estrutura da Classe CSS
Aqui está a estrutura da classe CSS que vamos analisar:

Componentes da Classe

• Nome da Classe (.montserrat-<uniquifier>):

• O nome da classe começa com montserrat- seguido de um <uniquifier>, que deve ser substituído por um nome único e descritivo.
Isso é importante para que você possa identificar rapidamente qual estilo ou variação você está aplicando. Por exemplo, você pode
usar nomes como montserrat-titulo, montserrat-corpo, etc. Isso ajuda a manter seu CSS organizado.

• font-family: "Montserrat", sans-serif;:

• Esta propriedade define a fonte que será utilizada. Ao especificar "Montserrat", estamos indicando que queremos usar essa fonte em
particular. O sans-serif é uma fonte genérica que serve como fallback (opção de substituição) caso a Montserrat não possa ser
carregada.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Fontes Variáveis (4/4) 496

• font-optical-sizing: auto;:
• Essa propriedade é usada para controlar como a fonte é renderizada em diferentes tamanhos. O valor auto permite que o
navegador ajuste automaticamente o estilo da fonte para otimizar a legibilidade com base no tamanho do texto. É uma
funcionalidade útil para garantir que o texto fique bonito e fácil de ler, independentemente de onde for exibido.

• font-weight: <weight>;:
• Aqui, <weight> é um valor que varia de 100 a 900, representando a espessura da fonte. Por exemplo:
• font-weight: 400; representa um peso normal.
• font-weight: 700; representa um peso negrito.
• Isso permite que você tenha diferentes espessuras da mesma fonte Montserrat, aumentando a flexibilidade do design.

• font-style: normal;:
• Esta propriedade define o estilo da fonte. O valor normal indica que o texto deve ser renderizado em estilo normal, sem itálico ou
outros efeitos. Se você quisesse usar itálico, poderia definir como font-style: italic;.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Font-stacking para otimização de fontes (1/4) 497
O font-stacking é uma técnica importante na tipografia web que envolve a escolha e a declaração de uma lista de fontes em CSS.
Essa lista é utilizada para garantir que o texto seja exibido corretamente, mesmo que a fonte principal não esteja disponível. Vamos
explorar o que é font-stacking, por que é importante e quais são as boas práticas para implementá-lo.

O Que É Font-Stacking?
Font-stacking refere-se à prática de especificar uma série de fontes em uma declaração CSS, em uma ordem de preferência. Quando
um navegador renderiza uma página, ele tenta carregar a primeira fonte da lista. Se essa fonte não estiver disponível, o navegador
passa para a próxima fonte e assim por diante, até encontrar uma fonte que possa ser utilizada.

Neste exemplo, o navegador tentará primeiro usar Roboto. Se Roboto não estiver disponível, ele tentará Helvetica Neue. Se essa
também não estiver disponível, passará para Arial e, finalmente, para qualquer fonte sans-serif disponível no sistema.

Por Que Usar Font-Stacking?

• Fallbacks Eficientes:
• A principal razão para usar font-stacking é garantir que o texto sempre seja exibido, mesmo que a fonte principal não possa ser
carregada. Isso é essencial para manter a legibilidade e a usabilidade da página.
• Desempenho:
• Quando uma fonte personalizada não é carregada rapidamente, o navegador pode exibir uma fonte de fallback, o que melhora a
experiência do usuário. Isso é especialmente importante em dispositivos móveis e em conexões de internet lentas.
• Consistência Visual:
• Usar fontes de fallback que têm características visuais semelhantes à fonte principal pode ajudarDESENVOLVIMENTO
a manter WEBa consistência
– FULL STACK IMPRESSIONADOR no design,
I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Font-stacking para otimização de fontes (2/4) 498
A propriedade CSS font-family é usada para especificar a fonte a ser utilizada para um determinado elemento HTML. A declaração que
você forneceu inclui uma lista de fontes que são usadas em uma ordem de preferência, conhecida como font-stacking. Vamos
analisar cada parte dessa declaração e entender seu propósito.

Análise da Declaração

-apple-system:
• Essa é uma fonte específica para sistemas da Apple (macOS e iOS). Ela é utilizada para renderizar texto em dispositivos Apple de
maneira que se integre ao estilo do sistema operacional. Ao usar essa fonte, você garante que o texto tenha um visual nativo em
dispositivos Apple.
BlinkMacSystemFont:
• Esta fonte é usada principalmente em sistemas macOS executando o navegador Google Chrome. É uma forma de garantir que o
texto seja renderizado usando a fonte do sistema macOS no Chrome.
"Segoe UI":
• Esta é a fonte padrão usada no sistema operacional Windows. É uma fonte sans-serif bem legível e comumente utilizada em
interfaces de usuário. Incluí-la na pilha de fontes assegura que o texto será exibido com uma fonte familiar para usuários de
Windows.
Roboto:
• Roboto é uma fonte popular desenvolvida pelo Google, muito utilizada em aplicativos e na web. É uma fonte sans-serif que oferece
um design moderno e é facilmente legível. Sua inclusão na lista garante que, se nenhuma das fontes anteriores estiver disponível,
Roboto será utilizada. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Font-stacking para otimização de fontes (3/4) 499

Oxygen-Sans:
• Oxygen é uma fonte sans-serif projetada para ser utilizada em interfaces de usuário. Ela é uma boa opção para usuários de sistemas
Linux, pois é comumente disponível em distribuições que utilizam o ambiente gráfico KDE.

Ubuntu:
• Esta é a fonte padrão utilizada pelo sistema operacional Ubuntu. É uma fonte sans-serif projetada para ser legível em telas e
utilizada em interfaces. Incluir essa fonte assegura que usuários do Ubuntu tenham uma experiência visual consistente.

Cantarell:
• Cantarell é uma fonte sans-serif desenvolvida para a interface do usuário do sistema operacional GNOME. Ela é legível e elegante,
proporcionando uma boa alternativa para usuários de sistemas Linux que usam GNOME.

"Helvetica Neue":
• Esta é uma versão modernizada da clássica fonte Helvetica, conhecida por sua clareza e elegância. É amplamente utilizada em
design gráfico e interfaces. É uma boa opção para quando as fontes anteriores não estão disponíveis.

sans-serif:
• Finalmente, a declaração termina com sans-serif, que é uma família genérica de fontes. Isso garante que, se nenhuma das fontes
especificadas estiver disponível, o navegador usará qualquer fonte sans-serif instalada no sistema do usuário. Isso proporciona uma
fallback segura, garantindo que o texto ainda será legível.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Font-stacking para otimização de fontes (4/4) 500
Vantagens de Usar Essa Declaração

• Compatibilidade: Ao incluir fontes específicas para diferentes sistemas operacionais e navegadores, você melhora a
compatibilidade e a experiência do usuário.

• Consistência Visual: A ordem de preferências garante que o texto tenha uma aparência consistente em diferentes plataformas,
adaptando-se ao estilo do sistema operacional.

• Fallback Seguro: Com a inclusão da família genérica sans-serif, você garante que haverá sempre uma fonte disponível, mesmo que
nenhuma das fontes personalizadas esteja instalada.

CSS System Font Stack Reference | DigitalOcean

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Lazy Loading (1/2) 501

Lazy loading (carregamento preguiçoso) é uma técnica usada para melhorar o desempenho de sites e aplicativos web,
permitindo que elementos como imagens, vídeos e outros recursos sejam carregados apenas quando são necessários. Isso
significa que, em vez de carregar todos os elementos de uma vez, o navegador carrega os elementos à medida que o usuário os
vê na tela, economizando largura de banda e acelerando o tempo de carregamento da página.

Como Funciona o Lazy Loading

Quando uma página é carregada, os navegadores normalmente buscam todos os elementos, como imagens e vídeos, de uma só
vez. Isso pode tornar a página lenta e aumentar o tempo de carregamento, especialmente se houver muitos elementos pesados.
O lazy loading modifica esse comportamento:

• Carregamento Inicial: Quando a página é acessada, apenas os elementos visíveis na área de visualização (viewport) são
carregados. Os elementos que estão fora da tela não são carregados imediatamente.

• Detecção de Visibilidade: À medida que o usuário rola a página para baixo, o navegador detecta quando os elementos estão
prestes a entrar na área de visualização. Assim que um elemento fica visível, ele é carregado.

• Carregamento sob Demanda: Essa abordagem garante que o usuário só baixe os recursos que realmente está prestes a ver,
melhorando a eficiência do carregamento da página.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Lazy Loading (2/2) 502
Vantagens do Lazy Loading

• Melhoria na Performance: Como apenas os elementos necessários são carregados, a página carrega mais rapidamente,
melhorando a experiência do usuário.

• Economia de Largura de Banda: O lazy loading reduz a quantidade de dados transferidos, especialmente útil em dispositivos
móveis com planos de dados limitados.

• Experiência do Usuário Aprimorada: Os usuários podem começar a interagir com o conteúdo mais rapidamente, sem esperar que
todos os elementos sejam carregados.

Implementando Lazy Loading em HTML

O HTML5 introduziu o atributo loading para facilitar a implementação do lazy loading. Esse atributo pode ser aplicado a elementos de
imagem (<img>) e iframe (<iframe>).

O atributo loading="lazy" informa ao navegador que essa imagem deve ser carregada somente quando estiver prestes a entrar na
área de visualização.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Carregamento do CSS e Arquivos de Estilização (1/2) 503
A Importância do Carregamento do CSS e Práticas de Otimização
O desempenho de uma página web não depende apenas do conteúdo que ela apresenta, mas também de como esse conteúdo é
carregado. Um dos aspectos mais cruciais desse processo é o carregamento do CSS, que define a apresentação visual da página.
Compreender as práticas adequadas para carregar CSS pode melhorar significativamente a experiência do usuário, reduzindo o
tempo de carregamento e evitando problemas como o Flash of Unstyled Content (FOUC).

Como o CSS é Carregado

Quando um navegador acessa uma página, ele lê o HTML e aplica o CSS para renderizar o conteúdo visualmente. O modo como o CSS
é vinculado ao HTML pode impactar esse processo. É aqui que entra a importância de usar a tag <link> no <head> do documento,
garantindo que os estilos sejam carregados antes que o conteúdo seja renderizado.

Atributos Importantes no Carregamento do CSS

Algumas práticas e atributos podem ser utilizados para otimizar o carregamento do CSS:

Preconnect:
• O atributo <link rel="preconnect" href="[Link] é usado para estabelecer uma conexão antecipada com o
servidor onde os recursos (como fontes) estão hospedados. Isso reduz o tempo de espera, já que o navegador começa a estabelecer
a conexão antes mesmo de precisar do recurso. Essa técnica é especialmente útil para fontes externas, como as do Google Fonts.

Lazy Loading:
• Outra prática importante é o lazy loading de elementos como imagens e iframes. Ao usar o atributo loading="lazy" em tags <img> e
<iframe>, você instrui o navegador a carregar esses elementos apenas quando eles estiverem prestes a entrar na área de
visualização do usuário. Isso reduz o número de recursos que precisam ser carregados inicialmente, melhorando o desempenho da
página. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Carregamento do CSS e Arquivos de Estilização (2/2) 504
Preload:
• A estrutura <link rel="preload" href="[Link]" as="style"> é utilizada para carregar um recurso específico, como uma folha de
estilo, com antecedência. O atributo rel indica ao navegador que o recurso é importante e deve ser carregado o mais rápido
possível, enquanto o atributo as especifica o tipo de recurso que está sendo carregado (neste caso, um estilo). Isso é especialmente
útil para folhas de estilo críticas que são necessárias para o layout inicial da página, pois assegura que o CSS seja carregado antes de
outros recursos menos prioritários.

Como as Práticas se Relacionam

Essas práticas de otimização estão interconectadas. Por exemplo, ao usar preconnect para fontes do Google, você não apenas
melhora o tempo de carregamento das fontes, mas também garante que o CSS que depende dessas fontes possa ser aplicado
mais rapidamente. Adicionando lazy loading às imagens, você permite que o conteúdo principal da página seja carregado mais
rapidamente, enquanto os recursos que não são imediatamente visíveis são carregados sob demanda.

Uso de Media Queries: Você pode incluir media queries no seu CSS para garantir que a aparência da sua página se ajuste a diferentes
tamanhos de tela. Isso é essencial para o design responsivo. Adicionar as media queries em diferentes arquivos favorece o
carregamento apenas quando necessário dessa folha estilo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Deixando a Home da Hashtag Responsiva (1/1) 505

Este desafio, vocês terão a oportunidade de aplicar os conhecimentos adquiridos sobre CSS e responsividade na criação da Home
da Hashtag. A responsividade é um aspecto essencial do desenvolvimento web moderno, permitindo que nossos sites se
adaptem a diferentes tamanhos de tela e dispositivos, proporcionando uma experiência de usuário consistente e agradável.

Para alcançar uma boa responsividade, vocês explorarão o uso de media queries, que são regras CSS que aplicam estilos
diferentes com base nas características da tela, como largura e altura. Vocês podem consultar as media queries do site oficial
como referência, mas também encorajamos que pratiquem uma abordagem mais intuitiva: diminuam a tela do navegador e
observem como o layout atual da Home da Hashtag se comporta. Identifiquem pontos em que o design começa a "quebrar" ou
não se adapta corretamente e desenvolvam suas próprias media queries para resolver esses problemas.

Lembre-se de que a responsividade não se trata apenas de ajustar tamanhos de fontes e imagens, mas também de reorganizar
elementos e garantir que a navegação seja fácil e acessível em qualquer dispositivo. Ao final deste desafio, vocês terão uma
Home da Hashtag que não só será visualmente atraente, mas também funcionará perfeitamente em telas de diferentes
tamanhos, desde desktops até smartphones.

Preparem-se para aplicar a criatividade e a lógica que aprenderam até agora, enquanto trabalham para criar uma experiência de
usuário excepcional! Vamos lá!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a primeira Media Query (1/6) 506

Agora vamos começar a criar a responsividade do nosso site,

que construímos ao longo do curso. O primeiro passo é
identificar em que ponto ocorre a primeira "quebra" no layout
do site, para então criarmos a nossa primeira media query a
partir desse momento.
Para isso, utilizaremos o DevTools, mais especificamente a
ferramenta de responsividade, para diminuir o tamanho da
tela e identificar o primeiro breakpoint (ponto de quebra).
Depois de fazer isso, podemos observar que o breakpoint
ocorre por volta de 1160px de largura, na seção "O que falam".

Antes de criar a media query, vamos primeiro adotar algumas

boas práticas com relação ao nosso arquivo CSS, pois como
vimos anteriormente nesse modulo, devemos sempre analisar
a questão de tempo de carregamento e otimizações do nosso
site.

Então vamos criar um arquivo [Link] e adicionar toda a

estrutura de css Global que temos no nosso arquivo. E
adicionar o seu link no arquivo html.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a primeira Media Query (2/6) 507

Vamos criar um arquivo CSS dedicado para armazenar as media queries que serão aplicadas em telas com dimensões de até
1160px. Além disso, vamos garantir que esse arquivo só seja carregado quando o site estiver sendo visualizado em telas menores
ou iguais a essa largura, utilizando o atributo media na tag <link> no HTML.

Passos:
1. Crie o Arquivo CSS para a Media Query
Primeiro, crie um arquivo CSS chamado "[Link]".

2. Linke o Novo Arquivo CSS no HTML

Agora, adicione o novo arquivo [Link] no seu arquivo HTML, garantindo que ele só será carregado em telas menores
ou iguais a 1160px. Isso é feito utilizando o atributo media na tag <link>:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a primeira Media Query (3/6) 508
Diferença entre "em" e "rem":

• em: Relativo ao tamanho da fonte do elemento pai. Ele escala com base no contexto em que é usado.
• rem: Relativo ao tamanho da fonte da raiz do documento (html). Ele é mais previsível, pois sempre considera o tamanho da
fonte base, geralmente 16px, a menos que você altere isso no html.

Por que é melhor usar "em" em vez de pixels?

• Adaptabilidade e escalabilidade:

• O uso de em torna o design mais escalável, pois ele é relativo ao tamanho da fonte do elemento pai (ou da raiz, no caso de
"rem"). Isso significa que o layout pode se ajustar melhor em diferentes dispositivos e resoluções, já que se adapta ao
tamanho do texto e outros elementos da página.

• Quando você usa pixels, os valores são fixos. Isso significa que o layout pode não se ajustar bem em telas maiores ou
menores, ou ao mudar as configurações de zoom ou acessibilidade do navegador.

• Consistência com fontes:

• Usar em em uma media query torna o layout mais relacionado ao tamanho de texto, ajudando na acessibilidade e
experiência de usuário. Se o usuário aumentar o tamanho do texto no navegador, a página vai se adaptar proporcionalmente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a primeira Media Query (4/6) 509
Como calcular 1160px para em?

Para converter pixels para em, precisamos saber o tamanho base da fonte. Normalmente, o tamanho padrão da fonte em
navegadores é 16px, então usaremos isso como referência (mas o valor pode variar se você definir um tamanho de fonte
diferente para a página).

A fórmula para converter pixels em em é:

Se o tamanho base da fonte for 16px:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a primeira Media Query (5/6) 510
Calculado a dimensão para a unidade em, verificamos que a seção "O que falam" é o que estavam gerando os primeiros erros
de layout, então para corrigir vamos utilizar a seguinte estrutura:

.container-oquefalam { margin: 0 8.6rem; }

• .container-oquefalam: Refere-se a um elemento HTML com a classe container-oquefalam. As regras CSS dentro dessa media
query vão afetar apenas esse elemento quando a largura da tela for menor que 1160px.
• margin: 0 8.6rem: Define as margens superior e inferior como 0 e as margens laterais (esquerda e direita) como 8.6rem.

Significado da regra: Quando a tela tiver 1160px ou menos, o elemento com a classe .container-oquefalam terá uma margem
lateral de 137.6px de cada lado, enquanto a margem superior e inferior será 0.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a primeira Media Query (6/6) 511
A segunda estrutura que vamos adicionar na nossa primeira media query será na seção Conteúdos gratuitos:

.img-conteudos { max-width: 41vw; }

• .img-conteudos: Refere-se a elementos (imagens) com a classe .img-conteudos.

• max-width: 41vw: Define a largura máxima da imagem como 41vw.
O que significa vw:
• vw significa "viewport width" e é uma unidade relativa à largura da janela de visualização (viewport).
• 1vw é igual a 1% da largura total da janela do navegador. Portanto, 41vw significa que a largura da imagem ocupará 41% da
largura total da tela, independentemente do tamanho absoluto em pixels.

Como funciona essa regra:

• Quando a largura da tela for de 1160px ou menos, as imagens com a classe .img-conteudos terão uma largura máxima de
41% da largura da tela.
• Isso permite que as imagens se ajustem proporcionalmente à tela, garantindo que não fiquem muito grandes em
dispositivos menores. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando a página inteira mudando uma única coisa (1/7) 512
Agora vamos criar nossa media query para o breakpoint no valor de 1035px. Para isso vamos criar um novo arquivo de css que
ficará responsável por armazenar essa nova media.

Quando utilizamos unidades relativas como rem no CSS, estamos definindo as propriedades (largura, altura, margens, etc.) em
relação ao tamanho base da fonte do documento. Isso torna o layout mais flexível e escalável. A técnica de definir o tamanho da
fonte do elemento html com um valor percentual, como 62.5% ou 56.25%, ajuda a simplificar a maneira como calculamos e
aplicamos o design responsivo.

Explicação da regra html { font-size: 62.5%; }

• O que significa font-size: 62.5% no html?

• O tamanho base da fonte nos navegadores é, por padrão, 16px.
• Quando definimos o font-size do elemento html para 62.5%, estamos alterando esse valor base para 62.5% de 16px, ou seja:
16px×0.625=10px16px \times 0.625 = 10px16px×0.625=10px
Isso significa que, após essa definição, 1rem = 10px. Essa conversão facilita o cálculo de medidas no design, pois usar
valores como 1.6rem agora é equivalente a 16px, tornando os cálculos mais intuitivos (basta multiplicar os valores de rem
por 10).
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando a página inteira mudando uma única coisa (2/7) 513

Por que isso facilita a responsividade?

Ao definir o tamanho base da fonte no html, conseguimos ajustar toda a escala de proporções de uma página de forma
centralizada. Isso significa que, ao alterar esse valor, você consegue ajustar o tamanho de todos os elementos que estão
usando rem sem ter que modificar cada elemento individualmente.
Por exemplo:
• Se você definir uma fonte base no html de 62.5% (1rem = 10px), ao utilizar rem em qualquer lugar do seu CSS (como largura,
padding, etc.), o cálculo será muito mais direto.
• Se depois quiser aumentar a escala da página para telas maiores ou menores, você só precisa alterar o valor de font-size no
html para ajustar tudo de uma vez.

Aplicando a regra font-size: 56.25%:

• Neste caso, a nova base será:

16px×0.5625=9px16px \times 0.5625 = 9px16px×0.5625=9px
Agora, 1rem = 9px, o que significa que o cálculo para rem mudará, mas ainda é uma escala facilmente ajustável.

Vantagens dessa abordagem para a responsividade:

• Escalabilidade global:
• Ao definir um tamanho base para o html, você pode facilmente escalar o layout com base no tamanho da tela ou no tipo de
dispositivo. Isso pode ser feito ajustando apenas o font-size do html em diferentes media queries, sem ter que tocar em
outras partes do CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando a página inteira mudando uma única coisa (3/7) 514
• Consistência:
• Com essa técnica, ao usar rem em toda a página (como para tamanhos
de imagens, larguras de contêineres, margens, etc.), tudo será relativo
ao tamanho base da fonte definido no html. Isso cria uma consistência
no comportamento responsivo da página.

• Facilidade de cálculo:
• Definindo a base como 10px (com 62.5%), torna os cálculos no CSS mais
intuitivos. Um valor como 1.6rem é 16px, 2rem é 20px, e assim por
diante, facilitando o desenvolvimento sem precisar de muitas
conversões mentais ou manuais.

No caso dos exemplos mencionados anteriormente:

• .img-conteudos utiliza vw, uma unidade que depende da largura da

janela de visualização.
• .container-oquefalam utiliza rem para as margens.

Se aplicarmos a regra de font-size no html, como o código ao lado:

Isso significa que qualquer valor em rem em elementos como

.container-oquefalam será calculado com base nessa unidade de
10px. Portanto, valores como 8.6rem (das margens laterais) serão
calculados assim:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando a página inteira mudando uma única coisa (4/7) 515
Se, por acaso, decidirmos alterar o font-size do html em uma media query para tornar o layout mais compacto em dispositivos
menores, todos os valores baseados em rem se ajustarão automaticamente, sem necessidade de modificar cada elemento
manualmente.

Conclusão:
A definição do tamanho de fonte no html com percentuais como 62.5% ou 56.25% permite que você trabalhe com unidades relativas
como rem de forma mais simples e consistente em toda a página. Isso facilita a criação de layouts responsivos, pois ao mudar apenas o
valor do font-size no html, você consegue ajustar o layout globalmente, enquanto elementos específicos, como .img-conteudos ou
.container-oquefalam, herdam essas mudanças automaticamente, simplificando o processo de design responsivo.

Alterações no nosso site - Seção O que falam.

Antes de adicionarmos as estruturas novas na media query de 1035, precisamos fazer algumas alterações no nosso arquivo html e
[Link].

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando a página inteira mudando uma única coisa (5/7) 516
Agora sim podemos alterar as primeiras estruturas do nosso Verificamos as próximas estruturas que estão gerando algum
media query com valor de 1035, vamos começar utilizando 50% tipo de "quebra" no nosso site, além dos conteúdos gratuitos e
no font-size do html e também as estruturas que adicionamos o que falam, a nossa seção do Rodapé também terá algumas
anteriormente na query 1160, vamos passar para essa nova: estruturas reestilizadas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando a página inteira mudando uma única coisa (6/7) 517
Agora sim podemos alterar as primeiras estruturas do nosso media query com valor de 1035, vamos começar utilizando 50% no font-
size do html e também as estruturas que adicionamos anteriormente na query 1160, vamos passar para essa nova:

A classe .container-rodape é a base da estrutura, e as regras aplicadas a ela afetam os elementos dentro deste contêiner. Vamos
entender cada propriedade aplicada aqui:
gap: 3.77vw;
• O gap define o espaçamento entre os elementos internos do contêiner. No caso, o valor 3.77vw está utilizando a unidade vw
(viewport width).
• vw: É uma unidade relativa ao tamanho da largura da janela de visualização (viewport). 1vw é igual a 1% da largura total da janela.
Então, 3.77vw equivale a 3.77% da largura da tela.

justify-content: space-between;
• Essa propriedade é utilizada para alinhamento horizontal de itens em um contêiner flexível (quando o contêiner tem display: flex).
• space-between distribui os itens dentro do contêiner de forma que o primeiro e o último item fiquem nas extremidades, e os
itens restantes sejam distribuídos uniformemente entre eles.
• Isso é útil para garantir que os itens ocupem todo o espaço horizontal disponível no contêiner.

& .logo-footer { width: 13.9vw; }

• & .logo-footer refere-se a um elemento com a classe .logo-footer que está dentro do contêiner .container-rodape.
• width: 13.9vw define a largura da logo como 13.9% da largura da janela de visualização.
• vw aqui novamente se refere à largura da viewport, e define que a logo será 13.9% da largura total da janela.

& .rodape-coluna { width: 39vw; }

• & .rodape-coluna refere-se a um elemento com a classe .rodape-coluna, também dentro do contêiner .container-rodape.
• width: 39vw define a largura da coluna do rodapé como 39% da largura da janela de visualização.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando a página inteira mudando uma única coisa (7/7) 518
Resumo:
• .container-rodape: Este contêiner organiza os itens internos com um espaçamento horizontal de 3.77% da largura da tela e
distribui os itens de forma que o primeiro e o último fiquem nas extremidades.
• .logo-footer: A largura da logo será 13.9% da largura da janela.
• .rodape-coluna: Cada coluna dentro do rodapé terá uma largura de 39% da largura da janela.

Vamos verificar mais 2 pontos de break do nosso site e será as estruturas de 830 e 767. Então já vamos adicionar os novos
arquivos de css, respectivos a cada dimensão e linkar os arquivos no arquivo html. E vamos já adicionar uma alteração no arquivo
de 830.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Hero (1/4) 519
A próxima estrutura de responsividade que vamos criar, são exemplos de mobiles "deitados", dimensões em modelo de retrato.
Então vamos criar os layout para dimensões de 767px, dentro do arquivo criado na aula anterior com essa dimensão.
Adicionaremos o font-size respectivo desse tamanho de tela.

Vamos deixar criado o arquivo para o próximo breakpoint no valor de 480px, que é a dimensão de Mobile. E já linkar esse
arquivo ao arquivo html.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Hero (2/4) 520
Nesse momento vamos criar nosso layouts responsivos da menor dimensão (480px) para aplicar na media query 767px, porque
dessa forma já garantimos responsividade nos dois cenários de algumas estruturas. Então vamos começar com a seção Hero da
nossa Home da Hashtag, e a primeira propriedade que vamos adicionar na media query de 767px será:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Hero (3/4) 521
Continuando na construção do nosso layout responsivo, vamos alterar a nossa imagem de fundo e alinhar mais algumas
estruturas da nossa seção Hero, com a seguinte estrutura:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Hero (4/4) 522
Para finalizar o layout da seção Hero para dimensões de 767px, vamos adicionar um tamanho máximo de largura do container
e também um alinhamentos dos textos e do título dessa seção.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Conteúdos Gratuitos (1/6) 523
Dentro da seção Conteúdos Gratuitos começar estruturando os elementos em formato de colunas, e também vamos utilizar o
link de imagem([Link]
[Link]) para carregar a imagem de forma mais eficiente ao fundo da nossa seção, e para que essa estrutura fique com o
layout correto vamos utilizar a seguinte estrutura de propriedades:

Explicando o código acima:

background-image:
• Essa propriedade define uma imagem de fundo para a seção.
• No caso, a imagem está sendo carregada a partir de um link externo, essa URL é o caminho da imagem que será exibida
como o fundo da .secao-conteudos.

background-position-y: bottom;:
• Essa propriedade controla onde a imagem de fundo será posicionada verticalmente.
• O valor bottom indica que a imagem será alinhada na parte inferior da seção. Ou seja, a parte de baixo da imagem ficará
encostada na parte de baixo da seção.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Conteúdos Gratuitos (2/6) 524
background-size: auto;:
• Essa propriedade define como a imagem de fundo será redimensionada.
• O valor auto significa que a imagem não será redimensionada manualmente. Ela manterá o seu tamanho original e o
navegador decidirá o melhor ajuste com base no espaço disponível.

background-color: white;:
• Esta propriedade define a cor de fundo da seção.
• O valor white indica que, além da imagem, a seção terá um fundo branco. Isso é útil para quando a imagem não cobre toda
a área da seção, ou se a imagem tiver partes transparentes.

padding-bottom: 1rem;:
• O padding é o espaçamento interno da seção.
• padding-bottom: 1rem adiciona um espaço de 1rem (1 vez o tamanho da fonte base) na parte de baixo da seção, criando um
"respiro" entre o conteúdo da seção e o seu limite inferior.

Agora, dentro da classe .secao-conteudos, temos uma regra aninhada para .container-conteudos. Isso indica que o estilo vai
aplicar as propriedades a um elemento com a classe .container-conteudos que está dentro da .secao-conteudos. Essa é uma
funcionalidade comum em pré-processadores como SASS.

flex-flow: column;:
• Esta propriedade faz parte do sistema Flexbox, que é uma maneira moderna de organizar e alinhar elementos em uma
página.

flex-flow: column; indica que os itens dentro do contêiner .container-conteudos serão organizados em uma coluna
vertical. Ou seja, cada item aparecerá um embaixo do outro, ao invés de lado a lado.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Conteúdos Gratuitos (3/6) 525

Para posicionarmos corretamente as estruturas de "caixas" dos elementos Treinamentos e Programação, vamos alinha-los ao
centro.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Conteúdos Gratuitos (4/6) 526
Agora vamos alterar o posicionamentos dos nossos elementos, pois a nossa imagem ficará abaixo das nossas colunas de
Treinamentos e Programação, e também vamos adicionar um espaçamento com a propriedade gap:

Para finalizar a nossa seção Conteúdos Gratuitos, vamos alterar o posicionamento da nossa imagem, para que ela fique na
posição correta referente a nossa imagem de fundo e também vamos adicionar um layout novo ao título dessa seção.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Conteúdos Gratuitos (5/6) 527

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Conteúdos Gratuitos (6/6) 528
Dentro da nossa media query de 767px, podemos adicionar propriedades que sejam utilizados no escopo global, ou seja,
assim como adicionamos um valor diferente para o html que irá ser aplicado em todo o site, podemos utilizar estruturas
como padding de todas as seções da página e outras propriedades.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Diferenciais (1/3) 529
Agora na seção Diferenciais vamos alinhar os elementos e formato de coluna e adicionar um espaçamentos entre as estruturas:

As próximas estruturas a serem alteradas será o título da nossa seção e os textos:

A estrutura aninhada faz parte de uma seção chamada .secao-diferenciais. Dentro dela, as propriedades aplicam estilos a
elementos internos de maneira organizada. Aqui está um resumo do que cada parte faz:
• .secao-diferenciais .container-diferenciais .caixa-titulo-diferenciais .diferenciais-p:
• O texto dentro do parágrafo .diferenciais-p herda o alinhamento de texto da seção ou elemento pai (text-align: inherit).
• .secao-diferenciais .container-diferenciais .caixa-restante-diferenciais .bloco-itens-diferenciais:
• Os itens dentro do bloco .bloco-itens-diferenciais são organizados em coluna e têm um espaçamento (gap) de 7.63rem entre
eles.
• .secao-diferenciais .container-diferenciais .caixa-restante-diferenciais .diferenciais-h3-empresas:
• O título h3 das empresas está centralizado (text-align: center). DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Diferenciais (2/3) 530
No momento a nossa estrutura de código e seção está da seguinte maneira:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Diferenciais (3/3) 531
O próximo passo é adicionar um novo layout para toda a estrutura de título da página, alinhando o texto, adicionando
espaçamento além do formato dos itens dessa classe e também arrumar o padding das nossas imagens de empresas:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção O que falam (1/4) 532
Na seção O que falam vamos começar com as estruturas de setas, para isso vamos continuar aplicando o conceito de Nesting
no CSS dentro da media query, para que o nosso código estruturado e organizado.

Vamos adicionar um espaçamento entre as imagens e um overflow:hidden.

A propriedade overflow: hidden em CSS é usada para controlar como o

conteúdo que ultrapassa os limites de um elemento é tratado. Quando
aplicada a uma imagem (ou qualquer outro conteúdo), ela esconde
qualquer parte da imagem que exceda o tamanho do contêiner definido.
Isso é útil quando você deseja exibir apenas uma parte específica da
imagem sem que ela transborde.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção O que falam (2/4) 533
Para ajustar o tamanhos das nossas imagens ao diminuir a dimensão da nossa tela, vamos aplicar a seguinte propriedade e
calcular o valor do tamanho das nossas imagens:

Essa linha de CSS está utilizando a propriedade min-width para definir a largura
mínima de um elemento com a classe .oquefalam-carrossel-img. A largura mínima
é calculada com a função calc() duas vezes de maneira aninhada, o que pode
parecer um pouco confuso. Vamos decompô-la:

calc(): A função calc() permite realizar cálculos matemáticos diretamente em CSS

para definir valores como largura, altura, margens, etc. Nesse caso, ela está sendo
usada para calcular a largura mínima do elemento.

100% - 1.82vw:
• 100% se refere à largura total do contêiner pai do elemento. É uma maneira de
dizer que o valor base para o cálculo é a largura total do elemento pai.
• 1.82vw: A unidade vw significa "view width" e corresponde a 1% da largura da
viewport (tela visível). Portanto, 1.82vw é 1.82% da largura da tela.
• O cálculo 100% - 1.82vw está subtraindo 1.82% da largura da tela a partir da largura
total do contêiner pai, provavelmente para criar algum tipo de espaçamento ou
ajustar a largura em relação à tela.

Dividido por 2 (/ 2):

• Após calcular o valor de 100% - 1.82vw, esse valor total é dividido por 2. Isso pode
está relacionado ao layout do carrossel, como se fosse dividindo o espaço
disponível entre dois itens.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção O que falam (3/4) 534
Nesse momento vamos ajusta o nosso título da seção e podemos utilizar de referência a seção Conteúdos Gratuitos, então para
essa estrutura vamos adicionar as seguintes propriedades:

Feito essas alterações, podemos perceber que nossos elementos de seta, desalinharam. Então vamos precisar nesse momento
adicionar um elemento div para encapsular todos os elementos de imagens dessa seção. E atribuir novas propriedades para
corrigir o layout:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção O que falam (4/4) 535

Para finalizar a nossa seção O que falam, vamos alinhas nossas setas com as seguintes propriedades:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Na mídia (1/2) 536
Para essa seção Na mídia vamos aplicar os seguintes estilos e vamos explicar cada
uma das propriedades aplicadas:

Explicação Detalhada
1. & .container-namidia
• O & refere-se ao elemento pai, que é a classe .container-namidia. Isso significa que
todos os estilos definidos dentro dessa estrutura se aplicam a elementos que
estão dentro de um container com essa classe.

2. & .namidia-titulo
• Aqui estamos selecionando um elemento filho chamado .namidia-titulo dentro de
.container-namidia.
• min-width: 35.71rem;: Define a largura mínima do título para 35.71 rem,
garantindo que ele não fique menor que esse valor. O uso de rem é uma unidade
relativa que ajuda a manter a responsividade em diferentes tamanhos de tela.

3. & .namidia-links
• Seleciona um elemento filho chamado .namidia-links dentro de .container-
namidia.
• flex-flow: row wrap;: Define que os itens dentro desse container vão ser dispostos
em uma linha e, se não couberem, vão "quebrar" para a linha seguinte. Essa é uma
maneira de usar o Flexbox para controlar o layout.
• justify-content: end;: Alinha os itens dentro de .namidia-links para o final do eixo
principal (ou seja, à direita, se a direção for horizontal).
• gap: 1rem;: Adiciona um espaço de 1 rem entre os itens, ajudando a evitar que eles
fiquem muito próximos uns dos outros. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Na mídia (2/2) 537

4. & a
• Aqui estamos definindo estilos para os links (<a>) que estão dentro de .namidia-links.
• height: 2.86rem;: Define a altura dos links para 2.86 rem, garantindo que todos os links tenham a mesma altura.

5. & img
• Seleciona as imagens (<img>) que estão dentro dos links (<a>).
• height: 100%;: Faz com que a altura das imagens ocupe 100% da altura do link pai. Isso significa que as imagens vão se ajustar
automaticamente à altura definida para os links, mantendo a proporção.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Blog (1/2) 538
Para essa seção vamos implementar apenas algumas propriedades para melhorarmos o layout, mesmo que na menor
dimensão essa seção não "quebre".
grid-template-rows: auto;
• Essa linha define o número de linhas e as alturas para o grid dentro do container .container-
blog.
• O valor auto faz com que as linhas do grid tenham a altura ajustada automaticamente de
acordo com o conteúdo. Ou seja, cada linha terá o tamanho necessário para acomodar o
conteúdo interno.

grid-template-columns: 1fr;
• Aqui, estamos definindo o número de colunas e o tamanho de cada uma.
• 1fr significa que o grid terá uma coluna que ocupará 1 fração do espaço disponível. Como só há
uma coluna, ela ocupará todo o espaço horizontal do container.

padding: 3.12rem;
• O padding é o espaço interno do container, ou seja, a distância entre o conteúdo interno e as
bordas do container.
• Nesse caso, o valor de 3.12rem aplica essa distância em todos os lados do container (superior,
inferior, esquerdo e direito). A unidade rem é relativa ao tamanho da fonte raiz (normalmente
16px), o que ajuda a manter a responsividade.

padding-top: 6.1rem;
• Este sobrescreve o valor de padding-top (espaçamento superior), que foi inicialmente definido
como 3.12rem na linha anterior. Agora, o espaçamento superior do container é 6.1rem,
enquanto os outros lados ainda mantêm o 3.12rem. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Alterando o Layout da Seção Blog (2/2) 539

max-width: 78.57rem;
• Define a largura máxima do container .container-blog. Isso significa que, mesmo que o
espaço da tela seja muito grande, o container não vai ultrapassar 78.57rem de largura.
• O uso de uma largura máxima é comum para evitar que o conteúdo se espalhe demais em
telas grandes, mantendo a legibilidade e o design compacto.

Explicação Geral

Esse código define um layout de blog usando CSS Grid para organizar o conteúdo em uma
única coluna e permitir que as linhas se ajustem ao conteúdo. Ele também garante um
espaçamento interno confortável ao redor do conteúdo (com mais espaço no topo), e limita
a largura máxima do container para garantir que o design permaneça legível e organizado
em telas maiores.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando o Layout da Media Query 767 a 480 (1/5) 540
Na seção Como Ajudar vamos apenas alterar a propriedade width para max-width no nosso arquivo [Link] (global) para que o
layout dessa seção já fique correto, sem precisar mexer em outras estruturas:

Na seção Minicurso não vamos precisar modificar nada do nosso layout ela já está responsiva tanto para dimensão de 767 quanto
480px.

A última seção que vamos alterar para responsividade da dimensão de 767 será a seção Rodapé, e para iniciar vamos ter que
alterar o arquivo [Link], pois vamos ter que utilizar um layout de grid ao invés de flex.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando o Layout da Media Query 767 a 480 (2/5) 541
O Grid Layout e o Flexbox são ambos sistemas de layout no CSS, mas têm diferentes pontos fortes e são usados em cenários
distintos. Quando você menciona que deseja colocar "três colunas em três linhas", a razão pela qual o Grid é mais adequado que
o Flexbox está relacionada à forma como cada um lida com o layout bidimensional versus unidimensional.

Diferença Fundamental: Grid vs. Flexbox

• CSS Grid: Foi projetado para trabalhar com layouts bidimensionais. Ou seja, ele permite organizar os elementos tanto em
linhas quanto em colunas ao mesmo tempo. Isso dá ao Grid um controle muito preciso sobre a distribuição dos elementos em
todo o espaço disponível, permitindo facilmente criar uma estrutura de várias colunas e linhas.
• Flexbox: Foi projetado para layouts unidimensionais, o que significa que ele se concentra em organizar elementos em uma
única linha ou uma única coluna de cada vez. Embora o Flexbox seja flexível, ele não tem a capacidade intrínseca de
manipular ambos os eixos (linhas e colunas) simultaneamente da mesma forma que o Grid.

Por que usar Grid para três colunas em três linhas?

Se você deseja criar uma estrutura de três colunas que se transformam em três linhas, o CSS Grid permite isso de maneira
natural e intuitiva, porque ele foi projetado para lidar com áreas no layout, não apenas com o fluxo de elementos.

Se tentarmos fazer o mesmo layout com Flexbox, o comportamento seria diferente. Flexbox vai organizar os elementos em uma
única linha (ou coluna), dependendo do fluxo definido, mas não tem a capacidade de organizar o layout em linhas e colunas ao
mesmo tempo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando o Layout da Media Query 767 a 480 (3/5) 542

Com o Flexbox:
• Os itens serão dispostos em uma linha horizontal até preencherem o espaço
disponível.
• Se não houver mais espaço, eles irão "quebrar" para a linha seguinte, mas você
não terá controle total sobre a quantidade de itens por linha, pois o Flexbox se
ajusta automaticamente ao conteúdo.

Problema: Flexbox não permite definir diretamente o número de colunas e

linhas ao mesmo tempo, então o comportamento não será o mesmo de uma
estrutura controlada em grelha, como o Grid.

Resumo: Quando usar Grid e quando usar Flexbox

• Use Grid quando você precisar de um layout bidimensional, onde é
importante ter controle tanto sobre colunas quanto sobre linhas ao mesmo
tempo. Ele é ideal para layouts mais complexos, como grades, galerias, ou uma
disposição fixa de elementos.
• Use Flexbox para layouts unidimensionais, onde os elementos devem ser
organizados em uma linha ou uma coluna. É mais adequado para layouts
flexíveis, como barras de navegação, alinhamento de elementos, ou
distribuição uniforme de espaço entre itens.

Então dentro do arquivo [Link] vamos alterar o layout que utilizamos dentro
desse container:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando o Layout da Media Query 767 a 480 (4/5) 543
Agora no arquivo 767, vamos adicionar as últimas propriedades que serão aplicadas dentro da seção Rodapé, e vamos explicar
cada uma delas detalhadamente:

.container-rodape
Essa classe define o container do rodapé usando CSS Grid para organizar o
conteúdo. Vamos quebrar suas propriedades:

• grid-template-columns: repeat(2, auto);

• Aqui, estamos criando duas colunas dentro do container, cada uma com largura
automática (auto).

• repeat(2, auto) significa que o grid terá duas colunas, e o tamanho delas será
ajustado de acordo com o conteúdo de cada uma.

• justify-items: center;
• Alinha os itens dentro de cada célula do grid horizontalmente ao centro. Isso
significa que todos os elementos dentro do grid serão centralizados em suas
respectivas colunas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando o Layout da Media Query 767 a 480 (5/5) 544
.rodape-coluna
Essa classe se refere a uma coluna específica dentro do rodapé. Veja as
propriedades:

• grid-column: 1;
• Coloca o elemento na primeira coluna do grid.

• grid-row: 1 / span 3;
• Define que o elemento começa na linha 1 e se estende por 3 linhas. Ou seja,
ele ocupará o espaço de 3 linhas no grid, sendo ideal para um conteúdo que
precisa se estender verticalmente, como um menu ou informações
detalhadas.

• width: auto;
• A largura é ajustada automaticamente com base no conteúdo da coluna.
Não há um valor fixo aqui, permitindo que o layout se ajuste
dinamicamente.

.rodape-container-copyright
Essa classe se refere à seção do rodapé que contém as informações de
copyright, geralmente posicionada na parte inferior do rodapé.

• grid-row: 3;
• Coloca este elemento na terceira linha do grid. Isso significa que o conteúdo
de copyright será alinhado na parte inferior do rodapé, independentemente
de quantas colunas estejam definidas. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Última Media Query para Seção Hero e Conteúdos (1/2) 545
Finalizado a responsividade da dimensão 767, vamos A seção Hero já está com o layout pronto, devido as
começar a estilização da última media query do nosso site alterações que fizemos anteriormente em outras queries.
que será no arquivo de 480px. Nesse momento vamos Então vamos pular para seção conteúdo que analisando a
começar com os layout das seções Hero e Conteúdos dimensão de 480 reparamos que algumas estruturas não
Gratuitos. estão com o layout interessante para o ususário.

Para evitarmos que a nossa navegação do cabeçalho fique

"quebrando" o nosso site, vamos utilizar uma propriedade
dentro do arquivo 767 para ela, pois vamos criar o layout
responsivo depois que terminarmos todas as seções.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Última Media Query para Seção Hero e Conteúdos (2/2) 546
• .container-conteudos: Este é o container principal que
agrupa os elementos de conteúdo, como imagens e caixas de
cursos.

• .img-conteudos: A largura da imagem dentro dessa classe é

definida para ocupar 100% do espaço disponível no container.
Isso garante que a imagem se ajuste à largura do seu
container, sendo útil para layouts responsivos.

• .caixas-cursos-hashtag:
• O Flexbox é utilizado para organizar os itens de forma vertical,
ou seja, os elementos são dispostos em uma coluna, um
abaixo do outro.
• O align-self: center; alinha esse container no centro do eixo
vertical do Flexbox pai, centralizando os itens.

• .circulo-logo-curso: Essa classe define um círculo ou

quadrado com largura e altura fixas de 6rem. O espaçamento
interno garante que o conteúdo (como um ícone ou logo)
fique bem centralizado dentro do círculo, proporcionando
equilíbrio visual.

• Links dentro de .gratuito-link-lista: Os links são estilizados

para ter espaçamento interno nas direções horizontal e
vertical, tornando-os visualmente mais largos e fáceis de
clicar. Isso melhora a acessibilidade e a experiência de usuário. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 Módulo 5 – Desafio 2 – Última Media Query para Seções Diferenciais, O que falam e
000
Na mídia (1/4)
547
Vamos analisar as próximas seções, com relação a seção Diferenciais ao diminuir a dimensão da tela, podemos observar que não
vamos precisar alterar o layout, pois a seção está bem estruturada e sem "quebras".

Já na seção Diferenciais, existem alguns elementos precisamos mexer para que sua estrutura fique mais organizada e agradável.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 Módulo 5 – Desafio 2 – Última Media Query para Seções Diferenciais, O que falam e
000
Na mídia (2/4)
548
.container-oquefalam
• Esse é o container principal para a seção. Ele possui uma margem lateral de 5.6rem à direita e à esquerda, criando espaço ao redor do
conteúdo, fazendo com que ele não toque nas bordas da página.

.oquefalam-titulo
• Dentro do container principal, essa classe provavelmente estiliza o título da seção "O que falam".
• O uso de flex-flow: column; organiza o conteúdo dessa área em uma coluna, ou seja, os elementos serão empilhados verticalmente.
• O max-width: none; remove qualquer limitação na largura máxima, permitindo que o título possa se expandir conforme necessário.

.oquefalam-carrossel-imagens
• Essa classe agrupa as imagens que fazem parte de um carrossel de depoimentos ou feedback. Provavelmente exibe várias imagens
em um formato de slider ou carrossel.

.oquefalam-seta
• Essa classe é utilizada para definir o tamanho das setas de navegação do carrossel.
• O width: 5rem; ajusta a largura da seta para 5rem, garantindo que as setas sejam suficientemente grandes para serem vistas e
clicadas, facilitando a navegação no carrossel.

.oquefalam-container-imgs
• Esse container envolve as imagens dentro do carrossel. Ele provavelmente serve como um agrupador para controlar a disposição das
imagens.

.oquefalam-carrossel-img
• Dentro do container de imagens, essa classe controla o tamanho de cada imagem individual no carrossel.
• O min-width: 100%; garante que cada imagem ocupe 100% da largura do container, ou seja, apenas uma imagem é exibida por vez
no carrossel, ocupando todo o espaço disponível. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 Módulo 5 – Desafio 2 – Última Media Query para Seções Diferenciais, O que falam e
000
Na mídia (3/4)
549
Atualmente, você está usando max-width em suas folhas de estilo, o que significa que o CSS correspondente será aplicado quando a
largura da tela for menor ou igual a esses valores. Isso é útil para criar layouts responsivos para dispositivos menores, como tablets e
smartphones.
Se você quiser usar min-width em vez de max-width, o comportamento será o inverso: o CSS será aplicado quando a largura da tela
for maior ou igual ao valor especificado. Isso é útil para definir estilos que se aplicam a telas maiores, como desktops ou monitores
widescreen.

Estrutura com min-width

Se você decidir usar min-width, o código ficaria assim:

Diferença e Funcionamento
• Com max-width: O estilo é aplicado até que a tela atinja aquele tamanho máximo. Por exemplo, se você usa (max-width: 767px), o
estilo se aplicará a dispositivos com largura até 767px, ou seja, telas menores, como smartphones.
• Com min-width: O estilo é aplicado a partir de um certo tamanho de tela. Usando (min-width: 767px), o estilo se aplica somente em
telas maiores que 767px, ou seja, tablets e computadores. Telas menores que isso não aplicariam esse estilo.
Quando usar min-width
• Abordagem desktop-first: Se você está focando em criar um layout para telas maiores e quer garantir que ele funcione bem em
dispositivos desktop antes de se preocupar com versões menores (como tablets e smartphones), então você começa definindo estilos
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
para telas maiores e usa min-width para ajustar os estilos conforme o dispositivo fica menor.
 Módulo 5 – Desafio 2 – Última Media Query para Seções Diferenciais, O que falam e
000
Na mídia (4/4)
550
Agora para a seção Na mídia vamos utilizar as seguintes propriedades para criar o layout responsivo do 480px.

.container-namidia
Este é o container principal da seção "Na mídia". Dentro dele, são aplicadas as seguintes regras:
• flex-flow: row wrap;: Define que os itens dentro do container serão dispostos em uma linha
horizontal (row) e, se o espaço não for suficiente, eles vão automaticamente para a linha
seguinte (wrap). Isso garante que o conteúdo seja responsivo, se ajustando ao espaço
disponível.
• justify-content: center;: Centraliza os itens ao longo do eixo horizontal, colocando-os no meio
da área disponível.

.namidia-titulo
Essa classe estiliza o título da seção "Na mídia". Aqui, o Flexbox é novamente utilizado:
• flex-flow: row wrap;: Similar ao container principal, os elementos dentro do título serão
dispostos horizontalmente e poderão quebrar em múltiplas linhas, se necessário.
• justify-content: center;: Centraliza o título no centro da tela ou do container em que ele está
inserido.

.namidia-links
Este container agrupa os links de mídia ou redes sociais.
Links (& a)
• height: 3.86rem;: Define uma altura fixa para os links, padronizando o tamanho dos elementos
de link para torná-los visualmente uniformes.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a última Media Query (1/8) 551
Na seção Blog vamos adicionar as seguintes propriedades para gerar o layout responsivo:

.secao-blog
Este é o container principal da seção "blog". Dentro dela, aplicam-se as seguintes regras:
Dentro dela, aplicam-se as seguintes regras:

• padding-top: 7.63rem;: Adiciona um espaçamento de 7.63rem na parte superior da

seção. Isso cria um afastamento entre o conteúdo anterior e o início da seção "blog",
provavelmente para separar visualmente as seções ou para dar espaço para outros
elementos, como uma barra de navegação fixa.

.container-blog
Dentro da seção "blog", existe um outro container que agrupa o conteúdo principal do blog.

• padding: 2.5rem;: Aplica um espaçamento interno de 2.5rem em todos os lados do

container. Isso cria um acolchoamento dentro do container, afastando o conteúdo das
bordas para dar mais espaço e melhorar a legibilidade.

• padding-top: 7.63rem;: Semelhante à regra aplicada na .secao-blog, adiciona um grande

espaçamento superior dentro do container. Isso pode garantir que o conteúdo do blog
tenha bastante espaço no topo, mantendo uma distância consistente entre os elementos
da página.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a última Media Query (2/8) 552

.caixa-blog-h2
Dentro do container do blog, há um elemento estilizado que provavelmente contém o título
ou subtítulo do blog. As regras aplicadas são:

• width: 78.125vw;: Define a largura do elemento como 78.125% da largura da janela de

visualização (viewport width). Isso faz com que o título ocupe a maior parte da tela,
ajustando-se automaticamente conforme o tamanho da janela do navegador.

• text-align: center;: Centraliza o texto horizontalmente dentro do elemento. Isso garante

que o título (ou outro conteúdo dentro do elemento) fique no centro da área disponível,
proporcionando uma aparência mais equilibrada.

Resumo
Esse CSS organiza a seção "blog" com bastante espaçamento na parte superior, tanto na
seção geral quanto dentro do container do blog, proporcionando uma separação clara entre
o conteúdo. O uso de padding garante que o conteúdo tenha espaço e não fique apertado
nas bordas. Além disso, o título do blog dentro de .caixa-blog-h2 é configurado para ter uma
largura adaptável à tela (utilizando porcentagem da viewport) e é centralizado
horizontalmente para dar uma aparência limpa e alinhada ao centro.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a última Media Query (3/8) 553
Continuando com a seção Como Ajudar podemos Agora para a media query 480, vamos aplicar as seguintes estruturas para a
verificar que está ocorrendo uma quebra na seção Como Ajudar:
seção , pois não alteramos o seu padding dentro
do layout responsivo de 767px, então devemos
voltar ao arquivo 767 e adicionar padding: 0 para
essa seção e dessa maneira vamos ter corrigido o
espaçamento.

.secao-sec-laranja, .secao-sec-cinza - Aqui, estão sendo estilizadas duas

classes ao mesmo tempo. As regras aplicadas a ambas são:
• padding: 4.88rem 2rem;: Esta propriedade adiciona espaçamento
interno (padding) de 4.88rem na parte superior e inferior e 2rem nas
laterais (direita e esquerda) das seções. Isso garante que o conteúdo
dentro de ambas as seções não fique colado nas bordas e tenha espaço
adequado, melhorando a legibilidade e a estética.
.caixa-comoajudar-h2 - Dentro dessas seções, existe um elemento
específico que provavelmente contém um título ou cabeçalho relacionado a
como ajudar.
• text-align: center;: Essa propriedade centraliza o texto horizontalmente
dentro do elemento. Isso significa que, independentemente do tamanho
do texto, ele será alinhado ao centro da área onde está contido,
proporcionando uma apresentação visual equilibrada e focada.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Finalizando a última Media Query (4/8) 554
Agora vamos corrigir a seção minicurso e vamos utilizar uma estrutura parecida com o que fizemos com o layout de rodapé da
dimensão anterior:

Esse código CSS estiliza uma seção chamada "Minicurso" e seus elementos internos. Vamos analisar cada parte em detalhes.
.container-minicurso
Esse é o container principal para a seção "Minicurso", que agrupa todos os elementos relacionados a essa parte da página.

& h2
Dentro desse container, a regra é aplicada especificamente aos elementos de cabeçalho de nível 2 (h2):
• text-align: center;: Centraliza o texto do cabeçalho no meio do container. Isso proporciona uma apresentação visual
equilibrada, tornando o título mais destacado e fácil de ler.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a última Media Query (5/8) 555

.form-minicurso
Esse elemento representa o formulário do minicurso, onde os usuários provavelmente se inscrevem ou interagem de alguma
forma. As regras aplicadas a ele são:

• grid-template-columns: 1fr;: Define que o formulário terá uma única coluna, ocupando a largura total do container. A
unidade fr (fraction) significa que a coluna ocupará uma fração do espaço disponível. Neste caso, como há apenas uma
coluna, ela usará toda a largura disponível.

• gap: 2.5rem;: Define um espaço de 2.5rem entre os elementos filhos dentro do grid. Isso cria um afastamento entre os
campos do formulário, evitando que eles fiquem colados uns nos outros e proporcionando uma aparência mais organizada.

• max-width: 350px;: Limita a largura máxima do formulário a 350 pixels. Isso impede que o formulário fique excessivamente
largo em telas grandes, garantindo que ele permaneça em um tamanho que seja fácil de usar e ler, especialmente em
dispositivos móveis.

• align-self: center;: Centraliza o formulário verticalmente dentro do container pai. Isso é útil quando o container pai tem um
espaço maior do que o necessário para o formulário, garantindo que ele fique alinhado ao centro em relação ao espaço
disponível.

• width: 100%;: Define a largura do formulário para ocupar 100% do espaço disponível dentro do seu container pai, dentro do
limite de max-width. Isso permite que o formulário se expanda em telas menores, garantindo que não haja espaços
desnecessários nas laterais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a última Media Query (6/8) 556
Agora para finalizar vamos estruturar a seção Rodapé.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a última Media Query (7/8) 557
Vamos entender cada parte da estrutura em detalhes:

.container-rodape
Esse é o container principal do rodapé, que organiza todos os elementos que fazem parte dele.

• grid-template-columns: 1fr;: Define a estrutura do grid, estabelecendo uma única coluna que ocupará toda a largura
disponível do container. A unidade fr (fraction) indica que a coluna deve ocupar uma fração do espaço disponível,
permitindo que o conteúdo se ajuste conforme necessário.

• max-width: 40rem;: Limita a largura máxima do container do rodapé a 40rem. Isso é útil para evitar que o rodapé fique
excessivamente largo em telas grandes, ajudando a manter uma apresentação visual equilibrada.

• gap: 4rem;: Define um espaço de 4rem entre os elementos filhos dentro do grid. Esse espaçamento garante que os
componentes do rodapé não fiquem colados uns aos outros, proporcionando uma aparência mais organizada e arejada.

.logo-footer
Esse elemento representa o logotipo que provavelmente está localizado na parte superior do rodapé.

• grid-row: 1;: Especifica que o logotipo deve ocupar a primeira linha do grid. Isso posiciona o logotipo no topo da estrutura do
rodapé.

• width: 14rem;: Define a largura do logotipo como 14rem, garantindo que ele tenha um tamanho específico e não se expanda
além desse limite.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a última Media Query (8/8) 558
.rodape-coluna
Essa classe agrupa elementos que representam as diferentes colunas ou seções do rodapé.

• grid-row: 2;: Define que essa coluna ocupa a segunda linha do grid, posicionando-a logo abaixo do logotipo.

• align-items: center;: Alinha verticalmente os itens dentro dessa coluna ao centro, melhorando a apresentação visual.

.subsecao-rodape, .subsecao-cursosonline, .subsecao-assistente, .rodape-div-iconelink

Essas classes representam diferentes seções ou agrupamentos de links e informações no rodapé.

• align-items: center;: Esta regra garante que os elementos filhos dentro dessas sub-seções sejam alinhados verticalmente ao
centro.

• text-align: center;: Centraliza o texto horizontalmente dentro dessas seções, garantindo que o conteúdo textual seja
visualmente equilibrado e acessível.

.rodape-container-copyright
Esse elemento é geralmente onde as informações de direitos autorais são exibidas.

• grid-column: auto;: Permite que o container ocupe a coluna automaticamente conforme definido na estrutura do grid.
Neste caso, como o grid possui apenas uma coluna, essa propriedade pode ser redundante.

• grid-row: 4;: Especifica que o container de direitos autorais ocupa a quarta linha do grid. Isso significa que ele será
posicionado na parte inferior do rodapé.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a Navegação Mobile (1/7) 559
Agora vamos começar o layout do nosso cabeçalho para dimensões mobile, primeiramente vamos substituir a imagem de
logo para a mesma imagem que utilizamos no rodapé, pois ela possui mais qualidade. Porém vamos precisar alterar o seu
estilo dentro do arquivo [Link], pois a imagem do rodapé é maior do que a do cabeçalho.

Cotinuando os ajustes da imagem de logo, vamos adicionar também uma estrutura no arquivo de dimensão 1035px, alterando
o tamanho do padding e tamanho da imagem. E também vamos adicionar a propriedade width na tela 767px.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a Navegação Mobile (2/7) 560
No arquvio [Link] vamos ajustar nossa lista dentro do
elemento navegação para que o alinhamento dos itens
seja no valor de "start" e os elementos para direita.

Nesse momento vamos adicionar os ícones da nossa

navegação dentro do nosso arquivo html.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a Navegação Mobile (3/7) 561
No arquivo de dimensão 767 vamos adicionar .cabecalho
as seguintes estruturas para criarmos o design Este é o container principal do cabeçalho, que contém diferentes elementos,
responsivo. como imagens, navegação, e ícones.

& img
Esta regra aplica-se a qualquer imagem dentro do container .cabecalho.
• width: 10rem;: Define que todas as imagens no cabeçalho terão uma largura
de 10rem. Isso garante que as imagens sejam exibidas com um tamanho
consistente, o que pode ser útil para logos ou outros elementos visuais
importantes.

& nav
Essa regra se aplica à navegação (menu) dentro do cabeçalho.
• display: none;: Oculta o menu de navegação. Isso pode indicar que a
navegação será escondida por padrão, provavelmente para ser exibida
apenas em certas situações (como quando o menu for acionado em
dispositivos móveis).

& .nav-icones
Esta classe é aplicada a um container que contém os ícones de navegação,
como um ícone de menu ou outros ícones relacionados à navegação.
• display: block;: Faz com que o container de ícones de navegação seja exibido
como um bloco visível. Isso pode ser para dispositivos móveis, onde a
navegação tradicional está oculta, mas os ícones (como um ícone de menu
"hamburger") são exibidos.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Criando a Navegação Mobile (4/7) 562

& .nav-icone
Esta regra estiliza cada ícone individual dentro do container .nav-icones.
• width: 4rem;: Define que cada ícone terá uma largura de 4rem, proporcionando uma dimensão padronizada para os ícones,
tornando-os grandes o suficiente para interação fácil, especialmente em dispositivos móveis.
• color: #112e61;: Define a cor do ícone como #112e61, um tom de azul escuro. Isso ajuda a manter a consistência visual com a
paleta de cores do site.

&.nav-icone--fechar
Esta classe aplica-se a um ícone específico de fechamento, que pode ser usado para fechar o menu de navegação.
• display: none;: Oculta o ícone de fechamento por padrão. Ele pode ser exibido apenas quando o menu estiver aberto,
oferecendo uma maneira de o usuário fechar o menu. Isso sugere que a navegação pode ter um comportamento dinâmico,
como a exibição de um ícone de para abrir o menu e um ícone de "fechar" que aparece quando o menu está ativo.

E dentro do arquivo [Link] vamos adicionar a propriedade display:none, pois os ícones apenas vão aparecer a partir da
dimensão de 767px.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a Navegação Mobile (5/7) 563
Agora vamos adicionar uma classe ao nosso elemento header, que será responsável por abrir e fechar (aparecer e desaparecer) da
nossa navegação no mobile. Vamos chamar por enquanto de aberto e aplicaremos as seguintes propriedades para atingir esse
layout inicial:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a Navegação Mobile (6/7) 564
& .aberto
A classe .aberto indica que um elemento ou um container (como um menu) está em seu estado "aberto". Isso sugere um
comportamento dinâmico, onde a navegação ou um outro elemento é exibido ou se torna visível ao adicionar essa classe.

& nav
Dentro de .aberto, o elemento nav (que representa a barra de navegação) é estilizado de forma específica para esse estado.

• position: fixed;: O menu de navegação é posicionado de forma fixa na tela. Isso significa que ele fica "preso" à janela de
visualização do navegador e não se desloca com o conteúdo da página ao rolar.
• top: 0; bottom: 0; left: 0; right: 0;: Essas propriedades definem que o menu ocupa toda a altura e largura da tela, estendendo-
se de cima a baixo e de esquerda a direita, cobrindo completamente a área visível. Isso cria um menu em tela cheia.
• display: block;: Garante que o elemento nav seja exibido em bloco, o que o torna visível no estado aberto.
• background-color: white;: Define o fundo do menu como branco, proporcionando um contraste claro com o restante da
página, tornando o menu o foco principal.

& ul
Dentro do nav, a lista desordenada (ul) também recebe estilos específicos.

• flex-flow: column;: Isso organiza os itens da lista (li) em uma coluna, empilhando-os verticalmente. A propriedade flex-flow é
usada para definir a direção do fluxo dos elementos filhos. Aqui, ao usar "column", o menu assume um layout vertical, típico de
menus de navegação de tela cheia.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Criando a Navegação Mobile (7/7) 565
Neste momento, faremos algumas alterações nos valores das propriedades e corrigiremos o local onde vamos adicionar a classe.
Vamos renomear a classe de "aberto" para "nav-aberto" e aplicá-la no elemento body, em vez do header. Além disso, vamos
organizar melhor o estilo dessa estrutura, separando-o do cabeçalho e movendo-o para o arquivo de estilos global, na seção
específica para a dimensão de 767px. Isso tornará o código mais limpo e fácil de manter.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a Navegação Mobile (1/7) 566
Continuando na construção do layout da Navegação Mobile do nosso site, vamos criar uma estrutura para controlar os ícones de
navegação, no menu responsivo vamos exibir ou ocultar ícones dependendo do estado do menu (aberto ou fechado). Abaixo, vou
detalhar cada parte:
& .nav-icones
Este seletor aplica estilos ao container que contém os ícones de navegação.
• z-index: 999;: Define a prioridade de empilhamento do elemento. Um valor de 999 garante
que o container .nav-icones fique sobre outros elementos na página, especialmente útil
quando o menu precisa aparecer por cima de outros conteúdos.

& .nav-icone
Este seletor estiliza os ícones de navegação individuais dentro do container .nav-icones.

&.nav-icone--fechar
Este seletor aplica estilos ao ícone de fechamento do menu, "x" que aparece quando o menu
está aberto.
• display: block;: Garante que o ícone de fechar esteja visível, sendo exibido como um bloco no
layout. Esse comportamento indica que, quando o menu está aberto, o ícone de fechar é
mostrado.

&.nav-icone--menu
Este seletor aplica estilos ao ícone do menu, normalmente representado por três linhas
horizontais (conhecido como "hamburger menu") que aparece quando o menu está fechado.
• display: none;: Faz com que o ícone do menu seja oculto. Isso sugere que quando o menu
está aberto, o ícone de menu é escondido e substituído pelo ícone de fechar.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a Navegação Mobile (2/7) 567
Agora vamos criar a estrutura de layout dos elementos que
possuem a classe contem-filhos, pois são elementos de listas
que possuem uma outra lista de elementos dentro deles e
também vamos utilizar uma classe chamada aberto que fará
o controle de mostrar a lista de elementos ao clicar nessa
estrutura.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a Navegação Mobile (3/7) 568
Essa estrutura CSS utiliza seletores aninhados para aplicar estilos específicos a um item de lista no cabeçalho de um menu,
que pode ter sub-itens (filhos). Abaixo, explico cada parte da estrutura e os conceitos por trás das propriedades:

& .item-lista-cabecalho
Aplica estilos ao item de lista no cabeçalho.

&.contem-filhos
Esse seletor refere-se a um item de lista que contém sub-itens (filhos). Ele estiliza itens de menu que possuem uma lista
aninhada (como um submenu).

&.aberto
Aplica estilos quando o item que contém sub-itens está no estado aberto (geralmente ativado por algum tipo de interação,
como um clique). Aqui estão os conceitos das propriedades aplicadas:

• display: flex;: O item de lista é transformado em um contêiner flexível, permitindo o controle do alinhamento e
distribuição dos sub-itens.

• flex-flow: column;: Define a direção dos itens flexíveis em uma coluna, empilhando os sub-itens verticalmente.

• gap: 2.5rem;: Define o espaçamento entre os sub-itens. Isso adiciona uma distância de 2.5rem entre os elementos filhos.

• align-items: center;: Alinha os sub-itens no centro do eixo transversal (horizontal).

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a Navegação Mobile (4/7) 569
& ul
Aplica estilos à lista não ordenada (ul) que contém os sub-itens (ou seja, a lista aninhada).

• display: flex;: A lista é tratada como um contêiner flexível, permitindo o alinhamento dos itens filhos (li).

• position: static;: Define que o posicionamento da lista não terá nenhuma alteração especial (ela segue o fluxo normal da
página).

• box-shadow: none;: Remove qualquer sombra aplicada anteriormente à lista.

• gap: 1.02rem;: Define o espaçamento entre os itens da lista dentro do contêiner flexível.

• align-items: start;: Alinha os itens filhos (li) ao início do eixo transversal (alinhamento vertical neste caso).

• list-style: disc;: Define o estilo da lista como um ponto (disc) ao lado dos sub-itens.

• background-color: transparent;: Define o fundo da lista como transparente, removendo qualquer cor de fundo.

& li
Aplica estilos aos itens individuais da lista dentro da ul.

• border-bottom: none;: Remove a borda inferior que poderia estar aplicada aos itens da lista.
• padding: 0;: Remove qualquer preenchimento (espaço interno) dos itens da lista.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a Navegação Mobile (5/7) 570
&::after
Esse seletor se refere ao pseudo-elemento ::after, que é frequentemente utilizado para adicionar conteúdo ou decoração
após um elemento.

• content: none;: Remove qualquer conteúdo adicional que possa ter sido adicionado por meio do pseudo-elemento
::after.

Essa estrutura controla o estilo de um item de lista que contém sub-itens, aplicando um layout flexível, alinhando e
espaçando adequadamente os sub-itens, e removendo efeitos visuais como sombras e bordas. Quando o item está no
estado aberto, os sub-itens são exibidos verticalmente, com espaçamento entre eles e sem bordas ou sombra.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a Navegação Mobile (6/7) 571
Para finalizar nossa estrutura de navegação vamos adicionar as últimas propriedades da nossa estrutura:

background-color: rgba(255, 255, 255, 0.95);

Define a cor de fundo do elemento utilizando o modelo RGBA. O RGBA permite definir a
cor utilizando os valores de vermelho (R), verde (G), azul (B) e um valor de opacidade
(A). No caso:

• rgba(255, 255, 255, 0.95) representa a cor branca com uma leve transparência, onde
0.95 é o valor da opacidade (próximo de totalmente opaco).

padding: 5rem;
Define o espaçamento interno do elemento (o espaço entre o conteúdo do elemento e
suas bordas). Neste caso, está sendo aplicado um padding de 5rem em todas as direções
(superior, inferior, direita e esquerda).

backdrop-filter: blur(1.5rem);
Aplica um efeito visual ao fundo do elemento, neste caso, um desfoque de 1.5rem. Esse
valor faz com que qualquer conteúdo por trás do elemento pareça borrado, criando um
efeito de desfoque no plano de fundo do nav.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Finalizando a Navegação Mobile (7/7) 572

max-height: 100%;
No contexto da ul (lista não ordenada), define que a altura máxima da lista
será de 100% da altura do contêiner pai. Isso limita a altura da lista ao espaço
disponível no contêiner.

overflow: auto;
Controla o comportamento do conteúdo que ultrapassa o tamanho do
contêiner. Com o valor auto, as barras de rolagem (scroll) são adicionadas
automaticamente se o conteúdo exceder o limite do contêiner. Aqui é usado
na ul para permitir rolagem se necessário.

padding: 0 5rem;
Aplica um preenchimento lateral (padding horizontal) de 5rem à lista ul,
enquanto o preenchimento vertical (topo e base) é 0. Isso adiciona espaço
nas laterais do conteúdo da lista.

Essas propriedades ajudam a criar um layout de navegação (provavelmente

em um menu aberto) com espaçamento, transparência, rolagem e desfoque
no fundo, tornando a interface visualmente agradável e funcional.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (1/9) 573
O Lighthouse é uma ferramenta integrada ao DevTools do Google Chrome que realiza auditorias automatizadas em páginas
da web. Ele avalia diversos aspectos de um site, incluindo desempenho, acessibilidade, boas práticas, SEO, e progressive web
apps (PWA). Quando o foco é responsividade e otimização, o Lighthouse fornece informações detalhadas que ajudam a
identificar e corrigir problemas, garantindo que o site funcione bem em diferentes dispositivos e ofereça uma boa experiência
ao usuário.

Responsividade no Lighthouse
A responsividade é essencial para garantir que seu site seja exibido corretamente em dispositivos de diferentes tamanhos,
como desktops, tablets e smartphones. O Lighthouse verifica se o site está adaptado para diferentes resoluções de tela e gera
insights sobre os seguintes pontos:

• Viewport configurado: Verifica se o site tem a tag <meta name="viewport">, que define como o conteúdo deve ser ajustado
em telas menores.
• Elementos ajustados ao viewport: Avalia se todos os elementos da página (imagens, vídeos, textos, botões, etc.) são
dimensionados de acordo com a largura da tela, garantindo que o usuário não precise usar o zoom ou rolar horizontalmente
para visualizar o conteúdo.
• Tamanhos de texto legíveis: Avalia se o tamanho das fontes é adequado para dispositivos móveis, permitindo leitura
confortável sem a necessidade de zoom.
• Botões e links acessíveis: Verifica se os elementos clicáveis são suficientemente grandes e têm espaço adequado ao redor
para facilitar a interação em telas de toque.

Otimização do site no Lighthouse

A otimização de um site envolve melhorias de desempenho, acessibilidade e SEO para garantir que ele carregue rapidamente e
ofereça uma boa experiência aos usuários e motores de busca. No contexto do Lighthouse, as auditorias mais relevantes para
otimização são:
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (2/9) 574
Desempenho:
• Carregamento de recursos: O Lighthouse verifica o tempo de carregamento de scripts, imagens e outros recursos. Recursos grandes
ou mal otimizados podem ser uma barreira para um site rápido.
• Tamanho de imagem: A ferramenta sugere o uso de formatos de imagem otimizados e comprimidos (como WebP), bem como o
carregamento das imagens na resolução certa para evitar excessos de tamanho em dispositivos menores.
• Minimização de CSS e JavaScript: O Lighthouse aponta a necessidade de reduzir o tamanho de arquivos CSS e JS removendo
espaços em branco, comentários e código não utilizado.
• Lazy loading: Sugere o uso de lazy loading para imagens fora da tela, carregando-as somente quando o usuário rola a página.

Tempo de interação:
• Avalia quanto tempo o site leva para ficar interativo após ser carregado. Isso é importante para garantir que os usuários possam
navegar rapidamente sem esperar pelo carregamento de todos os recursos.

SEO:
• Estrutura do HTML: O Lighthouse avalia se o HTML está bem estruturado com tags corretas, como títulos (<h1>, <h2>, etc.), links, meta
tags e atributos alt em imagens, facilitando o rastreamento pelos motores de busca.
• Boas práticas:
• Segurança: Avalia a implementação de protocolos seguros como HTTPS, garantindo que o site seja seguro para os usuários.
• Uso eficiente de APIs modernas: Verifica se o site utiliza APIs e padrões modernos que garantem a compatibilidade e a longevidade
do projeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (3/9) 575
Utilizar o :root no CSS contribui significativamente para a otimização de um projeto em termos de responsividade, manutenibilidade e
performance. Aqui estão os principais motivos:

• Consistência global: Centralizar valores como cores, tamanhos e fontes no :root garante uniformidade em todo o site, reduzindo
inconsistências visuais e erros causados por variações manuais.

• Facilidade de manutenção: Ao definir variáveis globais no :root, qualquer mudança de design ou atualização de estilo pode ser feita
rapidamente, diminuindo o tempo de retrabalho e aumentando a eficiência de desenvolvedores.

• Redução de redundância: O uso de variáveis no :root evita a repetição de valores estáticos (como cores ou espaçamentos) em várias
partes do código, reduzindo a quantidade de CSS processado pelo navegador, o que melhora o tempo de carregamento.

• Melhora na responsividade: Usar variáveis no :root permite adaptar facilmente elementos como tamanhos e espaçamentos em
diferentes breakpoints, promovendo uma experiência de usuário mais fluida em dispositivos variados.

• Futuras expansões e personalizações: Definir variáveis globais no :root facilita a implementação de temas, pois as mudanças podem
ser feitas de forma simples e rápida, otimizando o tempo e os recursos ao desenvolver novas funcionalidades ou estilos.

Essa abordagem ajuda a criar um código CSS mais leve, modular e escalável, melhorando a experiência tanto do desenvolvedor quanto
do usuário final.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (4/9) 576
Adicionar o preload com o atributo as para arquivos essenciais como CSS oferece várias vantagens em termos de processamento e
otimização do desempenho de um site. Aqui estão as razões principais:

• Carregamento antecipado: O uso do preload instrui o navegador a buscar os recursos (como arquivos CSS) o mais cedo possível,
mesmo antes de eles serem necessários para a renderização. Isso diminui o tempo de espera do usuário, acelerando o tempo de
carregamento da página.

• Prioridade no processamento: O atributo as="style" define o tipo de recurso a ser carregado (neste caso, estilos CSS). O navegador
consegue priorizar corretamente o arquivo com base em sua importância para a renderização da página. Isso evita que recursos
menos críticos sejam carregados antes de elementos essenciais, como o CSS.

• Redução do tempo de renderização: Como os estilos são fundamentais para a renderização correta do layout, o carregamento
antecipado garante que a página seja exibida mais rapidamente, evitando o "flash" de conteúdo não estilizado (FOUC). Isso melhora a
percepção de desempenho pelos usuários.

• Evita bloqueios de renderização: Sem o preload, o navegador pode adiar o carregamento de arquivos CSS até que ele alcance a
referência no documento HTML. Isso pode bloquear a renderização da página. Com o preload, o navegador já terá esses arquivos
prontos quando forem necessários.

• Uso eficiente de recursos: O carregamento antecipado otimiza a alocação de largura de banda, garantindo que arquivos essenciais
sejam baixados enquanto outros recursos menos prioritários são carregados posteriormente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (5/9) 577
Utilizar a estrutura de pré-conexão e pré-carregamento para fontes oferece várias otimizações específicas:

• Redução da Latência: A pré-conexão (preconnect) estabelece conexões antecipadas com servidores externos, como o Google Fonts,
reduzindo o tempo de espera para a resolução de DNS, a configuração de TCP e o handshake SSL. Isso é crucial para garantir que as
fontes sejam carregadas rapidamente, especialmente em sites que dependem fortemente de fontes externas.

• Carregamento Eficiente de Estilos: O uso de preload para a folha de estilos das fontes garante que as regras de fonte sejam aplicadas
assim que o navegador as baixa, evitando o atraso na aplicação de estilos relacionados à tipografia.

• Melhoria na Experiência do Usuário: Ao garantir que as fontes sejam carregadas rapidamente, reduz-se o risco de FOUT (Flash of
Unstyled Text) e FOUT (Flash of Unstyled Text), resultando em uma apresentação mais suave e profissional do conteúdo textual.

• Otimização de Performance: Com as fontes sendo carregadas mais rapidamente, o tempo de carregamento percebido da página
diminui, melhorando a pontuação de desempenho em ferramentas de avaliação e a experiência geral do usuário.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (6/9) 578
Adicionar loading="lazy" nos elementos <img> é uma prática recomendada por várias razões, especialmente em termos de desempenho
e otimização de páginas da web:

• Carregamento Sob Demanda: O atributo loading="lazy" permite que as imagens sejam carregadas apenas quando estão prestes a
entrar na área visível do viewport do usuário. Isso significa que as imagens que não estão imediatamente visíveis não consomem
largura de banda ou recursos do navegador até que sejam realmente necessárias.
• Redução do Tempo de Carregamento Inicial: Ao não carregar todas as imagens de uma vez, a carga inicial da página é reduzida, o
que pode resultar em tempos de carregamento mais rápidos. Isso é particularmente importante em páginas com muitas imagens ou
em dispositivos móveis, onde a largura de banda pode ser limitada.
• Melhor Experiência do Usuário: O uso de carregamento preguiçoso ajuda a evitar que a página fique lenta ou "congele" enquanto as
imagens são carregadas. Isso proporciona uma experiência de navegação mais fluida, pois os usuários podem começar a interagir
com o conteúdo da página sem esperar que todas as imagens sejam carregadas.
• Otimização de Recursos: Em conexões lentas ou limitadas, o loading="lazy" ajuda a economizar dados, pois apenas as imagens
necessárias para o que o usuário está visualizando são carregadas. Isso pode ser benéfico para usuários em dispositivos móveis ou em
áreas com conectividade limitada.
• SEO e Desempenho: Melhorar o desempenho do carregamento da página pode impactar positivamente a pontuação de SEO, uma
vez que os mecanismos de busca tendem a favorecer sites que oferecem uma boa experiência ao usuário.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (7/9) 579
Após fazer essas alterações você pode utilizar novamente o devtools na aba de Lighthouse para verificar o desempenho da nossa página,
além de verificar qual imagem pode estar demorando o carregamento:

Visto o carregamento da imagem podemos adicionar a seguinte estrutura para otimizarmos mais ainda a nossa página:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (8/9) 580
O Squoosh é uma ferramenta online desenvolvida pelo Google para otimizar imagens,
permitindo que os usuários reduzam o tamanho dos arquivos de imagem sem comprometer
significativamente a qualidade visual. Aqui estão algumas das principais funcionalidades e
características do Squoosh:
• Compressão de Imagens: O Squoosh permite que os usuários façam upload de imagens
em diferentes formatos (como JPEG, PNG, WebP, entre outros) e ofereçam várias opções de
compressão. Isso ajuda a diminuir o tamanho do arquivo, facilitando o carregamento mais
rápido em páginas da web.
• Comparação em Tempo Real: A ferramenta permite a comparação em tempo real entre a
imagem original e a versão otimizada. Isso ajuda os usuários a ver como as mudanças na
compressão afetam a qualidade visual da imagem, permitindo ajustes conforme necessário.
• Seleção de Formatos: O Squoosh oferece suporte a diversos formatos de imagem e
permite que os usuários escolham o formato mais apropriado para suas necessidades.
Alguns formatos, como WebP, oferecem melhor compressão e qualidade em comparação
com formatos tradicionais como JPEG e PNG.
• Controles Avançados: Os usuários podem ajustar configurações específicas de
compressão, como qualidade, redimensionamento e outros parâmetros, para personalizar
ainda mais a otimização da imagem.
• Interface Intuitiva: A interface do Squoosh é simples e fácil de usar, tornando-o acessível
mesmo para aqueles que não têm experiência em design ou otimização de imagens.
• Open Source: O Squoosh é um projeto de código aberto, permitindo que desenvolvedores
examinem e contribuam para seu código, além de integrar funcionalidades semelhantes
em suas próprias aplicações.
• Eficiente para Web: A otimização de imagens é essencial para o desempenho de sites, pois
imagens pesadas podem aumentar os tempos de carregamento e impactar negativamente
a experiência do usuário. O Squoosh ajuda a garantir que as imagens sejam carregadas DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

rapidamente sem sacrificar a qualidade.

 000
Módulo 5 – Desafio 2 – Otimizando a Home da Hashtag (9/9) 581
Vamos otimizar as imagens da nossa página, adicionar elas em uma nova pasta no nosso projeto e utilizar seus caminhos dentro da
renderização delas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Deploy – Colocando a nossa página no ar (1/3) 582
Quando desenvolvemos um site com HTML e CSS, o próximo passo após finalizar o projeto é disponibilizá-lo para o mundo ver.
Esse processo é conhecido como deploy. O deploy consiste em colocar seu site em um servidor, de modo que qualquer pessoa
com acesso à internet possa acessá-lo por meio de um navegador. Hoje, vamos aprender o que é deploy e como utilizar uma
ferramenta gratuita e simples chamada Netlify para fazer isso.

O Que é Deploy?
Deploy é o termo utilizado para descrever o processo de publicar um site ou aplicação em um servidor. Basicamente, você envia
seus arquivos do projeto (HTML, CSS, imagens, etc.) para a internet, permitindo que outros usuários acessem seu site através de
um domínio (um endereço como [Link]).

No caso de projetos simples que usam apenas HTML e CSS, o deploy é um processo direto, pois não envolve servidores
complexos ou bancos de dados. Existem várias plataformas que podem hospedar seu site de forma gratuita. Hoje, vamos nos
concentrar no Netlify, que é uma ferramenta que facilita o deploy de sites estáticos, como os criados com HTML e CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Deploy – Colocando a nossa página no ar (2/3) 583
Passo a Passo para Fazer o Deploy com o Netlify

1. Preparando o Projeto
Antes de tudo, verifique se seu projeto está completo e organizado. Isso significa que você deve ter todos os arquivos necessários
prontos, como:
• O arquivo [Link] (geralmente, o arquivo principal da sua página).
• Arquivos CSS (separados em uma pasta chamada css ou algo semelhante).
• Outras pastas com imagens, scripts, etc.
Crie uma pasta única para todo o projeto para facilitar o processo de deploy.

2. Criando uma Conta no Netlify

• Acesse o site do Netlify e clique em Sign Up para criar sua conta.
• Você pode se inscrever usando sua conta do GitHub, GitLab, Bitbucket ou criar uma conta com seu e-mail.

3. Fazendo o Upload do Projeto

O Netlify permite que você faça o deploy do seu site de várias formas, mas vamos focar na maneira mais simples, que é o upload
direto dos arquivos:
• Após fazer login, no painel principal do Netlify, clique no botão "New site from Git" ou vá até o painel de Sites e clique em "Add
new site".
• Agora, escolha a opção "Deploy manually" (deploy manualmente).
• Em seguida, arraste e solte a pasta do seu projeto (a pasta que contém seus arquivos HTML, CSS e outros) na área indicada no
Netlify.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 5 – Desafio 2 – Deploy – Colocando a nossa página no ar (3/3) 584

4. Publicando o Site
Assim que o upload for concluído, o Netlify processará o deploy e seu site estará online em poucos segundos! O Netlify vai
automaticamente atribuir um domínio temporário ao seu site, algo como [Link].
Você pode testar o site clicando nesse link fornecido e ver como ele está funcionando. Além disso, o Netlify permite que você
personalize esse domínio, se desejar.

5. Gerenciando o Site no Netlify

Após o deploy, você pode voltar ao painel do Netlify e:
• Verificar o status do seu site (se está online, se há erros, etc.).
• Alterar o domínio (você pode mudar o nome temporário para algo mais personalizado, como [Link]).
• Fazer novos deploys: Se você fizer alterações no projeto, pode simplesmente arrastar os novos arquivos e substituir o antigo
para atualizar o site.

Vantagens do Netlify para Deploys de HTML e CSS

• Gratuito: O Netlify oferece um plano gratuito, ideal para pequenos projetos ou portfólios.
• Fácil de Usar: Com a função de arrastar e soltar, fazer o deploy de projetos HTML e CSS é simples e rápido.
• Deploy Automático: Se você integrar seu projeto com repositórios como GitHub, pode configurar o Netlify para fazer deploy
automaticamente sempre que houver uma mudança no código.
• Certificado SSL Gratuito: O Netlify oferece certificados SSL automaticamente, o que significa que seu site será carregado com
segurança usando o protocolo HTTPS.
• Rapidez: O Netlify usa uma infraestrutura global que garante que seu site carregue rapidamente, independentemente da
localização dos visitantes.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 585
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT

Módulo 6

FLOAT NO CSS
FLOAT NO CSS
FLOAT NO CSS DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 6 – Apresentação do módulo (1/1) 586

Bem-vindo ao módulo onde exploraremos uma técnica de layout que, embora seja considerada "antiga", ainda é importante
conhecer: o Float.

Você já está familiarizado com métodos modernos como Flexbox e Grid, que oferecem soluções mais intuitivas e poderosas para
criar layouts. No entanto, antes da popularização desses métodos, o float era uma das principais ferramentas para posicionar
elementos em uma página web.

Neste módulo, você aprenderá:

• O que é e como funciona a propriedade float.
• A importância e o uso da propriedade clear.
• Como esses conceitos eram aplicados para criar layouts, e por que é importante entender essa abordagem, mesmo em um cenário
dominado por técnicas modernas.

Conhecer o float pode ajudar a entender o legado do CSS e a lidar com projetos que ainda utilizam essa técnica. Vamos mergulhar no
mundo do float e descobrir como ele era utilizado para controlar o fluxo dos elementos na página!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (1/10) 587

Nessa aula vamos abordar a propriedade float e como que criavamos layouts utilizando ela. Para isso vamos criar um arquivo html,
dentro do <body> vamos adicionar 3 elementos (h1, img e p). A imagem vamos utilizar o logo da hashtag do site hashtagtreinamentos
e o parágrafo vamos gerar no site do Lorem ipsum.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (2/10) 588
Antes de explorarmos o uso do float, é importante relembrar como os elementos básicos de uma página são exibidos por padrão.

Título e Parágrafo
Os elementos como títulos (<h1>, <h2>, etc.) e parágrafos (<p>) são exibidos no fluxo normal do documento com um display padrão
de block. Isso significa que cada um deles ocupa toda a largura disponível e empurra os elementos subsequentes para a linha
seguinte. Em outras palavras, esses elementos são exibidos um abaixo do outro, respeitando a hierarquia e a estrutura do conteúdo.

Imagem
Agora, considere uma imagem adicionada ao documento com a tag <img>. Por padrão, a imagem tem um display de inline-block, o
que significa que ela se comporta de forma similar a um texto em linha, ocupando apenas o espaço necessário para sua largura e
altura. No entanto, ao contrário dos elementos de texto, uma imagem pode coexistir na mesma linha que outros elementos inline, a
menos que seu contêiner ou a própria imagem seja definida como um bloco.

O que é a Propriedade float?

A propriedade float é usada para posicionar um elemento à esquerda ou à direita de seu contêiner, permitindo que o conteúdo
subsequente flua ao lado desse elemento, em vez de ficar abaixo dele. Em essência, o float tira o elemento do fluxo normal do
documento e permite que outros elementos textuais ou inline preencham o espaço ao redor dele.

Valores da Propriedade float

• left: O elemento flutuará à esquerda do seu contêiner, e o conteúdo subsequente fluirá ao lado direito do elemento.
• right: O elemento flutuará à direita do seu contêiner, e o conteúdo subsequente fluirá ao lado esquerdo do elemento.
• none: Esse é o valor padrão. O elemento não flutua e permanece no fluxo normal do documento.
• inherit: O elemento herda o valor float do seu elemento pai.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (3/10) 589
Dentro do próprio arquivo HTML, adicionaremos uma tag <style> dentro do elemento <body> para construir nossa folha de estilo.
Nela, utilizaremos as propriedades do float, sem precisar criar um arquivo CSS separado. O primeiro passo será modificar o
posicionamento do h1 e da imagem. Queremos que o título (h1) fique à esquerda e a imagem à direita, então começaremos aplicando
o float ao elemento h1.

position: absolute

Na estrutura apresentada, a propriedade float: left; aplicada ao h1 faz com que o título seja posicionado à esquerda, permitindo que o
conteúdo subsequente, como a imagem e o parágrafo, flua ao seu redor. Isso significa que a imagem e o parágrafo serão exibidos ao
lado do h1, ocupando o espaço disponível à direita do título.

Comparando com a posição absolute, há algumas diferenças significativas:

Comportamento de Posição:

• float: left;: O h1 flutuará à esquerda dentro do fluxo do documento, e os elementos seguintes tentarão ocupar o espaço ao seu lado,
respeitando o fluxo natural da página.
• position: absolute;: O h1 seria removido do fluxo normal do documento e posicionado em relação ao seu contêiner posicionado
mais próximo (ou ao <body>, se nenhum outro contêiner estiver posicionado). Isso significa que os elementos subsequentes não
"veriam" o h1 e se posicionariam como se ele não existisse, potencialmente sobrepondo-se a ele.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 6 – Como usar as propriedades de float e clear (4/10) 590
Interação com Outros Elementos:
• float: left;: O conteúdo ao lado do h1 (como a imagem e o texto) se ajustará ao espaço que o h1 ocupa.
• position: absolute;: Os elementos ao redor não considerariam a posição do h1, o que poderia resultar em sobreposições.

Fluxo do Documento:
• float: left;: O h1 ainda faz parte do fluxo normal da página, e outros elementos fluirão em torno dele.
• position: absolute;: O h1 é removido do fluxo do documento, e outros elementos não levarão sua posição em consideração.

Continuando com o nosso fluxo float, vamos posicionar a imagem do logo para o canto direito.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (5/10) 591
Agora se tivessemos mais de uma elemento utilizando a propriedade float com o valor left, qual seria o comportamento desse
elemento e posicionamento? Vamos aplicar a propriedade para o nosso elemento de parágrafo e observar o comportamento do
elemento.

Quando múltiplos elementos em uma página possuem a propriedade float, o comportamento de posicionamento deles é
determinado pela ordem em que aparecem no código HTML, além de suas respectivas direções de flutuação (esquerda ou direita).
Vamos analisar o que acontece com os elementos h1, img, e p em relação ao fluxo do float nas seguintes condições:

1. Configuração de Flutuação:
• h1 { float: left; }: O h1 será flutuado à esquerda, ocupando o espaço mais à esquerda disponível no contêiner pai (neste caso, o
<body>).
• img { float: right; }: A imagem (img) será flutuada à direita, ocupando o espaço mais à direita disponível no contêiner.
• p { float: left; }: O parágrafo (p) será flutuado à esquerda, e tentará se posicionar ao lado do h1, dependendo do espaço disponível.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (6/10) 592
2. Fluxo do Float e Disposição dos Elementos:
Vamos entender o que acontece quando esses elementos são renderizados no navegador:

Passo 1: h1 é Flutuado à Esquerda

• O navegador posiciona o h1 no canto esquerdo do contêiner. Como o float remove o h1 do fluxo normal do documento, ele "puxa" o
conteúdo subsequente (como a imagem e o parágrafo) para tentar ocupar o espaço ao lado direito dele.
Passo 2: img é Flutuado à Direita
• A imagem (img) é posicionada no canto direito do contêiner. Ela flutua para o lado direito e, como o h1 já está flutuando à esquerda,
a imagem tenta se posicionar ao lado dele, no espaço disponível à direita.
Passo 3: p é Flutuado à Esquerda
• O parágrafo (p) é o próximo elemento a ser processado. Como ele também possui float: left, ele tentará flutuar à esquerda. Neste
caso, ele se posicionará logo à direita do h1 (caso haja espaço), ocupando o espaço à esquerda disponível após o h1.

3. Comportamento Detalhado do Fluxo:

• Quando os elementos têm float: left, eles tentam se alinhar ao lado esquerdo, um após o outro. Isso cria uma sequência horizontal
de elementos alinhados à esquerda, desde que haja espaço suficiente no contêiner.
• O img com float: right tenta "ocupar" a borda direita, e qualquer elemento subsequente que flutue à esquerda tentará se encaixar
entre os elementos flutuantes à esquerda e à direita.
• Se não houver espaço horizontal suficiente, o parágrafo p pode ser empurrado para uma nova linha, dependendo da largura do
contêiner e dos elementos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (7/10) 593
A propriedade clear no CSS é utilizada para controlar o comportamento dos elementos que seguem outros elementos que foram
flutuados (float). Em outras palavras, clear é uma ferramenta que permite a você "limpar" a flutuação de elementos anteriores,
forçando um elemento a começar abaixo de elementos flutuantes, ao invés de ao lado deles.

1. Contexto do Uso de clear:

• Quando você utiliza float em elementos, eles são removidos parcialmente do fluxo normal do documento, e elementos
subsequentes tentarão flutuar ao lado deles, se houver espaço.
• Às vezes, isso não é desejado — por exemplo, você pode querer que um elemento comece abaixo de um conjunto de elementos
flutuados, sem tentar ocupar o espaço ao lado deles.
• É aí que entra a propriedade clear.

2. Sintaxe e Valores - clear pode assumir os seguintes valores:

• none: (valor padrão) Sem nenhum efeito de limpeza. O elemento será posicionado normalmente, tentando ocupar espaço ao lado
de elementos flutuados, se possível.
• left: O elemento não permitirá flutuações à esquerda. Ele será posicionado abaixo de todos os elementos flutuados à esquerda.
• right: O elemento não permitirá flutuações à direita. Ele será posicionado abaixo de todos os elementos flutuados à direita.
• both: O elemento não permitirá flutuações nem à esquerda nem à direita. Ele será posicionado abaixo de todos os elementos
flutuados, independentemente da direção do flutuante.
• inherit: O elemento herda o valor da propriedade clear de seu elemento pai.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (8/10) 594
Para entendermos melhor esses conceitos, vamos envolver toda a nossa estrutura do body dentro de um elemento div e adicionar
uma cor de fundo nele.

Se aplicarmos em todos os elementos a propriedade float, repare que a cor de fundo do elemento div que acabamos de adicionar,
desaparece:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (9/10) 595
Quando você tem uma <div> que contém apenas elementos flutuantes (ou seja, elementos que utilizam float para flutuar para a
esquerda ou direita), o comportamento padrão da <div> é não "envolver" esses elementos, resultando em uma altura de 0.
Isso ocorre porque elementos flutuantes são removidos do fluxo normal do documento. O navegador calcula a altura de um
contêiner com base no conteúdo que está dentro dele, mas quando esse conteúdo está flutuando, ele é tratado como se estivesse
fora do fluxo padrão. Como resultado, a <div> não reconhece esses elementos como parte de sua estrutura e, por isso, não ajusta sua
altura para acomodá-los.

E para corrigirmos esse comportamento "bug", podemos utilizar a seguinte estrutura:

A técnica chamada clearfix é um método comum para fazer com que contêineres reconheçam e
envolvam elementos flutuantes dentro deles. Vamos detalhar como funciona essa solução:
• &::after: cria um elemento virtual logo após o conteúdo de um elemento HTML. Nesse caso, ele
está sendo utilizado para adicionar um bloco invisível logo após o conteúdo da <div>. content: "";:
O pseudo-elemento ::after precisa ter o conteúdo definido, mesmo que seja vazio (""). Isso porque o
pseudo-elemento não existe no DOM, e o content é necessário para que o pseudo-elemento seja
criado.
• display: block;: Define que o pseudo-elemento será exibido como um bloco.
• clear: both;: Esta propriedade faz o trabalho crucial de "limpar" os elementos flutuantes. Isso
essencialmente força a <div> a reconhecer o final dos elementos flutuantes e ajustar sua altura
para englobá-los.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Como usar as propriedades de float e clear (10/10) 596

Por que isso resolve o problema?

Como os elementos flutuantes são removidos do fluxo normal do documento, a <div> não os considera ao calcular sua altura. Ao
adicionar o pseudo-elemento ::after com clear: both;, você está dizendo ao navegador que ele deve encerrar o comportamento de
flutuação e garantir que a altura da <div> seja recalculada de forma a incluir os elementos flutuantes. Esse bloco invisível adicionado
pelo ::after força a <div> a se ajustar para envolver todo o conteúdo, resultando em uma altura correta.

Resultado final:
A <div> agora reconhecerá corretamente os elementos flutuantes dentro dela e ajustará sua altura para acomodar esses elementos,
solucionando o problema da altura zero.

Essa técnica é amplamente utilizada e é uma forma eficiente de lidar com o problema sem precisar modificar o HTML diretamente ou
adicionar um elemento extra visível para limpar os flutuantes.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Desafio – Consturindo um layout com float (1/1) 597
Neste desafio, você será encarregado de recriar a estrutura da página Home da Hashtag, que já trabalhamos utilizando Flexbox, mas
agora aplicando apenas o conceito de float.
O objetivo é entender as diferenças e desafios que surgem ao construir layouts com float, um método clássico no desenvolvimento
web antes da introdução do Flexbox. Você deverá usar flutuação para organizar os elementos na página, como menus, seções de
conteúdo e rodapé, replicando o layout que você já conhece.

FLOAT

Ao longo deste exercício, você irá:

• Alinhar elementos de forma horizontal utilizando float: left; ou float: right;.
• Trabalhar com o conceito de limpeza de flutuação para garantir que os contêineres envolvam corretamente os elementos
flutuantes.
• Gerenciar a organização de blocos e colunas, simulando uma disposição similar à página original, mas com as limitações e
peculiaridades do float.

Este desafio vai te ajudar a entender como layouts eram construídos antes de técnicas modernas como o Flexbox e o CSS Grid, além
de aprimorar suas habilidades em CSS, organização de layout e boas práticas para compatibilidade em diferentes navegadores.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Desafio – Gabarito (1/7) 598
Primeiramente você irá baixar o arquivo disponibilizado na aula anterior na plataforma, dentro desse arquivo você encontrará a
estrutura html dos elementos da nossa estrutura e um arquivo [Link] que já possui algumas propriedades de estilo [Link]
isso vamos começar a manipular nossos arquivos para utilizar o conceito de float para criarmos o layout que desejamos, e vamos
aplicar os estilos dos elementos maiores para os menores do nosso projeto.

As propriedades que utilizamos nas aulas passadas do conceito flexbox estão comentados, para orientar a criação do layout, então
vamos aplicar as mudanças nos primeiros elementos:

Essas propriedades juntas garantem que o elemento seja exibido como um bloco, centralizado na página, com uma largura que se
ajusta ao conteúdo e um espaçamento inferior de 1.6 rem.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Desafio – Gabarito (2/7) 599
Agora vamos estilizar os elementos de âncora dos ícones dos cursos, para isso vamos aplicar o Nesting (aninhamento).

Explicação do aninhamento:

• .conteudos-caixa-logos { ... }: Esse é o seletor principal. Ele define estilos

diretamente no contêiner .conteudos-caixa-logos, que controla sua exibição,
margem, largura, etc.

• & a { ... }: O & representa o seletor pai, que no caso é .conteudos-caixa-logos. Então, &
a é equivalente a .conteudos-caixa-logos a. Esse bloco define estilos específicos para
os links (<a>) que estão dentro de .conteudos-caixa-logos. Nesse caso, aplica uma
margem à direita nos links.

• &:last-child { ... }: Novamente, o & refere-se ao seletor pai, que aqui é a. Então, &:last-
child é equivalente a .conteudos-caixa-logos a:last-child. Esse bloco remove a
margem à direita do último link dentro do contêiner, garantindo que o último item
não tenha um espaçamento extra.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Desafio – Gabarito (3/7) 600
Nesse momento vamos lidar com os elementos da nossa lista de redes sociais, e vamos utilizar os conceitos de float e clear para
construir o layout da estrutura, inicialmente vamos adicionar essas propriedades ao elemento:

Neste código, o aninhamento (nesting) está sendo usado para estruturar os estilos dentro do seletor
principal .conteudos-lista-redessociais. Vamos explicar cada parte:

• .conteudos-lista-redessociais { ... }:
• Esse é o seletor principal, e todo o código dentro deste bloco refere-se ao elemento com a classe
.conteudos-lista-redessociais.

• & a { ... }: todos os links (<a>) dentro do elemento .conteudos-lista-redessociais.

• float: left;: Faz com que os links dentro do contêiner flutuem para a esquerda, permitindo que eles
fiquem dispostos um ao lado do outro.
• clear: both;: Evita que o link anterior influencie o posicionamento do link atual. Isso garante que
cada link tenha um comportamento independente de flutuação, evitando problemas de layout.

• &::after { ... }:
• content: "";: Cria um pseudo-elemento vazio após o conteúdo do contêiner.
• display: block;: Faz o pseudo-elemento se comportar como um bloco, ocupando espaço no layout.
• clear: both;: O objetivo aqui é limpar os elementos flutuantes dentro do contêiner .conteudos-lista-
redessociais. Isso resolve o problema da altura zero do contêiner (pois os elementos flutuantes não
afetam a altura dele), forçando-o a envolver corretamente os links flutuantes.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Desafio – Gabarito (4/7) 601
Para aplicarmos o nosso espaçamento em todos os Agora vamos utilizar a mesma estrutura dos elementos de
elementos, exceto do nosso último elemento da lista ícones de cursos, para alinhar os elementos ao centro.
vamos utilizar a seguinte estrutura:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Desafio – Gabarito (5/7) 602
Antes de continuarmos vamos fazer uma refatoração no
Vamos adicionar a propriedade width para que os arquivo CSS para utilizar o Nesting dentro da seguinte
elementos de âncora da lista ocupem 100% da largura do estrutura:
componente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Desafio – Gabarito (6/7) 603

Para finalizar vamos aplicar as seguintes propriedades:

Explicação detalhada:

1. & li { ... }:
• position: relative;: Define que o item da lista (<li>) será posicionado de forma relativa. Isso permite que seus filhos, como a
imagem, possam ser posicionados de forma absoluta em relação a ele.

• padding-left: 2.45rem;: Adiciona um preenchimento à esquerda de 2.45rem. Isso cria um espaço dentro de cada item da lista,
provavelmente para acomodar ícones ou imagens.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 6 – Desafio – Gabarito (7/7) 604
2. & img { ... }:

• width: 1.8rem;: Define a largura das imagens como 1.8rem, garantindo que todas as imagens tenham o mesmo tamanho.

• position: absolute;: Posiciona a imagem de forma absoluta em relação ao item da lista (li), que está posicionado de forma relativa.
Isso significa que a imagem será removida do fluxo normal do documento e posicionada de acordo com as coordenadas
fornecidas.

• top: 50%;: Move a imagem para 50% da altura do item da lista, o que significa que a imagem ficará no meio verticalmente.

• transform: translate(calc(-100% - 0.65rem), -50%);: O transform ajusta a posição da imagem:

• calc(-100% - 0.65rem): Move a imagem 100% para a esquerda (fora do contêiner) e adiciona um espaço extra de 0.65rem. Isso
posiciona a imagem antes do conteúdo do item da lista.
• -50%: Ajusta a imagem para centralizá-la verticalmente no meio do item da lista.

Resumo:
A lista (li) está sendo preparada para acomodar imagens à sua esquerda, com um espaço criado via padding-left.
As imagens (img) são posicionadas fora do fluxo normal do texto, flutuando à esquerda do conteúdo do item da lista, com
alinhamento vertical centralizado em relação ao item.
O resultado é uma lista com ícones ou imagens à esquerda, alinhados corretamente ao lado de cada item, sem quebrar o fluxo do
layout.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 605
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT

Módulo 7

METODOLOGIA BEM
METODOLOGIA BEM
METODOLOGIA BEM DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 7 – Introdução ao Módulo (1/1) 606

Introdução à Metodologia BEM (Block, Element, Modifier)

Organizar e manter o código CSS em projetos de maior escala pode ser um desafio, especialmente quando trabalhamos com
componentes complexos. A metodologia BEM (Block, Element, Modifier) surge como uma solução para padronizar e estruturar o
código HTML e CSS, tornando-o mais legível, escalável e fácil de manter. Neste módulo, exploraremos os conceitos fundamentais da
metodologia BEM, que se baseia em três pilares principais:

• Blocks (Blocos): Representam as partes independentes e reutilizáveis de uma interface. Aprenderemos como identificar e
nomear blocos de maneira clara e intuitiva.

• Elements (Elementos): São as partes internas de um bloco que, embora tenham funções específicas, não podem existir de
maneira independente. Abordaremos como criar e organizar elementos para estruturar melhor o código.

• Modifiers (Modificadores): Permitem variar a aparência ou o comportamento de blocos e elementos, adicionando flexibilidade ao
design sem comprometer a organização.

Ao final deste módulo, você será capaz de aplicar a metodologia BEM em seus projetos, garantindo um código mais limpo,
consistente e colaborativo. Vamos começar!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Como funciona a Metodologia BEM (1/3) 607

A metodologia BEM (Block, Element, Modifier) foi criada pela equipe de desenvolvedores do Yandex com o objetivo de estruturar o
código de maneira mais clara, especialmente em projetos com interfaces complexas. Ela ajuda a manter uma organização
consistente entre HTML e CSS, tornando mais fácil a manutenção e o trabalho em equipe. Vamos entender cada parte da
metodologia:

1. Block (Bloco)
Um Bloco é uma unidade independente que pode ser reutilizada em diferentes partes da aplicação. Ele representa um componente
de interface completo, como um formulário, menu, botão, ou qualquer outra seção que tenha um propósito próprio.

Exemplo:
• Um bloco chamado button seria representado no HTML com uma classe .button.
• Esse bloco representa a base para o estilo e funcionalidade do componente "botão".
No CSS, você define as propriedades do bloco para estilizar o componente:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Como funciona a Metodologia BEM (2/3) 608
2. Element (Elemento)
Um Elemento é uma parte do bloco que não tem sentido sozinho, ou seja, ele existe apenas
como um componente subordinado ao bloco. Normalmente, ele é um pedaço menor dentro de
um bloco maior, como o título de um cartão ou o ícone dentro de um botão.

Exemplo:
• Para um botão que inclui um ícone, o elemento do ícone seria representado como
button__icon.
• A nomenclatura é formada pela junção do nome do bloco (button) com dois underscores (__) e
o nome do elemento (icon), indicando que ele faz parte do bloco "button".

3. Modifier (Modificador)
Um Modificador é uma variação de um bloco ou elemento. Ele permite ajustar a aparência, o
comportamento ou o estado de um bloco ou elemento sem criar uma estrutura completamente
nova. Modificadores são úteis para aplicar estilos diferentes a um mesmo bloco, como alterar a
cor de um botão ou adicionar um estado ativo.

Exemplo:
• Um botão que possui uma cor diferente pode ter o modificador button--primary, onde -- é
utilizado para indicar o modificador (primary).
• O modificador pode ser aplicado ao bloco como um todo ou a elementos específicos dentro
dele.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 7 – Como funciona a Metodologia BEM (3/3) 609
Resumindo

A estrutura de nomenclatura BEM segue esta ordem:

• Bloco: .nome-do-bloco
• Elemento: .nome-do-bloco__nome-do-elemento
• Modificador: .nome-do-bloco--modificador ou .nome-do-bloco__nome-do-elemento--modificador

Exemplo Completo
Imagine um botão com um ícone que possui uma variação de cor:

Nesse exemplo, aplicamos:

• O bloco button para definir o estilo geral do botão.

• O elemento button__icon para estilizar o ícone.
• O modificador button--primary para dar uma cor específica ao botão.

A metodologia BEM, quando aplicada corretamente, facilita a criação de componentes reutilizáveis e escaláveis, mantendo a
organização e a clareza do código.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 7 – Exemplos da Metodologia (1/5) 610
Exemplo 1:

No BEM, o Bloco é um componente independente, ou seja, uma unidade que possui significado próprio e é reutilizável. Aqui temos dois
blocos principais:

• casa: Representa um bloco completo que pode ser considerado como um componente principal ou uma seção da interface.
• quarto: É outro bloco dentro da estrutura, com propósito próprio e pode conter seus próprios elementos e modificadores.

Os Elementos são partes internas de um bloco, ou seja, componentes subordinados ao bloco ao qual pertencem e que não têm sentido
isolados. Eles são identificados pela estrutura nome-do-bloco__nome-do-elemento, mostrando que fazem parte do bloco específico.

Na estrutura dada, temos os seguintes elementos:

• casa__jardim: É um elemento do bloco casa. O prefixo casa__ indica que ele é uma parte desse bloco e não faz sentido isoladamente
sem o contexto de casa.
• quarto__mesa e quarto__pe: São elementos do bloco quarto. Esses elementos fazem parte do contexto do quarto e são identificados
por quarto__, indicando sua associação com o bloco quarto.
• quarto__impressora: É outro elemento do bloco quarto. Ele representa uma parte específica dentro do bloco quarto e depende do
contexto do quarto para fazer sentido. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 7 – Exemplos da Metodologia (2/5) 611
Exemplo 1:

Os Modificadores são usados para criar variações de um bloco ou elemento, indicando mudanças de aparência, comportamento, ou
estado. Eles são definidos com --modificador e ajudam a identificar facilmente as diferentes variações de um bloco ou elemento.
Na estrutura, temos dois modificadores:

• casa--azul: É um modificador do bloco casa, indicando que este bloco possui uma variação, neste caso, possivelmente de cor (azul).
Essa modificação pode alterar a aparência do bloco sem alterar sua estrutura.
• quarto__impressora--ligada: É um modificador do elemento quarto__impressora, sinalizando um estado específico da impressora
(ligada). Esse modificador permite alterar o estado do elemento quarto__impressora sem criar uma estrutura nova.

Resumo da Estrutura com a Metodologia BEM

• Blocos: São representados por casa e quarto.
• Elementos: Incluem casa__jardim, quarto__mesa, quarto__pe, e quarto__impressora, cada um ligado ao seu bloco principal.
• Modificadores: Incluem casa--azul e quarto__impressora--ligada, que representam variações dos blocos e elementos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplos da Metodologia (3/5) 612
Exemplo 1:

Reflexão sobre Especificidade e Organização no BEM

Observe o código abaixo, onde aplicamos a metodologia BEM para estruturar classes e organizar estilos:

A estrutura ao lado permite que definamos um bloco principal (casa), seus elementos
internos (casa__jardim) e suas variações (casa--azul). Da mesma forma, temos um
bloco quarto, que inclui seus elementos específicos e até um modificador para o
elemento quarto__impressora.

Pergunta para refletir: Dado que a metodologia BEM nos ajuda a organizar o CSS,
você acha que a estrutura criada aqui permite uma especificidade suficiente para
atender a todos os estilos e comportamentos necessários? Ou será que ainda
precisaríamos de outras formas de organização para alcançar um maior controle e
clareza?

Pense sobre como essa organização pode influenciar a maneira como você estiliza
componentes complexos e até que ponto a estrutura BEM ajuda ou limita a
especificidade que precisamos em um projeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplos da Metodologia (4/5) 613

Exemplo 2:

No BEM, o Bloco representa uma entidade independente, que possui um propósito próprio e pode ser reutilizada em diferentes partes
do projeto. Aqui, o bloco principal é:

• pessoa: Este é o componente principal da estrutura, representando uma entidade chamada "pessoa". Esse bloco é o núcleo da
estrutura e contém as classes de estilos básicos para esse componente.

Os Elementos são partes internas de um bloco. Eles dependem do bloco para fazer sentido e não possuem identidade fora dele. São
indicados com __ após o nome do bloco, demonstrando que pertencem a ele. Nesta estrutura, temos dois elementos:

• pessoa__mao: Este é um elemento do bloco pessoa que representa a "mão" da pessoa. Ele está associado diretamente ao bloco
pessoa e só faz sentido no contexto de "pessoa".
• pessoa__rosto: Outro elemento do bloco pessoa, representando o "rosto" da pessoa. Assim como a mão, o rosto faz sentido apenas
quando associado ao bloco pessoa.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplos da Metodologia (5/5) 614

Exemplo 2:

Resumo da Estrutura BEM

• Bloco: pessoa — representa a estrutura básica do componente "pessoa".

• Elementos: pessoa__mao e pessoa__rosto — são partes internas que pertencem ao bloco "pessoa".
• Modificadores: pessoa--bonita e pessoa__mao--aberta — especificam variações no bloco e no elemento, indicando características ou
estados diferentes.

Consideração Final
A aplicação do BEM nessa estrutura permite organizar o código de forma clara, facilitando a compreensão e o estilo modular do
componente "pessoa". Esse tipo de estrutura torna o CSS mais escalável e fácil de manter, especialmente em projetos grandes, onde a
clareza e consistência das classes são essenciais.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Vantagens, Desvantagens e Conclusão (1/2) 615

Vantagens da Metodologia BEM

• Organização e Clareza: Com BEM, o código CSS é mais estruturado, pois segue um padrão rigoroso de nomenclatura. Isso facilita a
leitura e o entendimento, principalmente em projetos grandes.

• Reutilização de Componentes: BEM incentiva o uso de blocos e elementos que são independentes e reutilizáveis. Isso permite que
desenvolvedores criem componentes que podem ser usados em diferentes partes do projeto sem duplicar estilos.

• Facilidade de Manutenção e Escalabilidade: Graças à nomenclatura padronizada, a manutenção do código torna-se mais simples.
Quando precisamos alterar um bloco ou elemento, é fácil identificar a classe no CSS e garantir que o código fique consistente ao
longo do tempo.

• Evita Conflitos de Estilo: BEM ajuda a minimizar problemas de conflito de CSS, como especificidade excessiva, já que cada bloco e
elemento possui uma estrutura de classe única.

• Trabalho em Equipe: Por ser uma convenção bem definida, BEM facilita a colaboração entre desenvolvedores, pois todos seguem o
mesmo padrão e compreendem rapidamente a função de cada classe.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Vantagens, Desvantagens e Conclusão (2/2) 616
Desvantagens da Metodologia BEM

• Nomes de Classes Longos: A nomenclatura detalhada da BEM pode resultar em nomes de classes longos e complexos. Em projetos
grandes, isso pode fazer o CSS parecer “poluído” e aumentar o tamanho do código.

• Curva de Aprendizado: Para iniciantes, a metodologia BEM pode ser confusa ou difícil de adotar, pois exige a compreensão dos
conceitos de bloco, elemento e modificador, e a criação de nomes coerentes.

• Excesso de Classes no HTML: Aplicar BEM rigorosamente pode resultar em HTML com muitas classes. Para desenvolvedores que
preferem uma estrutura mais enxuta, isso pode parecer sobrecarregado.

• Limitação de Especificidade: Embora a padronização da BEM ajude a manter um código organizado, ela também pode limitar a
especificidade. Para casos onde a personalização é necessária para um elemento específico, pode ser necessário criar modificadores
adicionais, o que pode complicar a estrutura.

• Não Ideal para Pequenos Projetos: Em projetos menores ou menos complexos, BEM pode parecer excessivo e aumentar
desnecessariamente a quantidade de código, sem trazer benefícios significativos.

Conclusão
A metodologia BEM é muito útil em projetos grandes e colaborativos, mas é importante considerar a complexidade do projeto antes de
adotá-la integralmente. Avaliar as necessidades de organização e escalabilidade é fundamental para decidir se BEM é a abordagem
mais eficiente para o contexto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Cuidados e Observações (1/3) 617
Ao utilizar a metodologia BEM, alguns cuidados e observações são essenciais para garantir que o código se mantenha organizado, legível e
eficiente. Aqui estão alguns pontos a considerar:

1. Planeje a Estrutura de Blocos e Elementos

• Cuidado: Defina claramente o que constitui um bloco e o que será um elemento antes de começar a implementar o CSS. Uma estrutura
bem planejada evita a criação de classes desnecessárias e facilita a reutilização.
• Observação: Lembre-se de que blocos devem ser independentes e funcionais por si mesmos. Isso evita o uso excessivo de elementos e
torna os blocos mais flexíveis para reutilização.

2. Nomenclatura Coerente e Descritiva

• Cuidado: Crie nomes de classes que sejam autoexplicativos e consistentes. Evite abreviações ou nomes vagos, pois isso pode gerar
confusão e dificultar o entendimento do código por outros desenvolvedores.
• Observação: Mantenha a clareza sem exagerar no comprimento dos nomes de classes. Nomes extremamente longos podem dificultar a
leitura do código.

3. Use Modificadores Apenas Quando Necessário

• Cuidado: Modificadores são úteis para definir variações, mas usá-los em excesso pode complicar o código. Evite criar modificadores para
pequenas mudanças de estilo; às vezes, é melhor criar um novo bloco.
• Observação: Modificadores devem representar uma mudança significativa de estilo ou comportamento. Para estilos menores, como uma
simples mudança de cor, avalie se o modificador é realmente necessário.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Cuidados e Observações (2/3) 618
4. Evite Aninhar Excessivamente no CSS
• Cuidado: Embora o BEM permita uma estrutura CSS organizada, aninhamentos profundos são desnecessários e podem aumentar a
especificidade, dificultando a manutenção e a sobrescrita de estilos.
• Observação: Com o BEM, as classes são geralmente autoexplicativas e possuem baixa especificidade. Isso permite que sejam usadas de
forma independente, sem precisar de seletores aninhados.

5. Considere o Impacto da Nomenclatura na Semântica do HTML

• Cuidado: A metodologia BEM é útil para CSS, mas a classe deve fazer sentido sem interferir na semântica HTML. Evite nomes de blocos
que descrevam apenas o estilo; prefira nomes que indiquem a função ou o propósito do componente.
• Observação: Um bom nome de bloco é descritivo para o conteúdo e função do componente, não apenas para sua aparência. Isso facilita
a compreensão do código pelos desenvolvedores e colabora para uma estrutura semântica.

6. Documente e Defina um Padrão de Nomenclatura

• Cuidado: Sem uma documentação clara, os desenvolvedores podem interpretar o uso de blocos, elementos e modificadores de forma
inconsistente, o que leva a problemas de entendimento e manutenção.
• Observação: Defina e documente um padrão para a nomenclatura do BEM antes de iniciar o projeto, especialmente em equipes. Isso
assegura que todos os desenvolvedores estejam na mesma página e que a estrutura seja aplicada de forma coerente.

7. Atenção ao Uso de Estruturas Longas de Classes

• Cuidado: No BEM, as classes podem se tornar longas, especialmente com modificadores. Evite criar modificadores múltiplos para o
mesmo bloco ou elemento, pois isso pode complicar o código.
• Observação: Prefira estruturas de classes simples e diretas. Um bloco ou elemento com modificadores em cascata (.pessoa--alta--forte)
pode ser um sinal de complexidade excessiva. Avalie se esses modificadores são realmente necessários.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 7 – Cuidados e Observações (3/3) 619
[Link] Podem Existir Dentro de Blocos
• Cuidado: Blocos podem ser aninhados dentro de outros blocos, mas devem manter sua independência e funcionalidade própria. Use
essa prática para criar hierarquias sem sobrecarregar elementos ou modificar blocos de maneira excessiva.
• Observação: Quando um bloco está dentro de outro, ele ainda deve ser visto como um componente independente e ter seu próprio
conjunto de classes e modificadores.

9.Não Siga Hierarquia dos Elementos

• Cuidado: Ao definir os elementos, não siga hierarquias aninhadas. Cada elemento deve ser diretamente associado ao seu bloco pai,
mesmo que o elemento esteja aninhado visualmente.
• Observação: Mantenha sempre a estrutura bloco__elemento para cada elemento diretamente ligado ao bloco, sem criar classes como
bloco__elemento__subelemento.

[Link] Nomes Compostos Separados por Hífen

• Cuidado: Quando necessário, utilize nomes compostos separados por hífen para blocos e elementos (ex.: bloco-composto__elemento),
mantendo a consistência e evitando abreviações.
• Observação: O uso de hífens torna o nome mais claro e ajuda na leitura do código, facilitando a identificação de cada parte.

11. Evite Seletores de Tag ou ID

• Cuidado: A metodologia BEM desencoraja o uso de seletores de tag (div, h1, p) ou IDs, pois eles aumentam a especificidade
desnecessariamente e podem dificultar a manutenção.
• Observação: Aplique estilos apenas com classes BEM. Isso garante que as classes sejam o único ponto de estilização e simplifica a
modificação de estilos sem interferências externas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (1/9) 620
Vamos agora partir para um exemplo prático, no qual aplicaremos a
metodologia BEM em um componente real. Usaremos como referência uma
parte da seção Conteúdos da Home da Hashtag, escolhendo uma parte
específica dela para manter o foco no aprendizado. Essa seção será um ótimo
exemplo, pois já construímos juntos e conhecemos bem a estrutura. Assim,
poderemos identificar com clareza os blocos, elementos e modificadores, e
entender como a organização proposta pelo BEM ajuda a manter o código
limpo, semântico e fácil de manter.

Além disso, neste exercício, teremos a oportunidade de explorar três formas

diferentes de aplicar o CSS. A primeira forma, que já utilizamos nas aulas
anteriores, consiste em aplicar estilos de maneira mais direta, criando seletores e
estilizando cada elemento individualmente. Em seguida, aprendemos sobre o
Nesting, que nos permite aninhar as regras de estilo, criando uma hierarquia
visual.

Agora, vamos aplicar a estrutura do BEM. Para que fique claro como essas três
abordagens funcionam na prática, começaremos criando estilos com base no
estilo básico que já temos, utilizando o Nesting. Em seguida, transformaremos
essa estrutura para aplicar a metodologia BEM, destacando as diferenças e os
benefícios que cada abordagem traz para a organização do CSS. Essa
comparação nos permitirá entender melhor como cada método pode ser
utilizado de maneira eficaz em nossos projetos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (2/9) 621
A primeira etapa que vamos abordar será a modificação das classes
para torná-las mais específicas, facilitando assim a aplicação do Nesting.
Para isso, vamos rever as classes que já temos e adaptá-las, garantindo
que elas reflitam de maneira clara a hierarquia e a estrutura do
componente.

Ao tornar as classes mais específicas, conseguiremos criar uma

organização melhor e permitir que os estilos sejam aplicados de forma
mais eficiente. Assim, poderemos aninhar as regras de estilo de maneira
lógica e intuitiva, aproveitando a estrutura existente para otimizar nosso
código CSS.

Depois de ajustarmos as classes, vamos aplicar o Nesting para criar uma

hierarquia que faça sentido, garantindo que cada estilo seja aplicado
corretamente dentro do contexto do componente. Com essas
modificações, estaremos prontos para avançar para a próxima etapa,
onde exploraremos a metodologia BEM e suas vantagens.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (3/9) 622
Continuando com as modificações das classes e aplicação do Nesting, repare que o layout da nossa seção está sendo aplicado mesmo
mudando a forma de aplicarmos as classes, lembrando que sempre precisamos fazer alteração na classe html e trocar o nome da
classe que está no css.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (4/9) 623
Seguindo para as próximas estruturas:

O uso de nesting no CSS permite uma estruturação mais organizada e

intuitiva do código, facilitando a leitura e a manutenção. Por exemplo,
ao aplicar nesting, uma regra CSS que originalmente ocupava 121
linhas pode ser reduzida para apenas 108 linhas. Essa redução não
apenas simplifica o código, mas também reflete uma hierarquia visual
que torna mais fácil entender as relações entre os elementos. Assim, o
nesting contribui para um desenvolvimento mais eficiente e
sustentável, especialmente em projetos maiores.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (5/9) 624
Após a criação da estrutura de nesting no CSS, é hora de aprimorar ainda mais nossa organização e clareza utilizando a metodologia
BEM (Block, Element, Modifier). Essa abordagem nos permitirá nomear e estruturar nossos estilos de forma mais eficiente, facilitando
a manutenção e a escalabilidade do projeto.

No próximo arquivo, iremos reestruturar nosso código para incorporar os princípios da metodologia BEM, garantindo que cada
componente, elemento e variação esteja claramente definido e facilmente identificável. Essa transição nos ajudará a criar um código
mais coeso e intuitivo, que pode ser facilmente compreendido e atualizado por toda a equipe.

A metodologia BEM (Block, Element, Modifier) é uma abordagem que facilita a criação de um CSS bem estruturado, permitindo uma
organização clara e intuitiva. Cada parte do código é nomeada de maneira que sua relação e função sejam facilmente compreendidas.
Então vamos refatorar nosso arquivo html com a classes de acordo com essa estrutura, identificando as partes se será bloco, elemento
ou modificador.

Bloco: .caixa
• O bloco principal é identificado pela classe .caixa. Essa classe representa um componente independente que pode ser reutilizado
em diferentes partes do projeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (6/9) 625
Elementos: __
• Os elementos são partes do bloco que não fazem sentido fora dele. Cada elemento é identificado pelo uso do double underscore
(__), que indica que são componentes que pertencem ao bloco caixa.

Exemplos:
• .caixa__container-h3: Um contêiner que abriga um cabeçalho (h3), mostrando que é um elemento específico dentro do bloco caixa.
• .caixa__logos: Uma área que contém os logos dos cursos oferecidos.
• .caixa__link: Um link que pertence à seção de redes sociais.

Elementos de Lista:
• As classes como .caixa__item-lista indicam que cada item dentro da lista é um elemento do bloco caixa. Essa nomenclatura ajuda a
manter a hierarquia e a funcionalidade clara.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (7/9) 626
A estrutura Html ficará da seguinte maneira:

Vamos adicionar uma classe chamada caixa__img-curso em todos os elementos de imagem dentro dos elementos âncoras
caixa__círculo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (8/9) 627

E para todos os elementos da nossa ul, vamos adicionar uma classe específica e alterar o
arquivo CSS para obtermos uma estrutura separadas pelas classe implementadas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Exemplo Prático (9/9) 628
Para organizar os elementos no CSS, vamos utilizar a seguinte estrutura:
3
2
1

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Desafio - Apresentação (1/1) 629
No passado, criamos uma página web que anuncia uma Smart TV. Agora, vamos pegar essa estrutura e transformá-la utilizando a
metodologia BEM. Essa é uma oportunidade para aprofundar suas habilidades e entender como organizar o código de forma mais
eficiente.

Neste desafio, você irá:

• Modificar a estrutura HTML e CSS da página da Smart TV.
• Aplicar a metodologia BEM para melhorar a clareza e a manutenção do código.
• Criar uma página mais organizada e semântico que capte a atenção do público.

Ao final deste módulo, você deve ser capaz de:

• Compreender a importância da metodologia BEM na organização do código.
• Aplicar a estrutura BEM a projetos existentes.
• Criar páginas web que são não apenas funcionais, mas também bem estruturadas e fáceis de manter.

Hora de Praticar!
Agora é a sua vez!
• Modifique a estrutura HTML e CSS da sua página de anúncio da Smart TV utilizando a metodologia BEM.
• Sinta-se à vontade para ajustar a organização e adicionar novos elementos se necessário.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Desafio - Gabarito (1/6) 630
Vamos modificar nosso projeto passo a passo para utilizar a metodologia BEM. A primeira coisa que devemos fazer é analisar quais
blocos estão presentes na nossa estrutura. Podemos considerar que teremos um bloco principal que será responsável por armazenar
tudo, além de blocos menores, como um bloco para as características do produto, um bloco para precificação, entre outros que
possamos identificar.
É importante lembrar que a criação da estrutura pode variar de acordo com o desenvolvedor, e não existe uma regra rígida sobre o
que deve ou não ser considerado um bloco. O objetivo da metodologia BEM é facilitar a compreensão e a manutenção do código,
promovendo uma estrutura organizada e clara.

Primeiro vamos adicionar uma classe no elemento main, que vamos considerar um bloco e transformar seu seletor de tag por classe
no CSS, além de aplicar a estrutura que vimos aula passada no arquivo CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Desafio - Gabarito (2/6) 631

Agora o elemento h1 dentro da seção de classe principal, irá possuir uma classe que identifique-o como elemento e vamos alterar a
forma que identificamos esse elemento no arquivo CSS.

Podemos entender que o [Link]-h1 não é um elemento e sim apenas uma modificação que precisar fazer de forma específica, e é
preciso analisar se vale a pena utilizar a metodologia do BEM ou não, no nosso caso como o Desafio é praticarmos esse conceito,
vamos deixar tudo alinhado com essa metodologia.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Desafio - Gabarito (3/6) 632
Podemos considerar que o elemento .container-figure poderia ser um bloco, já que possui vários elementos associados a ele. No
entanto, ele não é um bloco independente, pois não consegue atuar sozinho; ele está inserido na .seçã[Link], o que lhe confere
sentido dentro do contexto geral da estrutura.

Dentro desse elemento, vamos criar as classes para cada um respectivamente e alterar o CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Desafio - Gabarito (4/6) 633
Agora seguindo para a próxima div, vamos adicionar todas as classes nos elementos, seguindo a estrutura do BEM:

Feito isso podemos substituir todos os elementos h2,para a nova classe h2. Continuando nessa lógica vamos implementar também
nos elementos elementos da próxima div que será renomeada a classe para principal_container-condicoes:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Desafio - Gabarito (5/6) 634
A próxima estrutura que iremos modificar será a âncora do link:

Feito isso encerramos a modularização e metodologia do BEM, da estrutura seção principal. E agora vamos para a próxima seção que
será a Características.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 7 – Desafio - Gabarito (6/6) 635
Vamos continuar a construir as estruturas dessa seção adicionando a seguinte estrutura de classes para todos containers (div) que
possuem h3 e uma lista.

Para finalizar o nosso desafio, vamos aplicar o BEM na última estrutura que é link do whatsapp:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 636
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT

Módulo 8

EXTENSÃO - SASS
EXTENSÃO - SASS
EXTENSÃO - SASS DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Apresentação do Módulo (1/1) 637
Neste módulo, vamos expandir nossas habilidades em front-end com o uso do SASS (Syntactically Awesome Style Sheets), uma
extensão avançada do CSS que permite escrever código mais organizado, reutilizável e poderoso. Ao longo das próximas aulas,
abordaremos conceitos como:

• Nesting: Aprenderemos como estruturar nosso CSS de maneira hierárquica, tornando o código mais legível e refletindo melhor a
estrutura HTML.

• Variáveis: Vamos explorar como criar e usar variáveis para facilitar a manutenção de estilos, permitindo mudar cores, tamanhos e
fontes de forma rápida e centralizada.

• Mixins e Functions: Conheceremos formas de criar blocos de estilos reutilizáveis e funções para automatizar padrões, ganhando
eficiência no desenvolvimento.

• Partials e Modularização: Descobriremos como dividir o código SASS em múltiplos arquivos e organizá-los de forma mais limpa e
lógica.

Além disso, exploraremos o uso do [Link] e do NPM para automatizar processos, gerenciar dependências e configurar um ambiente
de desenvolvimento prático e escalável. Prepare-se para concluir o módulo com um desafio prático que consolidará todos esses
conhecimentos e levará seu trabalho a um novo nível!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – O que é SASS? (1/2) 638
O que é o SASS?

SASS, ou Syntactically Awesome Style Sheets, é um pré-processador de CSS que amplia as funcionalidades do CSS tradicional,
permitindo escrever estilos de forma mais poderosa e organizada. Ele nos oferece recursos como variáveis, nesting
(aninhamento de regras), mixins e funções, tornando o desenvolvimento de estilos mais eficiente e o código mais fácil de
manter.

Ao escrevermos em SASS, criamos nossos estilos em arquivos com a extensão .scss ou .sass. Esses arquivos, porém, não podem
ser lidos diretamente pelos navegadores. Em vez disso, o SASS compila esses arquivos em CSS padrão, transformando o código
escrito em SASS/SCSS para um formato que o navegador consegue interpretar.

Para saber mais e acessar a documentação completa, você pode visitar o site oficial do SASS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – O que é SASS? (2/2) 639
Quando escrevemos código em SASS, estamos criando arquivos com a extensão .scss ou .sass que contêm estilos escritos em
uma sintaxe mais avançada do que o CSS puro. No entanto, navegadores não conseguem ler diretamente esses arquivos, pois
só entendem CSS.

Para que o navegador possa aplicar esses estilos, precisamos de um compilador SASS, que converte (ou "compila") o código
SASS para um arquivo CSS padrão. Esse processo de compilação traduz todos os recursos avançados do SASS, como variáveis e
mixins, em código CSS, permitindo que o navegador carregue e aplique esses estilos na página.

O fluxo é, então, o seguinte:

• Escrevemos em SASS – Usamos recursos avançados de CSS, criando arquivos .scss ou .sass.

• O compilador converte para CSS – O compilador SASS transforma nosso código em um arquivo .css.

• O navegador aplica o CSS – O arquivo CSS final é lido pelo navegador e aplicado à página.

Esse processo é feito automaticamente com o uso de ferramentas que rodam o compilador sempre que o código SASS é
alterado, facilitando o desenvolvimento.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – O que é NODEJS e o que é NPM? (1/2) 640
[Link] é um ambiente de execução de JavaScript que possibilita rodar código fora do navegador. No contexto do front-end,
[Link] é fundamental porque permite usar ferramentas e pré-processadores (como o SASS) para melhorar e automatizar o
desenvolvimento de estilos e outras tarefas.

Com o [Link], é possível:

• Compilar pré-processadores: Ferramentas como o SASS, que precisam compilar código em CSS, utilizam o [Link] para
automatizar esse processo. Cada vez que salvamos um arquivo SASS, o [Link] compila automaticamente o arquivo em CSS,
aplicando as mudanças instantaneamente no projeto.

• Automatizar tarefas repetitivas: Usando [Link] junto com bibliotecas e ferramentas (como Gulp ou Webpack), você pode
automatizar diversas tarefas, como minificar CSS, otimizar imagens e recarregar automaticamente a página no navegador.

• Instalar e gerenciar pacotes via NPM: [Link] traz o NPM (Node Package Manager), que permite baixar e gerenciar pacotes
e bibliotecas específicas para o front-end, como o SASS, e muitas outras que ajudam a agilizar o desenvolvimento e
padronizar o fluxo de trabalho.

Dessa forma, mesmo para desenvolvedores focados no front-end, o [Link] é uma ferramenta essencial para utilizar SASS de
maneira mais eficiente e automatizada, além de melhorar a produtividade no dia a dia.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – O que é NODEJS e o que é NPM? (2/2) 641
NPM (Node Package Manager) é o gerenciador de pacotes padrão para o [Link]. Ele facilita a instalação e o gerenciamento de
pacotes, como o SASS, permitindo que desenvolvedores configurem e organizem dependências de maneira eficiente no
projeto.

No contexto de usar SASS, o NPM é essencial porque permite:

• Instalar o SASS e outras ferramentas automaticamente: Com um simples comando npm install sass, o NPM baixa e instala
o compilador SASS, junto com suas dependências.

• Automatizar a compilação do SASS para CSS: Com o NPM, você pode configurar scripts no projeto (em [Link]) para
que o SASS seja automaticamente compilado. Por exemplo, o comando npm run sass pode ser configurado para rodar
sempre que você quiser compilar o código SASS para CSS.

• Gerenciar dependências do projeto: O NPM registra todas as bibliotecas e ferramentas usadas no projeto (como o SASS) em
um arquivo [Link], permitindo que qualquer desenvolvedor possa instalar as mesmas dependências no projeto com o
comando npm install.

Com o NPM, todo o processo de instalação, atualização e execução do SASS fica mais simples e organizado, permitindo que
você automatize e padronize o desenvolvimento.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Instalando o NODEJS, NPM e SASS (1/6) 642
Para baixar e instalar o [Link], siga estes passos:

• Acesse o site oficial do [Link]: Visite [Link] onde você encontrará as opções de download para diferentes
sistemas operacionais (Windows, macOS e Linux).

• Escolha a versão do [Link]:

• Você verá duas opções: LTS (Long-Term Support) e Current.
• A versão LTS é recomendada para a maioria dos usuários, pois é mais estável e adequada para projetos em produção.
• A versão Current inclui os recursos mais recentes, mas pode ser menos estável para projetos em longo prazo.

• Baixe o instalador: Clique na versão desejada para baixar o instalador adequado ao seu sistema operacional.
• Instale o [Link]:
• Windows e macOS: Abra o arquivo de instalação e siga as instruções do assistente de instalação. Durante a instalação,
certifique-se de selecionar a opção "Add to PATH" para que você possa acessar o [Link] e o NPM pelo terminal.
• Linux: Siga as instruções específicas do site para instalar via gerenciador de pacotes (como apt para distribuições baseadas
em Debian).

• Verifique a instalação:
• Após instalar, abra o terminal (ou prompt de comando) e digite node -v para verificar a versão do [Link] e npm -v para
verificar a versão do NPM.
• Se ambos retornarem uma versão, a instalação foi concluída com sucesso.

Agora, o [Link] e o NPM estão prontos para uso, permitindo que você instale pacotes, como o SASS, e utilize outras
ferramentas de desenvolvimento.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Instalando o NODEJS, NPM e SASS (2/6) 643
Navegando entre Pastas com o Comando cd
O comando cd significa "change directory" (mudar diretório) e é usado no terminal para navegar entre as pastas do seu
computador. Vamos entender como usá-lo de forma simples!

Exemplo Prático
Você está atualmente na pasta chamada Extensao SASS. Dentro dessa pasta, existe outra pasta chamada SASS, e você quer
entrar nela. Para fazer isso, siga estas etapas:
• Abra o terminal: Você pode abrir o terminal ou prompt de comando no seu computador.
• Digite o comando: Para entrar na pasta SASS, você vai usar o seguinte comando:

• O que isso faz? Esse comando diz ao seu computador para "mudar para" a pasta SASS. Agora você está dentro da pasta
SASS, e todos os comandos que você digitar a partir daqui se aplicarão a essa pasta.
• Confirmando a Navegação: Para ter certeza de que você está na pasta correta, você pode usar o comando pwd (print
working directory), que mostrará o caminho da pasta atual.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Instalando o NODEJS, NPM e SASS (3/6) 644
Inicializando o NPM no Visual Studio Code

No VS Code, você pode abrir o terminal integrado de duas maneiras:

• Usando o Menu: Vá até o menu superior e clique em Terminal > New Terminal.
• Atalho de Teclado: Pressione Ctrl + ` (aspas simples - tecla que fica logo acima da tecla Tab) para abrir o terminal.

Navegar até a Pasta do Seu Projeto:

• Se você ainda não criou uma pasta para o seu projeto, você pode fazer isso no explorador de arquivos do VS Code ou usando o
terminal.
• Para navegar até a pasta do projeto, use o comando cd seguido do nome da pasta. Por exemplo:

Inicializar o NPM:
• Com o terminal aberto e na pasta do seu projeto, digite o seguinte comando e pressione Enter:

O que acontece? O NPM iniciará um assistente que fará perguntas sobre o seu projeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Instalando o NODEJS, NPM e SASS (4/6) 645
Responder às Perguntas:
• O assistente fará perguntas como:
• name: O nome do seu projeto.
• version: A versão atual (padrão é 1.0.0).
• description: Uma breve descrição do seu projeto.
• entry point: O arquivo principal (normalmente [Link]).
• test command: Comando para rodar testes (pode ser deixado em branco por enquanto).
• repository: O repositório do seu código (pode ser deixado em branco por enquanto).
• keywords: Palavras-chave para ajudar a identificar seu projeto.
• author: Seu nome ou o nome do autor do projeto.
• license: A licença do seu projeto (pode usar MIT como padrão).
• Você pode pressionar Enter para aceitar as opções padrão ou digitar suas próprias respostas.

Arquivo [Link]:
• Após responder todas as perguntas, o NPM criará um arquivo chamado [Link] na pasta do seu projeto. Você pode ver
esse arquivo na aba "Explorer" do VS Code, à esquerda.

O que é o [Link]?
• O [Link] contém todas as informações que você forneceu e outras que o NPM adicionou, como as dependências do
seu projeto (caso você adicione pacotes futuramente).

Importância do [Link]
• Organização: Mantém as informações do seu projeto em um só lugar.
• Gestão de Dependências: Facilita a instalação e o gerenciamento de pacotes com o NPM.
• Colaboração: Outros desenvolvedores podem facilmente instalar as dependências do seuDESENVOLVIMENTO
projeto WEB com umIMPRESSIONADOR
– FULL STACK único comando,
I HASHTAG PROGRAMAÇÃO

npm install.
 000
Módulo 8 – Instalando o NODEJS, NPM e SASS (5/6) 646
Instalando o SASS com NPM
Depois de inicializar o NPM e criar o arquivo [Link], você está pronto para instalar o SASS no seu projeto. O SASS é um
pré-processador CSS que permite escrever estilos de forma mais eficiente. Aqui está como instalá-lo:

Para instalar o SASS como uma dependência do seu projeto, você pode usar o seguinte comando:

O que acontece?
• O comando npm install sass irá baixar e instalar o SASS na sua pasta de projeto.
• A opção --save-dev adiciona o SASS como uma dependência de desenvolvimento no seu arquivo [Link], o que significa
que ele será usado apenas durante o desenvolvimento e não será incluído na versão final do seu projeto.

Verificar a Instalação:
• Após a instalação, você pode verificar se o SASS foi adicionado com sucesso ao seu projeto. Abra o arquivo [Link] e
procure por uma seção chamada "devDependencies". Você deverá ver algo parecido com isso:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Instalando o NODEJS, NPM e SASS (6/6) 647
Restaurando a Pasta node_modules
Se a pasta node_modules foi apagada por algum motivo, você pode facilmente restaurá-la usando o arquivo [Link]. Este
arquivo contém todas as dependências do seu projeto, e o NPM pode usá-lo para reinstalar tudo o que você precisa.

• Verifique se o [Link] Está Presente:

• Certifique-se de que você ainda tem o arquivo [Link] na raiz do seu projeto. Este arquivo deve conter uma lista de
todas as dependências que você instalou anteriormente.

Instalar as Dependências Novamente:

• Para reinstalar a pasta node_modules, execute o seguinte comando:

O que acontece?
• O comando npm install verifica o arquivo [Link] e instala todas as dependências listadas nele na pasta node_modules.
• Isso cria uma nova pasta node_modules contendo todos os pacotes necessários para o seu projeto funcionar corretamente.

Verifique se Tudo Está Funcionando:

• Após a instalação ser concluída, você pode verificar se a pasta node_modules foi criada novamente no seu projeto.
• Além disso, teste seu projeto para garantir que tudo esteja funcionando como esperado.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Criando e Compilando nosso primeiro código (1/4) 648
Agora que você tem o SASS instalado e configurado, o próximo passo é criar um arquivo SASS chamado [Link]. Esse arquivo
será onde você escreverá seu código SASS, e não precisará criar manualmente o arquivo [Link], pois ele será gerado
automaticamente durante o processo de compilação.

Criar um Novo Arquivo SASS:

• Clique com o botão direito na área do Explorador de Arquivos no VS Code (geralmente à esquerda) e selecione "Novo
Arquivo".
• Nomeie o arquivo como [Link] e pressione Enter. Você agora deve ter um arquivo SASS vazio para começar a trabalhar.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Criando e Compilando nosso primeiro código (2/4) 649
Vamos iniciar um arquivo HTML, que receberá o link referente ao arquivo que será compilado/criado [Link].

Dentro do seu arquivo [Link], você pode definir scripts que facilitam tarefas comuns no seu projeto. O script que você
mencionou é usado para compilar arquivos SASS em CSS. Vamos analisar cada parte do script:

O que é "scripts"?
• A seção "scripts" no [Link] permite que você defina comandos que podem ser executados com o NPM (Node Package
Manager). Isso é útil para automatizar tarefas repetitivas, como a compilação de arquivos SASS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Criando e Compilando nosso primeiro código (3/4) 650
Para executar o script que você definiu, use o seguinte comando no terminal:

O que acontece?
• Ao rodar esse comando, o NPM irá procurar o script "compile:sass" que você definiu no [Link] e executará o comando
associado a ele. Isso irá compilar o arquivo [Link] em [Link].

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Criando e Compilando nosso primeiro código (4/4) 651

Esse script é uma adição importante ao seu fluxo de trabalho, pois permite que você acompanhe automaticamente as
alterações feitas nos arquivos SASS e as compile em CSS sempre que uma mudança ocorrer.

• -w (ou --watch): este argumento é a parte mais importante do comando. Ele instrui o compilador SASS a "observar" (ou
"monitorar") o arquivo [Link]. Isso significa que o SASS ficará atento a qualquer alteração nesse arquivo (ou em qualquer
arquivo SASS que ele importar).

Por que Usar o Script "watch"?

• Automatização da Compilação:
• Ao usar o script watch, você não precisa compilar manualmente seus arquivos SASS toda vez que fizer uma alteração. O SASS
irá automaticamente recompilar o CSS sempre que detectar uma mudança no arquivo [Link].
• Aumento da Produtividade:
• Isso permite que você se concentre no desenvolvimento, pois não precisa interromper seu fluxo de trabalho para executar o
comando de compilação repetidamente. Você pode escrever seu código SASS e ver as alterações refletidas instantaneamente
no CSS.
• Ideal para Desenvolvimento:
• O monitoramento contínuo é especialmente útil durante a fase de desenvolvimento, quando você está frequentemente
fazendo alterações no estilo e precisa ver resultados imediatos. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Variáveis (1/8) 652
Vamos entender a diferença entre variáveis em CSS e SASS, pois essa é uma das características que tornam o SASS um
poderoso pré-processador CSS.

Variáveis em CSS

Como Funciona:
• Declaração: Em CSS, as variáveis são declaradas usando a sintaxe --nome-da-variavel: valor; dentro de um seletor.

• Escopo: As variáveis CSS têm escopo limitado ao seletor onde são definidas, mas podem ser acessadas em qualquer lugar
dentro desse seletor ou em seus filhos.

• Uso: Para usar uma variável, você precisa chamá-la com a função var(), assim: background-color: var(--nome-da-variavel);.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Variáveis (2/8) 653

Variáveis em SASS

Como Funciona:
• Declaração: As variáveis em SASS são declaradas simplesmente com um $ seguido do nome da variável: $nome-da-variavel:
valor;.

• Escopo: As variáveis SASS podem ser acessadas em qualquer lugar dentro do arquivo, desde que sejam declaradas antes de
seu uso, e têm escopo global por padrão, a menos que definidas dentro de um bloco específico.

• Uso: Você usa a variável diretamente pelo nome, sem precisar de uma função para acessá-la, assim: background-color:
$nome-da-variavel;.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Variáveis (3/8) 654
Comparação

Sintaxe:
• CSS: Usa -- para declarar e var() para usar.
• SASS: Usa $ para declarar e o nome diretamente para usar.

Escopo:
• CSS: O escopo é limitado ao seletor onde a variável é declarada.
• SASS: O escopo é global por padrão, a menos que esteja dentro de um bloco.

Compatibilidade:
• CSS: As variáveis CSS são uma funcionalidade padrão do CSS e podem ser usadas em qualquer navegador moderno.
• SASS: As variáveis SASS são uma funcionalidade do pré-processador e precisam ser compiladas para CSS antes de serem
utilizadas no navegador.

Uso em Cálculos:
• CSS: As variáveis CSS podem ser usadas em cálculos, mas com algumas limitações.
• SASS: O SASS permite operações matemáticas diretas com variáveis, facilitando a manipulação de valores.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Variáveis (4/8) 655
Agora vamos modificar o nosso arquivo HTMLpara estruturar ele com conceitos e boas práticas aprendidos até o momento e
vamos aplicar algumas regras de estilização dentro do nosso arquivo [Link].

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Variáveis (5/8) 656
Após a definição, você pode usar $cinza em qualquer lugar do seu código SASS, incluindo dentro de propriedades CSS, como
box-shadow. Assim, o SASS irá substituir a variável pelo seu valor correspondente quando for compilado para CSS.

Compilação: Quando você compila seu arquivo SASS, a linha box-shadow: 0 0 1rem rgba($cinza, 0.15); será convertida para CSS
normal. O resultado final será algo como:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Variáveis (6/8) 657
O método darken() é uma função do SASS que permite escurecer uma cor específica em uma determinada porcentagem.
Quando usamos color: darken($cinza, 20%);, estamos aplicando essa função à variável $cinza, que foi definida anteriormente.

Como Funciona o Método darken()

• Definição da Variável: Suponha que você tenha a variável $cinza definida como #303030:

• Uso da Função darken(): Ao usar a função darken(), você especifica a cor a ser escurecida e a porcentagem que deseja
escurecer.

• Resultado da Compilação: Quando você compila esse código SASS, a função darken() calcula a nova cor escurecida e
substitui a linha no CSS resultante. A cor resultante será uma versão mais escura de #303030.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Variáveis (7/8) 658
A função lighten() no SASS é utilizada para clarear uma cor específica em uma determinada porcentagem.

As variáveis no SASS oferecem uma série de benefícios que tornam o desenvolvimento de estilos CSS mais eficiente e
organizado. Aqui estão os principais benefícios de usar variáveis no SASS:

Reutilização de Cores e Estilos

• Consistência: Definir uma cor ou estilo como uma variável permite que você use o mesmo valor em várias partes do seu
código, garantindo que as cores e os estilos sejam consistentes em todo o projeto.

• Facilidade de Atualização: Se você precisar mudar uma cor ou valor, basta atualizar a variável em um único lugar, e todas as
instâncias que usam essa variável serão automaticamente atualizadas.

Melhoria na Manutenção do Código

• Clareza: Usar variáveis com nomes significativos (por exemplo, $cor-principal em vez de #3498db) melhora a legibilidade do
código, tornando-o mais fácil de entender e manter.

• Simplificação de Alterações: Quando é necessário fazer ajustes de design, como mudar uma paleta de cores ou valores de
espaçamento, você pode simplesmente alterar as variáveis em vez de procurar manualmente por cada instância no código.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Variáveis (8/8) 659
Criação de Paletas de Cores Dinâmicas
• Cores Derivadas: Você pode criar cores derivadas usando funções como lighten() e darken() com variáveis. Por exemplo, se você tem
uma cor base definida, pode facilmente criar variantes mais claras ou escuras a partir dela.

• Variações em Temas: Isso facilita a criação de diferentes temas, já que você pode alterar as variáveis em vez de reescrever todo o CSS.

Organização e Estruturação do Código

• Agrupamento de Estilos: Variáveis permitem que você agrupe valores relacionados, como espaçamentos, tamanhos de fonte e cores,
criando um código mais organizado e fácil de navegar.

• Facilidade de Criação de Funções: Com variáveis, você pode criar funções personalizadas que dependem de valores dinâmicos,
aumentando ainda mais a flexibilidade do seu código.

Compatibilidade com Funcionalidades do SASS

• Integração com Mixins e Funções: Variáveis podem ser usadas em mixins e funções, permitindo que você escreva estilos mais
complexos de forma reutilizável.

• Configurações e Temas: Você pode facilmente definir variáveis para configurações de tema e usá-las em mixins para criar estilos
responsivos e adaptáveis.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Nesting x Native Nesting (1/4) 660
Nesta aula, vamos explorar a combinação do Nesting com a Metodologia BEM para aprimorar
nosso uso do SASS. O Nesting permite que organizemos o CSS de forma hierárquica, refletindo
a estrutura do HTML e facilitando a leitura do código. Com a Metodologia BEM, adotamos uma
abordagem que define blocos, elementos e modificadores, promovendo a reutilização e a
manutenção do código. Iremos discutir as diferenças entre o Nesting e a escrita de CSS nativo,
destacando como essa combinação pode resultar em um código mais claro e eficiente, ao
mesmo tempo que respeita as boas práticas de desenvolvimento.

Primeiro vamos alterar as classes do arquivo HTML, para utilizar a metodologia do BEM e utilizar
o Nesting para aninhar os estilos já criado no [Link].

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Nesting x Native Nesting (2/4) 661

O que aplicamos aqui é chamado de Native Nesting, uma das funcionalidades do SASS que permite que você escreva estilos de
forma aninhada, seguindo a estrutura hierárquica do HTML. O Native Nesting proporciona uma maneira intuitiva de organizar seu
código CSS, agrupando estilos relacionados dentro de seus blocos principais, o que facilita a leitura e manutenção.

No código anterior, temos um bloco principal chamado .caixa, que contém várias regras de estilo para o seu layout, como display,
padding e box-shadow. Dentro desse bloco, usamos o Native Nesting para definir os estilos de elementos específicos, como
.caixa__h1, .caixa__h2, e .caixa__texto, utilizando o símbolo & para referenciar o seletor pai. Isso significa que, por exemplo, .caixa__h1
será interpretado como .caixa .caixa__h1, permitindo uma estrutura clara e lógica.

Esse tipo de organização não só torna o código mais legível, mas também ajuda a manter a consistência nas regras de estilo, já que
as propriedades relacionadas ficam agrupadas. Além disso, o uso de variáveis, como $cinza e $azul-escuro, para definir cores e
outros valores, proporciona uma flexibilidade adicional, permitindo alterações rápidas em todo o projeto. Assim, o Native Nesting se
torna uma ferramenta poderosa para otimizar o desenvolvimento de CSS com SASS, promovendo uma abordagem mais organizada
e eficiente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Nesting x Native Nesting (3/4) 662
O Nesting do SASS é uma funcionalidade que permite organizar regras de estilo de forma hierárquica, mas sem a necessidade de
usar o seletor & para referenciar o elemento pai. Em vez disso, você pode simplesmente aninhar os seletores diretamente, tornando o
código ainda mais intuitivo e fácil de entender. Essa abordagem se assemelha à estrutura do HTML, onde os elementos são filhos de
outros elementos.

Por exemplo, ao definir estilos para elementos dentro de uma .caixa, você pode aninhá-los diretamente, assim:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Nesting x Native Nesting (4/4) 663

Estamos usando o operador & do Sass para criar

seletores mais específicos e organizados dentro de uma
estrutura BEM.

• &__h1: A utilização de &__h1 refere-se ao conceito de

BEM (Block, Element, Modifier). O & no Sass funciona
como um "atalho" para o seletor pai, no caso, a classe
.caixa. Assim, &__h1 se transforma em .caixa__h1, que
indica um elemento (__h1) pertencente ao bloco
.caixa. Isso ajuda a manter o código mais organizado e
evita a necessidade de escrever o nome completo do
seletor toda vez.

• &
: Já &:hover aplica um efeito de hover sobre o elemento
.caixa. Quando o usuário passar o mouse sobre .caixa, o
Sass irá interpretar &:hover como .caixa:hover, o que
mudará a cor do texto para $azul-escuro. Esse uso do &
simplifica o código ao permitir que efeitos ou
pseudoclasses sejam adicionados diretamente dentro
do bloco pai.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Functions (1/4) 664

No Sass, as functions são blocos de código reutilizáveis que permitem realizar cálculos e operações complexas, retornando valores
que podem ser usados em outras partes do estilo. Functions ajudam a tornar o CSS mais dinâmico, permitindo a criação de estilos
que se adaptam a diferentes variáveis, simplificando o desenvolvimento.

Como Funcionam as Functions no Sass

Assim como em linguagens de programação, as functions no Sass recebem parâmetros, executam uma lógica e retornam um
valor. Esse valor pode ser aplicado diretamente às propriedades de estilo. Por exemplo, você pode criar uma função para ajustar a
opacidade de uma cor, calcular tamanhos baseados em proporções ou até mesmo padronizar espaçamentos e tamanhos de fontes.

Functions permitem criar pequenas fórmulas reutilizáveis que tornam o código mais flexível. Vamos analisar o exemplo da function
multiplicar, que cria uma operação de multiplicação. Aqui está um exemplo básico de como criar e usar essa função no Sass.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Functions (2/4) 665
Explicação do Exemplo

• Definição da Function: Aqui, a function multiplicar é definida para receber dois parâmetros, $a e $b.
• Retorno: Dentro da function, o @return multiplica os dois valores recebidos, retornando o resultado. Esse valor pode ser aplicado
diretamente nas propriedades CSS.

Usando uma function em Sass como multiplicar, podemos fazer cálculos dinâmicos diretamente nas propriedades CSS. No
exemplo abaixo, usamos a function multiplicar para definir o padding:

• Function multiplicar: Essa function recebe dois parâmetros, $a e $b, e retorna o resultado da multiplicação entre eles.
• Chamada da Function: No estilo do .elemento, chamamos multiplicar(2, 1), o que retorna 2, pois estamos multiplicando 2 por 1.
• Cálculo Final: Após a chamada da function, o valor retornado (2) é multiplicado por 1rem, resultando em 2rem. Esse valor final é
aplicado como padding para o .elemento.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Functions (3/4) 666
Vantagens de Usar Functions para Cálculos

• Flexibilidade: Permite usar cálculos diretamente no código CSS, tornando o design responsivo e ajustável.
• Facilidade de Atualização: Alterações na function refletem em todos os lugares onde ela é usada, simplificando a manutenção.
• Redução de Código Repetitivo: Evita ter que reescrever o mesmo cálculo em diferentes partes do CSS, o que mantém o código
mais limpo e organizado.

Esse uso de functions em Sass facilita a criação de estilos dinâmicos e torna o CSS mais escalável e eficiente para o projeto.

A function dividir em Sass é outra maneira de realizar cálculos dinâmicos diretamente no código CSS. Assim como a function
multiplicar, dividir permite operações matemáticas, mas aqui o objetivo é dividir dois valores. Vamos entender como ela funciona
com um exemplo:

Explicação do Exemplo

• Definição da Function dividir: A function dividir recebe dois parâmetros, $a e $b, e retorna o valor da divisão entre eles ($a / $b).
• Chamada da Function no CSS: No estilo do .elemento, chamamos dividir(10, 2). Isso retorna o valor 5, já que 10 dividido por 2 é
igual a 5.
• Aplicação do Resultado: O valor resultante da divisão, 5, é multiplicado por 1rem, resultando em 5rem. Esse valor é então
aplicado como o margin para o .elemento.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Functions (4/4) 667
No Sass, também é possível realizar operações matemáticas diretamente nos valores das propriedades sem precisar criar uma
function separada. No exemplo padding: 2 * 1 * 1rem;, o Sass interpreta essa expressão e calcula o valor final automaticamente.

Aqui, a multiplicação direta 2 * 1 * 1rem resulta em 2rem. O Sass processa essa expressão antes de compilar para CSS final, o que
significa que o navegador verá apenas padding: 2rem; no arquivo CSS gerado.

Por Que Isso É Útil?

• Cálculos Diretos e Simples: Para operações básicas, como multiplicar ou dividir valores fixos, você não precisa criar uma function.
Basta realizar a operação no próprio valor da propriedade.
• Rapidez e Eficiência: Economiza tempo quando o cálculo é simples e repetitivo, pois reduz o código necessário e torna o CSS
mais direto.
• Controle Visual no Código: Esse método permite que você ajuste medidas diretamente na linha da propriedade, facilitando o
entendimento do cálculo sem precisar rastrear uma function separada.

Quando Usar
Esses cálculos diretos são úteis para definir tamanhos proporcionais ou espaçamentos em seu código, especialmente quando
deseja ajustar rapidamente os valores sem criar e configurar functions adicionais no Sass.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Mixins e Includes (1/5) 668
No Sass, mixins são blocos de código reutilizáveis que permitem agrupar e aplicar conjuntos de estilos CSS de forma eficiente e
flexível. Imagine que você tem um estilo específico que precisa ser repetido em várias partes do seu CSS. Com um mixin, é possível
definir esses estilos uma vez e aplicá-los em diversos lugares, evitando duplicação de código e facilitando manutenção.

Por Que Usar Mixins?

• Evita Repetição de Código: Quando você tem estilos comuns que aparecem em diferentes seletores, um mixin elimina a
necessidade de copiar e colar, centralizando o código em um único lugar.

• Facilita a Manutenção: Caso precise ajustar um estilo que está presente em várias partes, basta alterar o mixin, e todas as
ocorrências serão atualizadas automaticamente.

• Permite Flexibilidade com Parâmetros: Mixins aceitam parâmetros, o que permite ajustar estilos específicos, como tamanhos e
cores, sempre que necessário. Com isso, você pode criar um mixin para um botão que aceita diferentes cores e tamanhos.

Com Sass, você pode utilizar mixins para centralizar estilos recorrentes de maneira prática. Vamos ver um exemplo com o mixin
flex-j--center, que ajuda a centralizar elementos usando Flexbox:

Aqui, o mixin flex-j--center define display: flex e justify-content: center. Com ele, você
pode centralizar o conteúdo horizontalmente em qualquer elemento de forma
simples e sem repetir esse código em várias partes do CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Mixins e Includes (2/5) 669
Para aplicar um mixin no Sass, você usa a palavra-chave @include seguida pelo nome do mixin. Esse comando "inclui" o conjunto
de estilos definidos no mixin onde você quiser aplicá-los, evitando a repetição de código e facilitando a consistência visual no seu
CSS.
Vamos ver isso em prática:

Passo a Passo para Usar um Mixin

• Defina o mixin: Primeiro, você cria o mixin com a palavra @mixin, seguida pelo nome e pelos estilos que deseja reutilizar.
• Inclua o mixin no seletor desejado: Para aplicar esses estilos em um elemento específico, você usa @include seguido pelo nome
do mixin.

Conceito do @include
A palavra @include é como uma "chamada" ao mixin. Quando o Sass encontra @include flex-j--center;, ele substitui essa linha pelo
código dentro do mixin flex-j--center, que contém display: flex; justify-content: center;. Assim, o elemento .container recebe esses
estilos sem que você precise reescrevê-los diretamente.

Essa abordagem torna o código mais organizado e facilita a manutenção. Por exemplo, se precisar ajustar o alinhamento, basta
atualizar o mixin, e todos os elementos que o utilizam automaticamente refletem as mudanças, sem que você precise ir em cada
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
um para alterá-los.
 000
Módulo 8 – Mixins e Includes (3/5) 670
Os mixins com parâmetros no Sass permitem criar estilos altamente flexíveis e reutilizáveis. Utilizando parâmetros, você pode
passar valores específicos ao incluir um mixin, ajustando seus estilos conforme necessário, sem precisar reescrever o código para
cada caso.

No exemplo a seguir, definimos um mixin textos que aceita três parâmetros:

• $tamanho: define o tamanho da fonte.
• $peso: define o peso da fonte.
• $altura: define a altura da linha.
Esse mixin cria um conjunto de estilos que podemos ajustar facilmente ao fornecer valores para esses parâmetros.

Como Usar com Parâmetros

Na hora de aplicar esses estilos a um elemento, usamos @include textos() e passamos os valores desejados para cada parâmetro.
Veja um exemplo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Mixins e Includes (4/5) 671

• .titulo: o mixin é chamado com 2rem para o tamanho da fonte, 700 para o peso e 1.5 para a altura da linha.
• .subtitulo: o mixin é reutilizado com diferentes valores de tamanho, peso e altura da linha.

Benefícios dos Mixins com Parâmetros

• Reutilização Flexível: Com parâmetros, um mixin pode ser aplicado a vários elementos com configurações diferentes, mas com o
mesmo código-base.

• Manutenção Simplificada: Alterar o estilo em um único lugar afeta todos os elementos que o utilizam. Por exemplo, ao ajustar o
mixin textos, todos os elementos que o incluírem serão atualizados.

• Consistência Visual: Os mixins com parâmetros mantêm o design consistente e evitam a duplicação, pois você só precisa incluir
o mixin e passar os valores desejados.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Mixins e Includes (5/5) 672
O mixin flex exemplifica bem como podemos configurar layouts flexíveis no Sass ao utilizar parâmetros para controlar aspectos
específicos do layout Flexbox. Vamos analisar como ele funciona e como aplicá-lo.

Exemplo do Mixin flex

Esse mixin define um layout flexível, onde podemos passar parâmetros para ajustar o fluxo do Flexbox, alinhamento, distribuição e
espaçamento entre os itens.

Parâmetros do Mixin

• $flow: Define a direção e o comportamento do Flexbox (exemplo: row wrap, column nowrap).
• $align: Controla o alinhamento dos itens ao longo do eixo transversal, usando align-items.
• $justify: Define a distribuição dos itens no eixo principal com justify-content.
• $gap: Define o espaçamento entre os elementos flexíveis.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Extends(1/3) 673
No Sass, o conceito de @extend permite que você reutilize estilos definidos em um "placeholder selector" (um seletor que começa
com %), como %botao ou %botao--hover, economizando tempo e evitando duplicação de código. No exemplo dado, o @extend
ajuda a aplicar estilos comuns de botão em diferentes estados do link.

Vamos entender o código passo a passo:

Vamos incluir no HTML um link com a classe caixa__link, que será estilizado como um botão usando o @extend.

Usamos o @extend para que caixa__link herde os estilos de %botao e %botao--hover, placeholders que definem estilos de botão
básico e de hover. Veja como funciona:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Extends(2/3) 674
Definindo o Placeholder Selector:
• %botao e %botao--hover são placeholders que contêm os estilos que queremos aplicar em todos os links que tenham a aparência
de botões.
• %botao pode ter um estilo base, como padding, background-color, border, etc.
• %botao--hover pode ter estilos específicos para o estado hover e active, como uma cor de fundo mais escura ou uma borda
diferente.

Aplicando o Estilo com @extend:

• Em .caixa__link:link, .caixa__link:visited, e .caixa__link, o @extend %botao; aplica os estilos básicos do botão em todos os estados de
link padrão.
• Em .caixa__link:hover e .caixa__link:active, o @extend %botao--hover; aplica o estilo para os estados de interação, como ao passar
o mouse sobre o link ou ao clicar nele.

Vantagens do @extend com Placeholders

• Código Mais Limpo: Estilos reutilizáveis podem ser definidos uma vez e aplicados em vários lugares.
• Facilidade de Manutenção: Alterações no design do botão podem ser feitas no placeholder, e todos os elementos que o
estendem serão atualizados automaticamente.
• Consistência Visual: Todos os links que imitam botões terão o mesmo estilo, garantindo um visual uniforme.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Extends(3/3) 675

Um placeholder selector no Sass é um seletor especial que começa com o

símbolo %. Ele permite definir um conjunto de estilos que podem ser
reutilizados em outros seletores utilizando o comando @extend. Os
placeholders são particularmente úteis para evitar a duplicação de estilos e
para manter o código mais organizado e legível.

Definição do Placeholder:
• O placeholder %botao define estilos comuns que você deseja aplicar a
vários elementos que devem ter uma aparência de botão.
• Este placeholder inclui propriedades como align-self, color, font-weight,
background-color, border-radius, padding, text-decoration, e transition.

Hover State:
• O placeholder %botao--hover define os estilos que devem ser aplicados
quando o botão está em estado de hover. Aqui, mudamos a cor e a cor de
fundo para indicar visualmente que o botão está interativo.

Uso com @extend

Usando os placeholders, você pode facilmente aplicar esses estilos a
diferentes elementos, como no exemplo anterior com .caixa__link:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Content e If(1/7) 676

Na metodologia BEM, o uso de media queries dentro de blocos segue o princípio de organização, mantendo cada parte do
estilo do componente isolada e de fácil manutenção. Ao invés de aplicar as media queries fora do bloco ou da estrutura
específica, elas são incorporadas diretamente nos seletores do próprio componente.

Estrutura BEM com Media Queries

Por exemplo, no código abaixo, as media queries estão diretamente aninhadas nas classes do elemento correspondente:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Content e If(2/7) 677

Para utilizarmos uma ferramenta poderosa para aplicar media queries de maneira mais eficiente no SASS, começamos
criando um mixin. Mixins são blocos de código reutilizáveis que facilitam a organização de estilos, e, nesse caso, vamos
utilizá-los para gerenciar estilos responsivos de forma prática.

Estrutura do Mixin com Media Queries

Aqui está o início do nosso mixin, que chamaremos de query-pequena. Ele serve para aplicar estilos específicos para telas
pequenas:

Dentro do nosso mixin, usamos a palavra-chave @content. Pense no @content como uma “área” reservada para o
conteúdo que será adicionado posteriormente. É como um espaço vazio que será preenchido conforme necessário. Assim,
quando chamarmos o mixin query-pequena, todo o estilo que colocarmos dentro do @include será automaticamente
inserido no local onde está o @content dentro do mixin.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Content e If(3/7) 678
Ao usar @include query-pequena, o SASS substitui o @content pelos estilos que especificamos, aplicando-os dentro da media query.
Esse recurso nos dá flexibilidade para reutilizar o mesmo mixin em várias situações, adaptando-o conforme o contexto.

Vantagens

Usar @content em mixins com media queries oferece vários benefícios:

• Organização: Centraliza e padroniza as media queries no código.

• Reutilização: Permite reaproveitar o mesmo mixin em diferentes partes do projeto.
• Flexibilidade: Com o @content, conseguimos adaptar o mixin a diferentes situações, apenas alterando os estilos dentro do
@include.

Assim, esse método torna o uso de media queries mais limpo e eficiente, principalmente em projetos responsivos que exigem ajustes
para diferentes tamanhos de tela. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Content e If(4/7) 679
A padronização do nome dos mixins no SASS usando o formato respond-tamanho (por
exemplo, respond-small, respond-medium, respond-big) é uma prática que facilita a
organização e a leitura do código ao definir media queries para diferentes tamanhos de tela.
Esse padrão torna o código mais intuitivo e eficiente, pois, ao ver respond-small, fica
imediatamente claro que se trata de uma media query para uma tela pequena.

Como Funciona
No exemplo ao lado, cada mixin representa uma media query para um tamanho específico de
tela, com nomes que ajudam a identificar o contexto de uso:

• respond-small: Define estilos para telas pequenas (máximo de 30em).

• respond-medium: Define estilos para telas médias (máximo de 35em).
• respond-big: Define estilos para telas grandes (máximo de 40em).

Benefícios da Padronização

• Clareza: Com o nome respond seguido de um tamanho (small, medium, big), fica claro que
o mixin é voltado para media queries e que tipo de tela ele atende.

• Manutenção: Usar nomes padronizados facilita a localização e a edição de media queries,

especialmente em projetos grandes.

• Escalabilidade: Com uma estrutura de nomes como essa, fica mais fácil adicionar novas
media queries se necessário, mantendo a consistência (por exemplo, respond-large).
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Content e If(5/7) 680
Para tornar nossas media queries mais dinâmicas e flexíveis, podemos
aprimorar a criação dos nossos mixins utilizando condicionais @if e @else if no
SASS. Essa abordagem permite que um único mixin (respond) possa responder
a diferentes tamanhos de tela, dependendo de um parâmetro específico. Isso
reduz a necessidade de criar um mixin separado para cada tamanho de tela e
facilita a manutenção do código.

Passo a Passo: Como Funciona o Mixin respond

• Definição do Parâmetro: O mixin respond recebe um parâmetro chamado

$tamanho, que especifica o tamanho da tela. Com ele, podemos escolher
qual media query será aplicada (como small, medium ou big).

• Condicional @if e @else if: Usamos o @if para checar o valor do parâmetro
$tamanho e definir a media query correta. A cada condição, o mixin verifica o
valor e aplica a media query correspondente.

• Uso do @media com o @content: Dentro de cada condicional, incluímos

uma regra @media específica para o tamanho da tela correspondente. O
@content funciona como uma área reservada para o conteúdo que será
passado quando usarmos o @include para chamar o mixin.

No exemplo ao lado, cada condição (small, medium, big) aplica uma media
query com um limite de largura diferente.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Content e If(6/7) 681
No SASS, podemos definir valores padrão para os parâmetros em um mixin, o que facilita o uso e permite maior flexibilidade.
Quando um valor padrão é atribuído a um parâmetro, ele será aplicado automaticamente se o mixin for chamado sem especificar
um valor para esse parâmetro. Isso reduz a quantidade de código que precisamos escrever, pois não precisamos sempre passar
todos os valores ao chamar o mixin, apenas os que realmente desejamos personalizar.

• $flow: row: Se não especificarmos nada, o flex-flow será row, ou seja, os itens serão alinhados na horizontal.
• $align: stretch: O align-items será stretch por padrão, fazendo com que os itens ocupem toda a altura do contêiner.
• $justify: start: O justify-content será start, alinhando os itens no início do contêiner.
• $gap: 0: O espaçamento (gap) entre os itens será 0 caso não alteremos esse valor.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Content e If(7/7) 682
Se chamarmos o mixin sem passar nenhum valor, ele usará os valores padrão:

Resultado CSS gerado:

Também podemos passar apenas os valores que queremos modificar. Por exemplo, se quisermos definir um gap de 1rem e o justify-
content como center:

Resultado CSS gerado:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Build: Compile, Prefix and Compress(1/7) 683
O Que é o Processo de Build do SASS?
Quando falamos sobre Build no contexto do SASS, estamos nos referindo a uma série de etapas automatizadas que preparam o
código que você escreveu para ser utilizado em um site. O SASS (Syntactically Awesome Style Sheets) é uma linguagem de extensão
do CSS, que permite escrever estilos de forma mais poderosa e organizada. O processo de Build transforma esse código em um
arquivo CSS otimizado, que os navegadores podem entender e renderizar corretamente.
Vamos explorar cada uma das etapas envolvidas nesse processo:

1. Compile (Compilação do SASS para CSS)

O que é?
Compilação é o processo de transformar seu código SASS (ou SCSS) em CSS puro. O navegador só entende CSS, então precisamos
fazer essa conversão.

Como funciona?
Aqui está o comando que usamos para compilar:

• sass/[Link]: Este é o seu arquivo SASS original onde você escreveu seus estilos.
• css/[Link]: Este será o arquivo CSS gerado após a compilação.

Por que isso é importante?

A compilação garante que o código SASS que você escreveu seja convertido corretamente em CSS que o navegador pode ler. Sem
essa etapa, seus estilos não funcionariam em um site. DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Build: Compile, Prefix and Compress(2/7) 684
2. Prefix (Adição de Prefixos de Compatibilidade)

O que é?
Prefixos são instruções que ajudam o navegador a entender certas propriedades CSS que podem não ser suportadas da mesma
forma em todos os navegadores.

Como funciona?
Utilizamos o Autoprefixer para adicionar esses prefixos automaticamente. Veja como é feito:

• css/[Link]: Este é o arquivo CSS gerado na etapa anterior.

• css/[Link]: Este será o novo arquivo CSS com os prefixos adicionados.

Esse comando de prefixação tem o objetivo de adicionar prefixos de compatibilidade ao CSS, para que ele funcione corretamente
em diferentes navegadores. Vamos entender cada parte do comando:

postcss:
• O que é: PostCSS é uma ferramenta que permite processar o CSS com vários plugins. Neste caso, usamos o postcss com um
plugin específico, o autoprefixer.
• Por que usamos: Com ele, podemos aplicar automaticamente prefixos a certas propriedades CSS, garantindo compatibilidade
com navegadores antigos ou que não suportam as últimas versões de CSS da mesma forma.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Build: Compile, Prefix and Compress(3/7) 685
--use autoprefixer:
• O que é: Especifica que vamos usar o plugin Autoprefixer para adicionar prefixos.
• Como funciona: O autoprefixer examina o CSS e, com base nas propriedades encontradas, aplica prefixos (-webkit-, -moz-, -ms-,
etc.) onde for necessário. Esses prefixos ajudam o CSS a ser interpretado de maneira mais consistente em diferentes navegadores.

-b 'last 10 versions':
• O que é: Este argumento define quais versões de navegadores devem ser suportadas.
• Como funciona: -b é a abreviação de browsers, e 'last 10 versions' indica que queremos suportar as últimas 10 versões de cada
navegador importante. Isso ajuda a cobrir uma grande parte dos usuários sem aumentar demais o tamanho do CSS com prefixos
para versões muito antigas e raramente usadas.

css/[Link]:
• O que é: Este é o arquivo de entrada, ou seja, o CSS compilado pelo SASS na etapa anterior.
• Por que usamos: O [Link] é o ponto de partida para a aplicação dos prefixos. Esse arquivo ainda não possui os prefixos
adicionados.

-o css/[Link]:
• O que é: -o significa output (saída).
• Como funciona: Esse argumento define o nome do arquivo final após a adição dos prefixos. No caso, [Link] será o CSS
final, contendo os prefixos para garantir compatibilidade com navegadores antigos.

Por que isso é importante?

Adicionar prefixos garante que seus estilos sejam compatíveis com uma ampla gama de navegadores. Isso evita problemas de
visualização, especialmente em propriedades novas que podem não ser suportadas universalmente.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Build: Compile, Prefix and Compress(4/7) 686
[Link] (Compactação do CSS)

O que é?
A compactação é o processo de remover espaços em branco, quebras de linha e outros caracteres desnecessários do CSS,
resultando em um arquivo menor.

Como funciona?
Aqui está o comando que usamos para compactar o CSS:

• css/[Link]: Este é o arquivo com os prefixos que acabamos de criar.

• css/[Link]: Este será o arquivo final, que é menor e mais eficiente.

Por que isso é importante?

Um arquivo CSS compactado carrega mais rapidamente em um site, melhorando a experiência do usuário. Menos dados para
baixar significa tempos de carregamento mais rápidos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Build: Compile, Prefix and Compress(5/7) 687
4. Build (Etapa Final: Automatização do Processo)

O que é?
A etapa de Build combina todas as etapas anteriores em um único comando, facilitando o processo.
Como funciona?
Aqui está o comando de Build:

• Este comando usa uma ferramenta chamada npm-run-all para executar as etapas de compilação, prefixação e compactação em
sequência, de forma organizada.

Por que isso é importante?

Automatizar todo o processo significa que você pode executar um único comando para gerar o CSS final, sem precisar lembrar de
cada etapa separadamente. Isso economiza tempo e reduz a chance de erro.

Resumo do Processo de Build do SASS

• Compilação: Converte seu código SASS em CSS.
• Prefixação: Adiciona compatibilidade para diferentes navegadores.
• Compactação: Reduz o tamanho do arquivo CSS para carregamento mais rápido.
• Build: Automatiza todas as etapas para fácil execução.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Build: Compile, Prefix and Compress(6/7) 688
Para que esses comandos funcionem corretamente e possamos automatizar o processamento do CSS, precisamos instalar algumas
dependências no projeto. Essas dependências são bibliotecas que o [Link] utiliza para executar tarefas específicas. Vamos
entender cada uma delas:

autoprefixer:
• O que é: O autoprefixer é um plugin que adiciona automaticamente prefixos para garantir que o CSS funcione em diferentes
navegadores.
• Por que usamos: Como alguns navegadores exigem prefixos especiais para interpretar certas propriedades CSS, o autoprefixer
automatiza esse processo, aplicando os prefixos necessários de forma inteligente.

npm-run-all:
• O que é: npm-run-all é uma ferramenta que permite executar vários scripts do npm em sequência ou paralelamente.
• Por que usamos: Com ela, conseguimos simplificar a execução de várias etapas no processamento do CSS em um único
comando. Por exemplo, podemos compilar o SASS, aplicar os prefixos e comprimir o CSS final em uma sequência de comandos.

postcss:
• O que é: PostCSS é uma ferramenta para transformar CSS com o uso de plugins, como o autoprefixer.
• Por que usamos: No nosso caso, ele serve como uma plataforma que executa o autoprefixer e permite que outros plugins sejam
adicionados ao processo, tornando o CSS mais compatível e customizável.

postcss-cli:
• O que é: PostCSS CLI é uma interface de linha de comando para o PostCSS.
• Por que usamos: Ela permite que executemos o PostCSS através do terminal usando comandos npm, o que facilita o uso do
autoprefixer em nosso processo de build.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – Build: Compile, Prefix and Compress(7/7) 689
Como Instalar as Dependências
Para instalar todas essas dependências, usamos o comando:

• --save-dev: Esse argumento indica que estamos instalando essas dependências como "dependências de desenvolvimento". Elas
são necessárias apenas durante o desenvolvimento e não serão incluídas no projeto final que vai para produção.

Resumo
Essas dependências são essenciais para que o [Link] possa executar o processo completo de transformar o SASS em CSS
compatível com diferentes navegadores. Elas automatizam tarefas como adicionar prefixos, executar vários comandos em
sequência e permitir o uso de plugins no processamento do CSS.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – @for (1/5) 690
Um loop é uma estrutura de programação que permite repetir um conjunto de instruções várias vezes, de acordo com uma
condição específica. No Sass, loops são úteis para gerar estilos de maneira automatizada, economizando tempo e evitando a
repetição manual de código. Por exemplo, ao estilizar uma série de elementos com variações incrementais (como tamanhos, cores
ou margens), podemos usar um loop para definir essas propriedades de forma dinâmica e organizada.

O Sass oferece o @for, uma regra de loop que funciona de maneira parecida com outras linguagens de programação. Ele permite
que você repita um bloco de código um número específico de vezes. A sintaxe básica do @for no Sass é a seguinte:

No loop @for, definimos uma variável, geralmente $i, que começará com o valor de <início> e incrementará até o valor de <fim>,
executando o código dentro do loop para cada número. Isso possibilita criar uma série de estilos sequenciais de forma prática.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – @for (2/5) 691
Vamos para um exemplo prático! Adicionaremos alguns elementos de lista de itens (li) dentro do nosso arquivo HTML:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – @for (3/5) 692

Neste exemplo, estamos usando aninhamentos no Sass para estilizar elementos

<li> de maneira específica dependendo da sua posição na lista. Aqui está o que
está acontecendo:

• Estilização básica para todos os itens <li>:

• Cada <li> tem um padding de 10px e uma borda de 1px sólida na cor $azul.

• Aninhamento com &:nth-child(n):

• O operador & permite que cada seletor aninhado faça referência ao elemento
pai, neste caso, <li>. Em seguida, cada :nth-child(n) aplica estilos de acordo
com a posição do item na lista.

• Variação de cor com background-color:

• Cada item <li> recebe um background-color com uma tonalidade diferente de
azul, ajustada com a função darken. Para isso, cada nth-child aumenta o
escurecimento em 5% progressivamente:
• &:nth-child(1) — primeira cor, sem escurecimento.
• &:nth-child(2) — segunda cor, escurecida em 5%.
• &:nth-child(3) — terceira cor, escurecida em 10%.

Esse aninhamento simplifica a aplicação de estilos diferenciados com

base na posição dos elementos, mantendo o código mais organizado
e legível.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – @for (4/5) 693
Utilizar o loop @for do Sass neste caso traz diversos benefícios, especialmente em termos de organização e eficiência do código.
Vamos entender por que isso é útil.

Benefícios do uso de @for com o Sass:

Automatização do processo:
• Em vez de escrever manualmente um nth-child para cada item da lista e aplicar um escurecimento específico, o loop @for permite
que a aplicação de estilos seja automatizada para qualquer quantidade de elementos. Aqui, definimos 15 itens, mas essa estrutura
funciona para quantidades maiores com uma simples alteração no número final do loop.

Cálculo dinâmico da cor:

• O código darken($azul, ($i - 1) * 3%) escurece o fundo do item progressivamente. Para cada número $i no loop, ele multiplica (i - 1)
por 3%, aumentando o escurecimento em 3% para cada item da lista. Esse método elimina a necessidade de ajustar cada nth-child
manualmente.

Redução de código e facilidade de manutenção:

• Com o loop @for, evitamos repetições, mantendo o código mais limpo e fácil de atualizar. Se quisermos alterar o grau de
escurecimento, basta ajustar o fator de 3% em um único local, em vez de atualizar cada nth-child manualmente.
DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 8 – @for (5/5) 694
Escalabilidade:
• Esse código é escalável: se precisarmos de mais ou menos itens, basta mudar o limite final do @for (por exemplo, 1 through 10 ou 1
through 20). O escurecimento será aplicado automaticamente aos novos itens, sem precisar de ajustes individuais.

Resultado:
Esse código aplica uma série de estilos progressivos com eficiência e flexibilidade, criando uma escala de cores em tons de azul que vai
escurecendo conforme cada item da lista, sem precisar escrever nth-child separadamente para cada um.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Padrão7-1 (1/3) 695
O que é o Padrão 7-1 no SASS?

O padrão 7-1 é uma forma de organizar projetos SASS, dividindo os arquivos de estilo em diferentes pastas e arquivos, conforme a sua
função no projeto. Esse padrão ajuda a manter o código mais organizado, facilitando a manutenção, escalabilidade e compreensão
dos estilos, principalmente em projetos maiores.

A ideia é dividir os estilos em 7 pastas principais e usar 1 arquivo SASS principal para importar todos eles.

Estrutura das Pastas no Padrão 7-1:

• 1. Base: Define estilos globais e configurações, como variáveis, resets e tipografia.

• 2. Layout: Define a estrutura geral do layout, como cabeçalho, rodapé e estrutura da grade.
• 3. Components: Define estilos de componentes específicos, como botões, formulários e cartões.
• 4. Pages: Define estilos específicos para páginas individuais.
• 5. Themes: Define temas alternativos ou variações de cores e estilos.
• 6. Utils: Define utilitários e mixins, funções e outras ferramentas SASS reutilizáveis.
• 7. Vendors: Define estilos de bibliotecas ou frameworks de terceiros, como Bootstrap ou [Link].

E, no arquivo principal [Link], que fica na raiz do projeto, fazemos os imports de cada uma dessas pastas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Padrão7-1 (2/3) 696
Por que Usar o Padrão 7-1?

• Organização: Mantém o projeto bem estruturado e modular.

• Escalabilidade: Facilita a adição de novos componentes e estilos.
• Colaboração: Deixa o código mais fácil de entender, o que ajuda no trabalho em equipe.
• Manutenção: Localizar e atualizar estilos é mais simples, pois sabemos onde cada tipo de estilo deve estar.

Exemplo Prático de Estrutura de Arquivos

Estrutura de Arquivos no Padrão 7-1

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 8 – Padrão7-1 (3/3) 697
O que é um Componente?
Em desenvolvimento front-end, um componente é uma parte independente e reutilizável da interface do usuário, como um botão,
um formulário ou uma barra de navegação. Cada componente tem seu próprio estilo e funcionalidade e pode ser usado várias vezes
em diferentes partes do site ou aplicativo. Por exemplo, um botão pode ter um estilo específico para quando está ativo, inativo, ou ao
passar o mouse por cima dele, e podemos usar o mesmo componente de botão em várias páginas.

O que é um Boilerplate?
Um boilerplate é uma estrutura básica ou "esqueleto" que serve como ponto de partida para projetos. É um conjunto de arquivos e
diretórios pré-configurados que ajudam a iniciar o desenvolvimento rapidamente, pois já incluem a organização básica do código e
algumas configurações padrão. No contexto do padrão 7-1 no SASS, o boilerplate da documentação do GitHub já traz a estrutura de
pastas e arquivos organizada conforme o padrão, incluindo arquivos vazios (ou quase vazios) para os principais componentes e estilos,
o que facilita e acelera o início do projeto.

Se quiser explorar um boilerplate para entender melhor, você pode conferir o repositório do padrão 7-1 no GitHub: 7-1 Boilerplate no
GitHub.

Outros:
[Link]
[Link]

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 698
TRILHA FRONTEND MODERNA - HTML/CSS & JAVASCRIPT

Módulo 9

PROJETO PÁGINA DE CAPTURA (SASS)

PROJETO PÁGINA DE CAPTURA (SASS)

PROJETO PÁGINA DE CAPTURA (SASS)

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO
 000
Módulo 9 – Apresentação do Projeto/Desafio (1/1) 699
Neste módulo, vamos desafiar você a construir uma página de referência do Intensivão de Python da Hashtag.

Essa página serve como um excelente exemplo para aplicar todos os conceitos que exploramos ao longo do curso. Através dela, você
poderá praticar habilidades de estruturação e estilização com SASS, criando desde layouts atraentes até elementos dinâmicos como
pop-ups.

Esse projeto foi pensado para você aplicar de forma prática o que aprendeu, oferecendo um ponto de partida claro e inspirador para
futuras criações.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o nosso projeto (1/4) 700
Vamos abrir uma nova pasta e adicionar o modelo do arquivo [Link] do módulo anterior:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o nosso projeto (2/4) 701
Agora que adicionamos o arquivo JSON configurado no módulo anterior (com a extensão para SASS), vamos seguir para o próximo
passo: instalar todas as dependências necessárias para o nosso projeto. Para isso, basta executar o comando:

Esse comando irá ler as configurações no arquivo JSON e baixar automaticamente todas as bibliotecas e ferramentas que nosso
projeto precisa para funcionar.

Observando nosso scripts para que ele sejam executados corretamente vamos criar na raiz do projeto duas pastas: css e sass.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o nosso projeto (3/4) 702
Lembrando sobre a extensão SASS que vimos no módulo anterior, ele irá utilizar o padrão 7-1, no qual vamos utilizar o seguinte
Boilerplate do Padrão 7-1: [Link] para construir a estrutura do nosso projeto.

Para baixar os arquivos de um repositório no GitHub, siga estes passos:

• Acesse o Repositório: Abra o repositório desejado no GitHub.

• Baixe o Código: Na página principal do repositório, procure pelo botão verde com a palavra Code. Clique nele para ver as opções de
download.
• Download ZIP: Clique em Download ZIP para baixar todos os arquivos como um arquivo .zip. Após o download, extraia o conteúdo
da pasta .zip para acessar os arquivos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o nosso projeto (4/4) 703
Agora anexe o arquivo descompactado na pasta raiz do seu projeto, e vamos ficar apenas com a pasta style sheets, o restante você
pode deletar:

O próximo passo é renomear essa nossa pasta para sass e a que criamos anteriormente pode ser deletada:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o padrão 7-1 (1/5) 704
Para iniciarmos o nosso projeto vamos criar um arquivo HTML e já adicionar o link para o nosso arquivo css, que será compilado pelos
nossos scripts, e para testarmos vamos no arquivo [Link] um estilo para o elemento teste de título.

Para aplicarmos essas alterações, vamos executar o script – build:css:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o padrão 7-1 (2/5) 705
Agora que já compilamos nossos arquivos SASS para CSS com o comando build:css, vamos configurar um comando para "observar"
automaticamente as alterações no SASS e recompilá-las em tempo real. No terminal, execute o seguinte comando:

Agora, sempre que fizer uma alteração no seu arquivo SASS, o SASS detectará automaticamente e recompilará o CSS, mantendo seu
arquivo atualizado sem precisar rodar o comando manualmente a cada mudança. Isso é ideal para agilizar o processo de
desenvolvimento.

Para organizarmos melhor a estrutura do nosso projeto vamos deletar todos os arquivos ReadMe e também os arquivos das estruturas
que não vamos utilizar como as pastas de Vendors, Themes, arquivo [Link] e vamos deletar o conteúdo do arquivo [Link].

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o padrão 7-1 (3/5) 706
Feito isso vamos ajustar nosso arquivo [Link] para seguinte estrutura:

Podemos deletar o conteúdo dos arquivos para criarmos o próprio padrão do projeto, assim teremos 10 arquivos scss para
implementar os estilos da página.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o padrão 7-1 (4/5) 707
Agora vamos começar a estrutura os elementos da nossa página modificando nosso arquivo HTML.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Configurando o padrão 7-1 (5/5) 708
Vamos adicionar as imagens iniciais da página, além de aplicar uma estrutura semântica para essa seção.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 1 (1/5) 709

NOTA:

O projeto será feito com @use porque ele é a abordagem moderna

recomendada pelo Sass, oferecendo melhor modularidade, evitando
conflitos e melhorando a performance. Embora as aulas anteriores
utilizem @import (que ainda funcionará para quem seguir esse
método), na apostila usamos @use para refletir as atualizações da
linguagem e preparar o código para o futuro, já que o @import será
descontinuado.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 1 (2/5) 710

Agora vamos começar a estrutura os elementos da nossa página

modificando nosso arquivo HTML. A primeiras estruturas que vamos
modificar será a nossa seção Hero, vamos adicionar todas as classes
dos elementos seguindo a Metodologia BEM.

Vamos adicionar um elemento div para encapsular os

elementos de imagem, parágrafos, listas e botão dentro dela.
Nessa primeira seção vamos adicionar as classes de acordo
com os blocos, seus elementos e os componentes.

Logo após vamos adicionar um arquivo caixa dentro da pasta

components e importar o seu uso no arquivo [Link]:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 1 (3/5) 711
A primeira estilização que vamos aplicar são os estilos No arquivo [Link], o objetivo principal é
globais ou nesse caso utilizando o SASS serão os nossos organizar e centralizar as estilizações relacionadas à
estilos, básicos que ficam dentro do arquivo [Link]: tipografia do projeto. No "E" da metodologia BEM (Block,
Element, Modifier), isso se refere a elementos (Element),
ou seja, partes específicas de um bloco.
Vamos adicionar a estilização que será aplicada:

Dentro do arquivo _variables.scss, vamos adicionar as

variáveis do nosso projeto, iniciando pela variável que irá
armazenar a cor preta:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 1 (4/5) 712
A segunda váriavel que vamos adicionar no arquivo Vamos alterar também os arquivos da pasta abstracts,
_variabels.scss será a cor de fundo do nosso componente deixando apenas um único arquivo chamado
caixa. [Link].

E vamos retirar os arquivos que não vamos utilizar, dessa

forma a estrutura do nosso main ficará assim:

Em seguida vamos modificar o layout da seção para em

breve retornar para a estilização do componente caixa.
Então vamos criar o arquivo [Link] e importar dentro
do arquivo main.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 1 (5/5) 713
Aqui vamos deixar a segunda imagem "Lira" fique fora do Dentro do arquivo layout vamos aplicar os seguintes
nosso componente caixa, adicionando uma div e uma estilos a nossa seção e container:
classe a ela:

E vamos aplicar o seguinte estilo a ela dentro do arquivo

base:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 2 (1/5) 714
Continuando seção Hero, vamos aplicar a imagem de Para essas novas classes vamos atribuir as seguintes
fundo e suas proprieades de estilos, para isso iremos propriedades de css, dentro do arquivo inscricao:
implementar dentro do arquivo [Link] a seguinte
estrutura inicial:

E adicionar dentro do arquivo caixa as próximas

estilizações:

Vamos precisar adicionar uma classe ao elemento div

que engloba a imagem do Lira e também adicionar uma
nossa classe ao container Hero:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 2 (2/5) 715
Agora vamos adicionar a cada item da nossa lista a Agora vamos adicionar um elemento b envolta dos
imagem do ícone, precisaremos alterar o estilo dela para textos em destaque e adicionar a propriedade font-
não aparecer o símbolo padrão e também englobar com weigth no arquivo typography.
a tag p os textos de cada item:

E adicionaremos a estruturas:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 2 (3/5) 716
Vamos refatorar e fazer alguns ajustes de tamanho e O próximo elemento a ser estilizado será o título da nossa
outras propriedades para o componente caixa: seção, vamos adicionar a variável que irá armazenar a cor
além de aplicar os seguintes estilos:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 2 (4/5) 717
Agora para o layout do subtitulo da nossa seção: Para alinhar os elementos da nossa caixa, vamos
adicionar o display flex e suas propriedades:

Vamos adicionar uma classe com o modificador:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 2 (5/5) 718
Para finalizar essa aula vamos adicionar um elemento div englobando o nosso titulo e paragráfo e adicionar a seguinte
estrutura de estilos:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 3 (1/4) 719
Nesse momento vamos estilizar o logo da hashtag, para Vamos alinhar a imagem utilizando o display flex:
isso vamos adicionar uma div englobando o elemento,
adicionar uma classe e aplicar a seguinte estilização:

E vamos precisar manipular a posição do componente

caixa e da nossa div-logo.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 3 (2/4) 720
Agora que atribuimos a posição relativa a caixa, vamos Vamos adicionar a sombra da caixa:
modificar a posição e outras propriedades da div-logo:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 3 (3/4) 721
Vamos estruturas um componente botão padrão com a Vamos adicionar mais uma cor nas variáveis:
seguinte estilização:

E aplicar uma estilização para um modificador de botão:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Hero – Parte 3 (4/4) 722
Agora vamos mexer no posicionamento e nas estruturas Dentro do componente caixa vamos manipular a
para garantir que a imagem do Lira fique atras do meu propriedade index-z para que a imagem possa ficar entre
container hero e com um tamanho [Link]ão o container hero e a imagem de fundo da nossa seção.
vamos começar a mexer nesses dois elementos da
seguinte forma:

Vamos fazer uma pequena alteração na div-lira:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Disclaimer (1/4) 723
Iniciaremos a criação da Seção Disclaimer que terá a seguinte estrutura de HTML e já iremos as classes dois elementos, vamos
adicionar algumas propriedades e refatorar o nosso css do arquivo inscricao.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Disclaimer (2/4) 724
Vamos adicionar uma nova cor as variáveis: Para continuarmos o layout da seção Disclaimer, vamos
precisar construir uma base para a seção Passo a passo.

Adicionar a seção uma cor de fundo e alguns estilos: E para finalizar o disclaimer vamos adicionar uma
sombra:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Disclaimer (3/4) 725

Relembrando o conceito de Mixins, eles são como "funções" no Sass

que permitem reutilizar blocos de código, tornando seu CSS mais
eficiente e modular. Eles são especialmente úteis quando você precisa
repetir estilos com pequenas variações em diferentes partes do projeto.

O que estamos fazendo no código ao lado?

O mixin flex foi criado para simplificar a aplicação de estilos
relacionados a layout Flexbox. Ele permite configurar rapidamente as
principais propriedades de um contêiner flexível, como:
• Direção do layout ($direction): Define a orientação dos itens (row,
column, etc.).
• Quebra de linha ($wrap): Controla se os itens devem quebrar ou não
(nowrap, wrap).
• Alinhamento no eixo cruzado ($align): Ajusta os itens em relação ao
eixo perpendicular (stretch, center, etc.).
• Justificação no eixo principal ($justify): Define o posicionamento
dos itens no eixo principal (start, center, space-between, etc.).
• Espaçamento entre os itens ($gap): Adiciona espaçamento entre os
itens.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Disclaimer (4/4) 726
Agora que criamos o mixin de flex dentro do arquivo Na lista e nos itens da lista:
helpers, vamos utilizar ele nos elementos.

No componente caixa:

Lembrando que apenas iremos alterar os valores que eles

No elemento de classe titulos: utilizam, caso eles não utilizem a propriedade irá
possuirão possuir os valores padrões.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 1 (1/7) 727
Vamos iniciar a estrutura da Seção Passo a Passo, iniciando a construção do html, primeiramente vamos adicionar a primeira
imagem e o título da seção.

Agora vamos adicionar cada bloco de passos da nossa seção e para começar esses blocos, vamos buscar os ícones através do site
SVG Repo. O SVG Repo é um site que oferece uma ampla coleção de ícones e ilustrações no formato SVG, prontos para uso em projetos de design e desenvolvimento. Ele permite buscar, baixar e personalizar gráficos vetoriais gratuitamente, facilitando a criação de
interfaces visuais modernas e responsivas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 1 (2/7) 728
Vamos fazer o download dos ícones, você pode buscar por alert, certified, chart e python e escolher qual ícone que mais lhe agrade.,
faça o download. Dentro do seu projeto crie uma pasta chamada img e adicione os ícones a ela. Dessa forma você conseguirá utiliza-
las em qualquer parte do seu projeto, nesse caso na Seção Passo a Passo.

Vamos iniciar o primeiro bloco que irá ser do Passo 1:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 1 (3/7) 729
Agora que iniciamos a estrutura dessa seção, precisamos criar um arquivo para esse componente chamando [Link] que ficará
responsável por armazenar toda a estilização desse componente, seus blocos, elementos e modificadores. Feito a criação vamos
importar no arquivo main:

Agora vamos iniciar a estruturar os estilos:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 1 (4/7) 730
Vamos encapsular a imagem do ícone dentro de uma Vamos adicionar uma cor nova dentro das variáveis:
div, adicionar uma classe e alterar o tamanho do ícone:

Agora vamos aplicar a cor ao SVG e caso você não

consiga alterar verifique se seu ícone tem fundo
transparente e se a propriedade fill existe e adicione a cor
branca:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 1 (5/7) 731
O próximo passo é alinhar o texto e o ícone, além de O que estamos fazendo aqui?
espaçar os elementos: A classe %subtitulo é um placeholder no Sass. Ela funciona como
uma "base de estilos" que pode ser reutilizada em outras classes
com a diretiva @extend, evitando a duplicação de código.

Relembrando o conceito de Placeholder (%)

• O que é? Um placeholder é semelhante a uma classe, mas não é
compilado diretamente no CSS. Ele só é incluído quando é
Nesse momento vamos estilizar o título de cada estendido (@extend) por outra classe.
bloco/passo da seguinte forma: • Por que usar? É útil para centralizar estilos compartilhados
entre elementos, tornando o código mais organizado e fácil de
manter.

O que estamos fazendo com %subtitulo?

Aqui, definimos estilos que podem ser usados em títulos ou
subtítulos, como tamanho da fonte, altura da linha e peso da fonte:
• font-size: 2.76rem;: Define o tamanho do texto.
• line-height: 1.2;: Controla o espaçamento vertical entre as linhas
do texto.
• font-weight: 700;: Define a espessura da fonte como negrito.
Esses estilos podem ser aplicados a outros elementos que
precisem de uma aparência consistente de subtítulos.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 1 (6/7) 732
Então vamos adicionar o extends criado nos elementos Tornaremos o elemento passo em um display flex e
que tenham a mesma características. finalizaremos a estrutura de css desse arquivo com esse
formato:
No componente caixa:

Vamos adicionar um modificador ao título/subtítulo da

seção passo para adicionar a cor correta:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 1 (7/7) 733
Adicionaremos a imagem do Lira abaixo do nosso passo 1 e a seguinte estrutura será feita:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 2 (1/6) 734
Na última aula, construímos o bloco de um passo da nossa seção, agora precisamos deixar ela em coluna e adicionar os
outros passos a seção, então primeiro vamos adicionar uma nova classe ao container e criar o layout:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 2 (2/6) 735

Agora vamos copiar a estrutura do passo criado mais 3 vezes e adicionar as informações de acordo com os passos:

Altere os conteúdos de título e parágrafo para seguir a estrutura acima.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 2 (3/6) 736
Nesse momento vamos encapuslar esses blocos de passo e também o elemento de imagem do Lira dentro de uma div e
adicionar classes para manipularmos o layout em formato de grid, vamos ter um grid global e um modificador específico
para essa seção
No arquivo layout:

No arquivo inscricao:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 2 (4/6) 737
Agora precisamos ajustar a imagem do Lira, para ficar ao centro do nosso grid, então vamos adicionar uma classe a ela e estilizar:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 2 (5/6) 738
Vamos criar um extend para os títulos e vamos aplicar nos elementos necessários:

No título do componente caixa:

Vamos adicionar a classe e o extend dentro do arquivo typography:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Passo – Parte 2 (6/6) 739
O próximo passo é atribuir uma classe a div do cabeçalho e organizar o layout do ícone e titulo.

Além disso, vamos alterar o font-weight do título e as propriedades do span:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Aprender (1/5) 740
A seção Aprender é muito parecida com a seção Passo, então o primeiro passo que vamos fazer é duplicar a seção anterior e
alterar e deletar alguns elementos e informações.

Vamos excluir a classe secao-passo em ambas seções,

pois não estamos usando. Depois vamos deixar a
classe do título com nome mais global, dar
especificidade as classes dessa seção e alterar o
caminho da nossa imagem.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Aprender (2/5) 741

Agora vamos alterar as informações do titulo:

Também vamos deletar todos elementos de passo e imagem, e adicionar um elemento de botão, dessa forma teremos uma
estrutura da seguinte forma:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Aprender (3/5) 742

Para a nossa seção vamos aplicar a propriedade align:start e ao botão vamos adicionar uma nova classe para centralizar.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Aprender (4/5) 743
Dentro da div de classe grid, vamos alterar a classe com modificador para grid—aprender, além de adicionar os 4 thumbnails
das aulas com a seguinte estrutura e classe (lembrando que cada imagem terá seu caminho).

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Aprender (5/5) 744
Vamos adicionar ao redor de cada imagem um elemento de Para melhorarmos o layout e evitarmos um espaçamento
âncora e seu respectivo link: criado, vamos alterar o display das imagens. No arquivo bas,
adicione a propriedade:

Vamos aplicar a seguinte estrutura de estilo :

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Quem (1/5) 745
Iniciando a nossa seção Aprender, vamos construir nossos primeiros elementos e adicionar a imagem de fundo a ela:

Agora vamos adicionar as informações de texto da nossa seção que seguirá a seguinte estrutura:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Quem (2/5) 746
No arquivo typography adicione a seguinte estrutura: Vamos adicionar a classe a estrutura que engloba toda essa
"caixa" de informações e adicionar a cor da letra de branco:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Quem (3/5) 747
Vamos adicionar a imagem fora do container quem: Vamos envolver a imagem dentro de uma div, e iniciar o layout
do nosso container com os textos.

Adicionada a imagem, vamos adicionar algumas

propriedades seguindo a lógica implementada da nossa
primeira seção do projeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Quem (4/5) 748
Vamos adicionar no extends subtitulo uma altura de linha: Os parágrafos desse bloco serão encapsulados por um outro
elemento div. E os spans vamos adicionar o estilo deles.

Agora o bloco quem será um flex e mudaremos algumas

propriedades:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Seção Quem (5/5) 749
Para ajustar o fundo da nossa seção, vamos adicionar as
propriedades :
No próximo passo será ajustar o layout de seção, então iremos
adicionar algumas propriedades ao elemento que possui
classe secao—quem junto com a imagem do lira que vamos
adicionar uma classe e ajustar, além de adicionar uma classe
modificadora do container:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Rodapé (1/2) 750
Para a última seção Rodapé, vamos utilizar uma tag semântica Agora vamos adicionar um componente footer, adicionando
chamada footer, com a seguinte estutura de elementos. um arquivo e importando dentro do arquivo main.

E começar a estilizar esse componente:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Rodapé (2/2) 751

Para finalizar o a seção vamos adicionar a estilização das âncoras:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Popup (1/4) 752
Para o nosso Popup vamos utilizar que o container do Popup Vamos criar um componente popup, adicionar o estilo que
que criamos em aula e apenas refatorar as informações e os montamos na aula passada dentro dele e alterarmos algo.
estilos. Além de adicionar a importação para o arquivo main.

Vamos adicionar ao body a classe popup- aberto:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Popup (2/4) 753
Vamos aplicar os seguintes estilos ao nosso popup:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Popup (3/4) 754
Agora criaremos um extends para os nossos botões.
E vamos adicionar e trocar o extends nos elementos que
utilizamos essa configuração:

No arquivo popup:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Popup (4/4) 755

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Javascript para abrir e fechar o Popup (1/3) 756

O JavaScript é uma linguagem de programação usada para adicionar interatividade e dinamismo às páginas da web. No caso de
um popup, o JavaScript pode ser utilizado para "ouvir" eventos, como cliques em botões, e executar ações, como abrir ou fechar o
popup, manipulando diretamente o DOM (Document Object Model).

Importação do Script no HTML.

Para usar o JavaScript em sua página, você deve criar um arquivo .js ou escrever o código diretamente no HTML. Aqui estão os
passos:
• Script Externo: Crie um arquivo chamado [Link] (ou qualquer outro nome) e escreva seu código JavaScript nele. No HTML,
importe o arquivo com a tag <script> no final do <body>, para garantir que todos os elementos do DOM já tenham sido
carregados:

Crie uma pasta chamada js e dentro dela irá criar um arquivo chamado [Link] e adiconar ao final do arquivo HTML da seguinte
estrutura:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Javascript para abrir e fechar o Popup (2/3) 757
No arquivo [Link] vamos criar a seguinte estrutura de código:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Javascript para abrir e fechar o Popup (3/3) 758
Vamos entender o código criado linha por linha:

• [Link](".js-botao"):
Seleciona todos os elementos do DOM que possuem a classe js-botao.
Retorna uma NodeList, que é uma lista de elementos similar a um array.

• var botoes:
Declara a variável botoes para armazenar essa lista de elementos.

• botoes[0]:
Seleciona o primeiro botão da NodeList botoes (índice 0).
• .addEventListener("click", function () { ... }):
Escuta o evento de clique no botão e executa a função passada como argumento quando o evento ocorre.
• [Link]("popup--aberto"):
Adiciona ou remove a classe popup--aberto no elemento <body>:
• Se a classe não existe, ela é adicionada.

• Se a classe já existe, ela é removida.

Isso permite que o popup seja aberto ou fechado, dependendo do estado atual.

• A lógica é aplicada aos botões no índice 1 e 2 da lista botoes.

• Cada botão realiza exatamente a mesma ação: alterna a visibilidade do popup.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 1 (1/5) 759
A partir desse momento vamos deixar o nosso site responsivo a primeira coisa que vamos fazer é criar os mixins de tamanho de
tela dentro do nosso arquivo helpers e aplicarmos no arquivo base.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 1 (2/5) 760
Agora vamos deixar o container e imagem da primeira seção com as propriedades em % para lidar com os tamanhos.

Agora vamos começar a aplicar a responsividade em outros elementos do nosso site:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 1 (3/5) 761
No componente caixa vamos adicionar a responsividade:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 1 (4/5) 762
Para os nossos títulos vamos incluir a responsividade dentro do extends do título e depois aplicar as alterações para a segunda
seção Passo. Vamos precisar adicionar uma classe a imagem do título para conseguirmos modificar ela.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 1 (5/5) 763
Nesse momento vamos modificar a estrutura grid da seção Passo e da imagem do Lira:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 2 (1/3) 764
Agora vamos começar a criar a responsividade da seção Aprender:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 2 (2/3) 765
Agora vamos começar a criar a responsividade da seção Quem:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 2 (3/3) 766
Agora vamos finalizar a seção Quem e começar a criar a responsividade da seção Rodapé que será bem simples:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 3 (1/4) 767
Para finalizarmos a nossa responsividade, vamos aplicar e modificar as propriedades para o layout de tela que chamamos
de tiny, iniciando pela seção global e depois vamos ir passando por cada seção do site caso precise.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 3 (2/4) 768
Agora vamos deixar em coluna a nossa seção Passos e Aprender, para isso vamos aplicar no "tiny" a seguinte estrutura do grid:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 3 (3/4) 769
Continuando na seção Aprender e criando a responsividade para o Rodapé:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Responsividade da página - parte 3 (4/4) 770
Agora para o nosso Popup:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Otimizações da página (1/4) 771
A primeira otimização que vamos fazer é fazer o download das imagens , utilizar o site squoosh para diminuir o tamanho dela e
utilizar o formato webp e adiciona-las a uma pasta chamada img dentro do nosso projeto.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Otimizações da página (2/4) 772
As próximas imagens que vamos otimizar vamos utilizar o site Resize WEBP Image - O site Simple Image Resizer é uma
ferramenta online que permite redimensionar imagens no formato WEBP de forma rápida e simples. A funcionalidade
principal é ajustar o tamanho das imagens para atender a diferentes necessidades, como otimização para web ou
compatibilidade com plataformas específicas.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Otimizações da página (3/4) 773
Vamos criar as imagens otimizadas no site IloveImg e fazer os ajustes de tamanho e qualidade necessário. E aplicar diferentes
imagens para tamanho de tela diferentes.

Para todas as imagens nós vamos adicionar a propriedade loading com valor lazy (exemplos abaixo):

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Otimizações da página (4/4) 774
Agora vamos importar a fonte Montserrat do Google Fonts e aplicar as regrinhas de otimização:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Finalizando as otimizações e Deploy do Projeto (1/3) 775
Vamos adicionar o fundo da primeira seção com responsividade:

Por fim vamos buildar nosso projeto, para que ele comprima e melhore a performance do nosso site com o comando npm run
build:css:

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Finalizando as otimizações e Deploy do Projeto (2/3) 776
Fazer o deploy de um projeto HTML/SASS pelo Netlify Drop é um processo simples e rápido. O Netlify Drop permite que você
faça upload de um projeto estático arrastando e soltando os arquivos diretamente na interface do Netlify. Aqui está um guia
passo a passo:

Passos para o Deploy no Netlify Drop

• Prepare o Projeto
• Certifique-se de que seu projeto está completo, incluindo:
• Um arquivo principal HTML (geralmente [Link]).
• Os arquivos CSS gerados a partir do SASS (o Netlify não processa SASS diretamente, então você deve compilar os arquivos
.scss para .css antes do deploy).
• Todas as dependências, como imagens, scripts e fontes, devem estar na mesma pasta ou em subpastas organizadas.
• Compile os Arquivos SASS
• Antes de fazer o upload, compile os arquivos .scss para .css

• Faça o Upload
• Arraste e solte a pasta do projeto (ou os arquivos) diretamente na área designada no site do Netlify Drop.
• Aguarde o Deploy
• O Netlify processará os arquivos e publicará o site. Ao final, você receberá um link único (geralmente algo como [Link]
[Link]).
• Teste o Site
• Acesse o link fornecido para garantir que o site está funcionando corretamente.

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO

 000
Módulo 9 – Finalizando as otimizações e Deploy do Projeto (3/3) 777
Dicas Extras

• Alteração do Nome do Link: Você pode personalizar o nome do domínio gerado (por exemplo, de meu-site-
[Link] para [Link]) acessando as configurações do site no painel do Netlify.

• Atualização do Deploy: Sempre que precisar atualizar o site, basta repetir o processo de upload com os arquivos atualizados.

• Usar GitHub (Opcional): Se quiser um fluxo contínuo de deploys, conecte seu repositório GitHub ao Netlify para deploys
automáticos ao fazer push de novas alterações.

Com esses passos, seu projeto estará disponível online em minutos!

DESENVOLVIMENTO WEB – FULL STACK IMPRESSIONADOR I HASHTAG PROGRAMAÇÃO