O inicio da sua jornada como programador

HTML CSS
JS
 SUMÁRIO
INTRODUÇÃO

Seja bem vindo!

01

Como aproveitar ao máximo o ebook

02

A diferença entre HTML, CSS e JavaScript

03

Front-end, Back-end e Full stack

04

VS Code: O que é e Como Instalar

05

Criando seu primeiro projeto

07

HTML

HTML: Introdução
10

Estrutura Básica HTML

11

Meta Tags
13

Sintaxe
15

Classes e IDs - Identificando Elementos

19

Títulos
21

Parágrafos
23

Formatação de Texto
25

Imagens
29

Links e Âncoras
31

Div
33

Iframe
35

Inserindo Vídeos
37

Inserindo Áudios
40

Listas
42

Tabelas
45

Formulários
47

Tags Semânticas - Estruturando o Conteúdo

52
 SUMÁRIO
CSS

Introdução
57

CSS inline, interno e externo

58

Sintaxe CSS
63

Configurações Globais - “Reset”

67

Width e Height
69

Margin e Padding
73

Cores no CSS
77

Background
80

Background-attachment
89

Degradê
93

Bordas
99

Box Shadow
104

Tipografia
109

Font weight
118

Position
125

Display
134

Flexbox
137

Animações
150

Centralizando Objetos
155

Seletores avançados
162

Variáveis
171

Responsividade
173

Compatibilidade com navegadores

181
 SUMÁRIO
JAVASCRIPT

Introdução
183

Sintaxe
184

Primeiros passos com JavaScript

186

Variáveis e constantes
189

Operadores
194

DOM
197

Eventos DOM
203

Condições
205

Loops
209

Funções
213

Objetos
216

Arrays
219

Chegamos ao fim
223
 SEJA BEM VINDO!
Seja muito bem vindo(a)! Primeiramente queremos te agradecer
por ter adquirido esse eBook. Sabemos que seu tempo e dinheiro
são valiosos e pretendemos fazer cada segundo e centavo valer a
pena. Nosso objetivo é fazer você se tornar um(a) desenvolvedor(a)
web capaz de programar qualquer site ou interface que quiser.

Também queremos te parabenizar por seu compromisso consigo

mesmo. Porque diferente das pessoas que desejam melhorar mas
não fazem nada para mudar, você está ativamente buscando
melhora e conhecimento. Esse compromisso e dedicação te fará ser
um(a) grande programador(a). Disso nós temos certeza!

Nesse eBook nós vamos te ensinar a criar qualquer interface que

imaginar usando HTML, CSS e JS. Partindo do absoluto zero, desde
instalar o editor de código até construir projetos e sites profissionais
completos.

Agora pegue um café e vamos começar a sua jornada!

01
 Como aproveitar ao máximo o ebook
Este eBook foi criado para oferecer a melhor abordagem possível a
qualquer pessoa que deseje dominar e aplicar os conceitos
fundamentais da programação front-end (se você não sabe o que
esse termo significa, logo vamos te explicar). Mas é importante dizer
que o eBook, por si só, não vai fazer todo o trabalho em seu lugar.
Nós vamos te fornecer as ferramentas necessárias e um guia passo
a passo para a utilização de cada uma delas.

No entanto, o verdadeiro crescimento das suas habilidades e a

fixação do conhecimento vai ocorrer durante a aplicação prática. A
prática será o seu maior aliado nessa jornada. Somente por meio de
tentativa e erro, enfrentando os desafios de frente, é que você vai de
fato aprender e dominar todos os conceitos e possibilidades da
programação.

Portanto, estude ativamente, experimente os exemplos

apresentados, e se surgirem erros, investigue e tente resolvê-los.
Pesquise, pergunte, tente pensar nas diversas possibilidades.
Garantimos que estudando dessa forma você vai aprender e evoluir
muito mais rápido. No começo pode parecer difícil, mas com o
tempo você vai perceber que é justamente as dificuldades e os
erros que vão te tornar um verdadeiro programador.

02
03
 Front-end, Back-end e Full stack

Para te situar no universo do desenvolvimento web, vamos começar

definindo três áreas essenciais da programação. Mesmo que você
ainda não tenha esbarrado nesses termos, é questão de tempo até
se deparar com eles:

Front-end

O front-end é a parte do site que os visitantes veem e interagem

diretamente. Tudo o que você vê na tela, desde os botões até o
layout, faz parte do front-end. Para isso, usamos HTML, CSS e
Javascript.

Back-end

O back-end é onde acontecem as coisas complicadas que os

visitantes não veem, como armazenar dados, processar informações
e tornar um site funcional. Para o back-end, usamos linguagens
como PHP, Python, Ruby e bancos de dados para gerenciar
informações.

Full Stack

Um desenvolvedor full stack domina tanto o front-end quanto o

back-end, ele pode criar toda a parte visual do site, e também
integrar isso com bancos de dados e todo o processamento de
informações, permitindo que criem sistemas inteiros por conta
própria.

Full Stack

Nesse eBook nós vamos focar no front-end, com ele você será capaz
de recriar qualquer layout que imaginar e colocar online na
internet.

04
 VS Code
O que é o Visual Studio Code (VS Code)

O VS Code é um editor de código. Ou seja, é como um bloco de

notas feito especialmente para escrever códigos.

Sim, os códigos também funcionam no bloco de notas simples do

seu computador, porém essa não é a maneira mais eficiente de
programar. Assim como você pode usar uma pedra para bater um
prego, mas existe o martelo feito especialmente para isso.

Por que usar o VS Code

Nele você pode entender mais facilmente seus códigos porque ele
separa por cores. Também possui diversas funcionalidades que te
ajudam a programar melhor e mais rápido (como avisar quando
tem bugs no seu código por exemplo). Além disso, você pode
instalar várias extensões para as mais diversas finalidades nele. Tudo
para te ajudar a ser um programador mais produtivo.

Como Instalar o VS Code

Vamos seguir alguns passos simples para instalar o VS Code:

1. Download: Acesse o site oficial do VS Code: Clique aqui
2. Escolha Sua Plataforma: O site detectará automaticamente sua
plataforma (Windows, macOS ou Linux) e oferecerá o botão de
download adequado. Clique no botão "Download" para começar.

05
3. Instalação: Após o download, execute o instalador. Siga as
instruções na tela para concluir a instalação.

Dica:

Personalize seu VS Code conforme suas preferências. Vá em

“Extensions” (Extensões) na barra lateral esquerda para explorar e
instalar extensões úteis que melhorarão sua produtividade. (Já
fizemos alguns posts mostrando extensões muito úteis do VS code
lá no instagram: Clique e confira)

06
 Criando seu primeiro projeto:

Criando uma Pasta para o Projeto

No seu computador, escolha um local para seu projeto. Crie uma

nova pasta com um nome significativo, como "MeuPrimeiroProjeto".

No VSCode clique em “file” (arquivo) no canto superior esquerdo. E

em seguida, clique em “Open folder” (Abrir pasta).

Escolha a pasta que você criou e clique em “Selecionar Pasta”.

Iniciando um Novo Arquivo

Dentro da pasta do projeto, clique com o botão direito e selecione

"New File" (Novo Arquivo). Nomeie o arquivo como "index.html" -

este é o arquivo principal da sua página.

Abrindo o arquivo

Para saber como seu site está ficando enquanto é desenvolvido,

você precisa abrir o arquivo “index.html” no seu navegador.

07
Para abrir o arquivo que acabou de criar, você pode fazer de duas

maneiras: A padrão e a que vai facilitar a visualização do site

enquanto estiver editando.

Maneira Padrão

Em seu computador, encontre a pasta do seu projeto e dê um

clique duplo no arquivo index.html.

Maneira para edição

No VSCode, clique no ícone de extensões no menu lateral esquerdo

e então digite “Live Server” na barra de busca. Clique sobre a

extensão e então clique em “instalar”.

08
Clique no arquivo “index.html” no menu de arquivos à esquerda, e
então dentro dele clique com o botão direito e selecione a opção
“Open with live server” (Abrir com o live server). O servidor abrirá e
sempre que você salvar (Ctrl + S) seu arquivo, ele atualizará
automaticamente para você.

Pronto! Seu projeto foi aberto. Provavelmente você está

visualizando uma página em branco, pois ainda não começamos a
adicionar elementos à nossa página. É isso que faremos a seguir.

09
 HTML: Introdução
Chegou a hora de te apresentarmos o HTML, a linguagem
fundamental que dá estrutura e forma aos sites que você vê na
internet. O HTML (HyperText Markup Language), é como a espinha
dorsal de uma página da web. Vamos começar com os conceitos
básicos que você precisa entender para desenvolver suas próprias
páginas.

O que é o HTML

Você já deve ter ouvido por aí que HTML não é linguagem de

programação, e isso é verdade! (então não, você não vai se tornar
um programador sabendo apenas HTML), mas essa é a linguagem
fundamental para construir qualquer página na internet, sem ela
nenhum site existiria.

O HTML é uma linguagem de marcação que, como o nome já diz,

serve para marcar o documento. Ou seja, ele “diz” para o navegador
qual a estrutura da página e o que é cada elemento dentro dela
utilizando tags. É como se ele dissesse “isto é um título”, “isto é um
parágrafo".

Por exemplo: a tag <title>Meu site</title> está dizendo que “Meu

site” é o título da página.

10
 Estrutura Básica HTML

<!DOCTYPE html>

No início de cada página HTML, você precisará definir o tipo de

documento. Isso é feito com a instrução “<!DOCTYPE>”. Ele declara
que o documento é um HTML na versão mais atual.
<html>

O próximo passo é criar um elemento HTML, o elemento base de

um documento HTML, todos os outros elementos devem estar
dentro dele. Tudo dentro do “<html>” será interpretado como
código HTML.
<head>

É o cabeçalho do documento HTML. Nenhum dos elementos

dentro dele ficam visíveis na página, os elementos contidos apenas
servem para passar informações gerais (metadados) sobre o
documento, como o título da página, links chamando outros
arquivos, etc.
<body>

É o corpo do documento, onde todos os elementos que irão

aparecer na página devem estar inseridos, como parágrafos, títulos,
imagens, etc.

11
Dica

Com o arquivo ainda vazio, digite “!” e pressione Tab ou Enter. Isso
irá gerar automaticamente a estrutura básica do HTML incluindo as
meta tags mais importantes (que veremos a seguir).

12
 Meta Tags
As meta tags são pequenos trechos de código colocados no
cabeçalho (entre as tags “<head></head>”) do seu documento
HTML, que fornecem informações sobre a sua página para os
navegadores e mecanismos de busca. Elas não são exibidas na
página em si, mas desempenham um papel fundamental nos
bastidores. Neste tópico, vamos explorar algumas das meta tags
mais importantes e pra que elas servem.

Meta tag para caracteres

Esta meta tag define o conjunto de caracteres utilizado pelo

documento. O valor “UTF-8” é o mais usado e suporta uma
variedade de idiomas e caracteres especiais.

Meta tag para responsividade

Essa meta tag é crucial para seu site se adaptar a qualquer

tamanho de tela (vamos falar sobre isso na parte do CSS). Ela cuida
da largura da "janela" por onde as pessoas veem seu site e também
da primeira ampliação que acontece quando alguém o abre.

Meta tag para descrição da página

Esta meta tag fornece uma breve descrição da sua página, exibida
nos resultados de busca. Uma boa descrição pode aumentar a
probabilidade de cliques.

13
Meta tag para palavras-chave

Essa meta tag costumava ser usada para indicar palavras-chave

relacionadas à página. No entanto, mecanismos de busca atuais
não a usam mais, mas é uma boa prática mantê-la atualizada.

Meta tag para autor

Esta meta tag indica o autor da página. Pode ser útil para atribuir
créditos e estabelecer autenticidade.

A configuração adequada de meta tags pode melhorar a aparência

dos resultados de busca, a acessibilidade e até mesmo o
desempenho da sua página. Integrar essas meta tags relevantes ao
seu documento HTML é um passo essencial para otimizar seu site.

14
 SINTAXE

Agora que entendemos a estrutura básica do HTML, vamos explorar

a sintaxe. Sintaxe é o conjunto de regras que governam como você
deve escrever suas instruções em HTML (ou qualquer outra
linguagem) para que o navegador possa interpretá-las
corretamente. É como seguir a gramática de uma linguagem para
se comunicar de maneira clara. Uma pequena diferença na sintaxe
pode levar a resultados completamente diferentes.

O que é uma tag HTML

Antes de qualquer coisa precisamos entender o que são tags. Uma

tag nada mais é do que um sinal de menor “<” seguido do nome da
tag e o sinal de maior “>” (<tag>). Existem dois tipos de tags, as que
precisam de fechamento e as que não precisam.

Tags com fechamento

O conteúdo das tags que precisam ser fechadas devem ir entre a

tag de abertura e a tag de fechamento (com uma barra).

As tags que necessitam de fechamento são escritas desta forma:

Tags vazias

As tags que não precisam de uma tag de fechamento como as

imagens, são chamadas de tags vazias. Elas são escritas apenas
com uma tag de abertura.

As tags vazias são escritas desta forma:

15
Elementos

Um elemento HTML é formado a partir de tags. Entre as tags que

tem fechamento estará o conteúdo do elemento ou dentro da
própria tag para as que não tem fechamento, há ainda elementos
que não tem conteúdo, como a quebra de linha “<br>”. O conteúdo
do elemento pode ser imagens, textos e até outros elementos.

Nomes de tags e caixa alta

Os nomes de tags não diferenciam maiúsculas de minúsculas. Isso

significa que “<p>” e “<P>” são a mesma coisa. No entanto, é uma
prática comum usar letras minúsculas para as tags.

16
Atributos

As tags também podem ter “atributos” que fornecem informações

extras sobre a tag. Os atributos são sempre adicionados à tag de
abertura. Algumas tags tem atributos específicos, por exemplo: o
atributo “src” em uma tag “<img>” especifica a fonte da imagem, ou
seja, qual imagem será selecionada.

Comentários

Os comentários são usados para fazer anotações no seu código, que

não serão exibidas no navegador. Eles são úteis para explicar o que
está acontecendo em seu código.

Indentação

Use a indentação (espaçamento) para tornar seu código mais

legível. Isso facilita a compreensão da estrutura do seu conteúdo.

Para fazer a indentação, temos que usar espaços em branco (ou

TAB) em nosso código HTML. As tags correspondentes (de abertura
e fechamento) devem ficar na mesma linha vertical (assim como as
tags irmãs), e as tags internas (filhas) devem ficar a frente.

17
 TAG FILHA (UM NÍVEL A FRENTE)

TAGS (IRMÃS MESMO NÍVEL)

Dica

Use o comando “Alt + Shift + F” para o próprio VS Code reorganizar o
seu código da maneira correta.

18
 Classes e IDs - Identificando Elementos
Quando queremos estilizar elementos HTML em CSS ou manipular
eles em Javascript. Temos que dizer pro navegador (através de
códigos): “Pega tal elemento e faz isso com ele”. Mas como o
navegador sabe de qual elemento estamos falando? Aí que entra as
Classes e ID’s.
Tanto classes quanto IDs são usados para identificar elementos
HTML. Eles permitem que você selecione e manipule elementos
específicos de maneira eficiente. São como etiquetas que dão um
“nome” pro seu elemento.
Sintaxe

As Classes e ID’s são atributos, então como vimos no capítulo

anterior, devem ir dentro da tag de abertura do elemento, dessa
forma:

Classes

As classes são usadas para agrupar elementos que têm

características semelhantes. Você pode aplicar a mesma classe a
vários elementos.

19
IDs

ID’s são usados para identificar elementos de forma única. É como

uma carteira de identidade para o seu elemento, nenhum outro
elemento pode ter o mesmo ID.

Mais adiante no módulo sobre CSS, veremos mais sobre Classes e

ID’s e como eles são usandos na prática. Mas resumidamente: use
classes quando desejar aplicar estilos semelhantes a vários
elementos. Use IDs quando precisar selecionar ou estilizar um único
elemento de forma individual.

20
 Títulos
No HTML existem tags especiais para títulos, elas são usadas para
dar uma ideia do conteúdo que está por vir e também ajudam o
navegador a saber sobre o que aquela página está falando.
Tags de título

Existem seis níveis de títulos no HTML, de “<h1>” a “<h6>”. O “<h1>” é

o título principal e “<h6>” é o menos importante. Imagine isso como
uma pirâmide invertida, com “<h1>” no topo.

21
Hierarquia de títulos:

A hierarquia dos títulos ajuda a organizar o conteúdo e a dar

sentido à página. Use “<h1>” para o título principal, “<h2>” para
seções principais e assim por diante. Isso ajuda os leitores e
também os mecanismos de busca a entenderem a estrutura da
página.

Vale lembrar que você vai poder estilizar cada título da forma que
quiser com CSS, aqui estamos falando apenas da estrutura.

22
 Parágrafos

Parágrafos são blocos de texto e o HTML tem uma tag para eles.
Normalmente usamos essa tag para adicionar textos na página
(mesmo sendo apenas uma linha).

Criando parágrafos

Para criar um parágrafo, usamos a tag “<p>”. O texto colocado entre

a tag de abertura e a tag de fechamento será formatado como um
parágrafo.

Quebra de Linha

Se você quiser apenas uma quebra de linha sem criar um novo

parágrafo, pode usar a tag “<br>”. É como pressionar "Enter" para
pular uma linha.

23
24
 Formatação de Texto

Apesar de você poder formatar o texto pelo CSS, muitas vezes é

bem mais prático e simples usar uma tag de formatação de texto.
Existem várias tags para formatar os textos e vamos te mostrar as
mais usadas agora:

Negrito

Use a tag “<strong>” para destacar texto em negrito.

Itálico

Use a tag “<em>” para aplicar estilo itálico.

Sublinhado

Use a tag “<u>” para sublinhar o texto.

25
Riscado

Use a tag “<s>” para criar um efeito de texto riscado.

Monoespaçado

Utilize a tag “<code>” para exibir texto em uma fonte

monoespaçada, perfeito para exibir código de programação.

26
Superscrito

Use a tag “<sup>” para colocar um texto acima da linha.

Subscrito

Use a tag “<sub>” para colocar um texto abaixo da linha.

Citações

Além disso, você pode criar citações e destacar partes do texto com

as seguintes tags:

Utilize a tag “<blockquote>” para formatar citações.

27
Ênfase

Use a tag “<q>” para indicar que o texto possui ênfase.

Tag span

A tag “<span>” não possui nenhum significado intrínseco, mas é

extremamente útil para criar estilos de CSS ou aplicar formatações

especiais em partes específicas do texto.

28
 Imagens
Para adicionar uma imagem à sua página, você usará a tag “<img>”.
Esta tag é conhecida como uma tag vazia, porque não precisa de
uma tag de fechamento. Ela contém um atributo importante
chamado “src”, que especifica o caminho para a imagem que você
deseja exibir.

Navegando por pastas e caminhos de arquivos


Para selecionar a imagem que você deseja, é importante entender
como navegar pelas pastas e gerenciar caminhos de arquivos,
então aqui vai um tutorial (isso serve para qualquer arquivo).

Para avançar para uma pasta dentro da pasta atual, você pode usar
o caractere “/”, como em “pasta/subpasta/arquivo”. Para retroceder
uma pasta, utilize “../” antes do nome da pasta desejada, como em
“../pastaanterior/arquivo”.

Uma vez na pasta correta, para selecionar um arquivo, basta digitar

o nome completo do arquivo, incluindo sua extensão, como
“imagem.jpg”.

O Atributo “alt”

O atributo “alt” (texto alternativo) é usado para descrever a imagem.

Ele é importante para acessibilidade e SEO (otimização para
mecanismos de busca). Se a imagem não puder ser carregada, o
texto alternativo fornecerá uma descrição para os leitores.

29
Tag “picture”

Para lidar com diferentes tamanhos de tela, você pode usar a tag
“<picture>”. Isso permite que você especifique diferentes imagens
para diferentes dispositivos, como smartphones e computadores.

<source>: elemento (imagem) que vai aparecer quando a tela

atingir o tamanho que o “media” estabeleceu.

srcset: escolhe qual imagem vai aparecer.

media: determina a partir de qual tamanho de tela a imagem vai

aparecer.

no computador: no celular:

Você vai entender melhor sobre responsividade e tamanho de tela

quando falarmos de CSS.

30
 Links e Âncoras

Provavelmente você sabe o que é um link e com certeza já clicou

em algum. Eles permitem que os usuários naveguem entre
páginas, sites e recursos online. Já as âncoras te levam diretamente
para uma parte específica da página em que você está, como uma
sessão de contato, por exemplo.

Criando links

Para criar um link, você usará a tag “<a>”. O atributo mais

importante é o “href ”, que especifica o destino do link - geralmente
uma URL.

Links internos

Muitas vezes você usa um link para direcionar o usuário para outra
página do seu próprio site, chamamos isso de link interno. Para criar
um link interno use o atributo “href ” com o caminho relativo da
página que deseja vincular (assim como você faz para escolher uma
imagem, só que para escolher a página para qual quer levar o
usuário).

Âncoras

Âncoras permitem que você crie links para seções específicas

dentro de uma página. Primeiro, crie uma âncora com um nome
único usando o atributo “id”. Em seguida, crie um link que aponte
para essa âncora usando “#”.

31
Na parte da página:

Na seção desejada:

Links para e-mail e telefone

Você também pode criar links para enviar e-mails ou ligar para

números de telefone.

E-mail:

Telefone:

32
 Div

A tag “<div>” não tem um significado específico, ela é usada para

organizar o conteúdo. É como uma caixa, serve para colocar
elementos dentro de forma organizada.

A “<div>” é um elemento bastante utilizado para a construção de

layouts de páginas e pode facilmente ser estilizado com o uso do
CSS.

Esse é apenas um exemplo de como a div, com a ajuda do CSS,

pode ser usada para organizar o conteúdo.

Como utilizar a tag <div>

A tag “<div>” é utilizada para agrupar e delimitar conteúdos e para

isso esses conteúdos devem ser declarados entre a tag de início e a
tag de fechamento (<div></div>).

A tag “<div>” agrupa todo conteúdo que é adicionado a ela, mas

não possui um estilo visual por padrão.

Entretanto, é possível utilizar o CSS para tornar a <div> visível, além

de aplicar novos estilos tais como: cores de fundo, cor de fonte,
estilo de fonte e posicionamento dos elementos internos da <div>.

33
Sem o CSS, a div é invisível, porém ela está envolvendo o conteúdo
assim como no exemplo que mostramos acima. No módulo sobre
CSS você entenderá melhor como usar a div para montar seu layout
da forma que quiser.

34
 iframe

A tag “<iframe>” é uma maneira de incorporar conteúdo de outras

páginas da web dentro da sua própria página. É como ter uma
“janela” para outra página incorporada na sua, como mapas, vídeos
e muito mais.

Incorporando conteúdo externo

A tag “<iframe>” permite que você insira um quadro de exibição

para outro documento dentro da sua página. Isso é útil para
incorporar mapas do Google, vídeos do YouTube, widgets de redes
sociais e outros tipos de conteúdo externo.

Sintaxe básica

35
Exemplo - Mapa do Google:

Atributos importantes

src: Especifica a URL do conteúdo que você deseja incorporar.

width e height: Controlam as dimensões do quadro de exibição.

allowfullscreen: Permite que o conteúdo externo seja exibido em

tela cheia.

Importante sobre segurança

Embora seja ótimo incorporar conteúdo externo, tenha em mente

que algumas páginas podem não permitir isso por razões de
segurança. Certifique-se de que a fonte do conteúdo seja confiável.

36
 Inserindo Vídeos

Agora você vai descobrir como incorporar vídeos que estão

hospedados localmente no seu servidor ou vídeos externos de
plataformas como o YouTube.

Inserindo vídeos locais

Vídeos locais (com o arquivo dentro do projeto) não são indicados

pois são pesados e consomem muitos dados do site. Mas se você
quiser inserir um vídeo hospedado localmente, você pode usar a
tag “<video>”. Primeiro, faça o upload do vídeo para o seu servidor.
Em seguida, use a tag “<video>” para exibir o vídeo em sua página.

37
controls: Adiciona controles de reprodução ao vídeo (pausar,
reproduzir, volume, etc.).

<source>: Especifica o caminho do arquivo de vídeo e o tipo de

arquivo.

Inserindo vídeos externos (YouTube)

O mais indicado é você apenas puxar vídeos de outros servidores

online (como Youtube e Vimeo). Para inserir um vídeo do YouTube,
por exemplo, você pode usar a tag “<iframe>”. Encontre o vídeo no
YouTube, clique em “Compartilhar” e depois "Incorporar". Copie o
código fornecido e cole-o na sua página.

38
Atributos importantes

width e height: Controlam as dimensões do vídeo.

src: Especifica a URL do vídeo incorporado.

frameborder: Define se uma borda deve ser exibida ao redor do

vídeo (0 para não exibir).

allowfullscreen: Permite que o vídeo seja reproduzido em tela

cheia.

39
 Inserindo Áudio
Assim como vídeos, você também pode adicionar áudios em seu
site. Você pode adicionar trilhas sonoras, efeitos sonoros ou até
mesmo podcasts diretamente na sua página.

Inserindo Áudio

Para inserir áudio em uma página, você pode usar a tag “<audio>”.
Você precisará fornecer a fonte do arquivo de áudio usando a tag
“<source>”. Isso permite que o navegador reproduza o formato de
áudio adequado, dependendo das capacidades do navegador do
usuário.

controls: Adiciona controles de reprodução ao áudio.

<source>: Especifica o caminho do arquivo de áudio e o tipo de

arquivo.

Personalizando os controles

Você pode personalizar os controles de reprodução usando

atributos, como:

autoplay: O áudio começa a ser reproduzido automaticamente

assim que a página é carregada.

loop: O áudio reinicia automaticamente assim que terminar.

preload: Indica ao navegador se deve pré-carregar o áudio quando

a página é carregada.

40
Por exemplo:

41
 Listas

As listas são uma forma eficaz de organizar informações de maneira

ordenada ou não ordenada. Elas são úteis para criar menus de
navegação, listas de itens, tarefas e muito mais. Neste tópico, você
aprenderá como criar listas usando as tags “<ul>”, “<ol>” e “<li>”.

Lista não ordenada “<ul>”

Uma lista não ordenada é usada quando a ordem dos itens não é
importante. Ela é representada pela tag “<ul>” (unordered list) e
seus itens são marcados com a tag “<li>” (list item).

Lista ordenada “<ol>”

Uma lista ordenada é usada quando a ordem dos itens é

importante. Ela é representada pela tag “<ol>” (ordered list) e seus
itens também são marcados com a tag “<li>”.

42
Listas aninhadas

Você pode criar listas aninhadas, onde uma lista está dentro de
outra. Isso é útil para criar subitens ou categorias.

Lista de definição

Uma lista de definição é usada para definir termos e suas

respectivas definições. Ela é criada usando a tag “<dl>” (description
list), com os termos dentro de “<dt>” (definition term) e as
definições dentro de “<dd>” (definition description).

43
44
 Tabelas

No HTML também podemos criar tabelas. Elas são úteis para exibir
informações em colunas e linhas, como dados comparativos,
agendas e muito mais.

Criando uma tabela básica

Para criar uma tabela, você usará a tag “<table>”. Dentro dela, cada
linha é representada pela tag “<tr>” (table row). As células de
cabeçalho são marcadas com “<th>” (table header), e as células de
dados são marcadas com “<td>” (table data).

Colspan e Rowspan

Você pode mesclar células horizontalmente usando o atributo

“colspan” e verticalmente usando o atributo “rowspan”.

45
Tabela de cabeçalho

A tag “<thead>” é usada para agrupar os cabeçalhos da tabela, e a

tag “<tbody>” é usada para agrupar os dados da tabela. Isso ajuda a
melhorar a acessibilidade e a organização do conteúdo.

46
 Formulários

Quem nunca preencheu um formulário em algum site, seja para

efetuar uma compra ou enviar uma mensagem. Eles permitem que
os visitantes forneçam informações e realizem ações diversas.

Estrutura básica de um formulário

Para criar um formulário, você precisa envolver seus elementos

dentro da tag “<form>”. O atributo “action” define para onde os
dados do formulário serão enviados e o atributo “method” define
como os dados serão enviados (geralmente GET ou POST, que
fazem parte do backend do site):

Campo de texto <input type="text">

O campo de texto é utilizado para coletar informações curtas, como

nomes e comentários. Ele cria uma área onde os usuários podem
inserir texto.

47
type="text": Define o campo como um campo de texto.

id e name: Permitem associar rótulos e identificadores.

required: Torna o preenchimento do campo obrigatório.

Campo de e-mail <input type="email">

Esse campo é usado para coletar endereços de e-mail, verificando

automaticamente o formato correto.

Campo de senha <input type="password">

O campo de senha é usado para coletar senhas, com os caracteres

digitados sendo ocultados por asteriscos ou pontos para segurança.

Caixa de seleção <input type="checkbox">

A caixa de seleção permite que os usuários escolham várias opções

dentre as disponíveis. Cada caixa representa um item separado.

48
Botão de opção <input type="radio">

Os botões de opção permitem que os usuários escolham uma única

opção de um grupo. Cada botão representa um item separado.

Campo de texto multilinha <textarea>

O campo “<textarea>” é usado para coletar informações mais

extensas, como comentários ou mensagens. Ele cria uma área de
texto que permite que os usuários escrevam várias linhas.

49
Campo de seleção <select> e opções <option>

O campo “<select>” é utilizado para escolher uma opção de um

menu suspenso. As opções são definidas pelas tags “<option>”
dentro do elemento “<select>”.

Tag “<label>” para acessibilidade

A tag “<label>”, como veremos nos exemplos a seguir, associa

rótulos aos campos de entrada, melhorando a acessibilidade ao
permitir que os usuários cliquem nos rótulos para focar nos campos
correspondentes.

50
Campo de envio <input type="submit">

Este campo representa um botão que os usuários podem clicar

para enviar o formulário.

Botão <button>

A tag “<button>” é um elemento HTML usado para criar botões em

geral. Você pode usar ela pra criar um botão chamando pra ação ou
então para enviar um formulário (desde que use o atributo
type=”submit”). Sempre que quiser criar um botão você pode usar
ele.

Adicionando atributos

Você pode adicionar atributos à tag <button> para personalizar seu

comportamento e aparência. Alguns atributos comuns incluem:

type: Define o tipo de botão. Pode ser “button” (padrão), “submit”

para enviar formulários ou “reset” para redefinir formulários.

name: Define um nome para o botão, útil para referência em scripts

ou formulários.

51
 Tags Semânticas - Estruturando o Conteúdo
Existem algumas tags que servem para dar sentido estrutural à
página HTML. Essas tags são chamadas de tags semânticas. Elas
ajudam os navegadores, mecanismos de busca e desenvolvedores a
entender melhor a hierarquia e o propósito do conteúdo. Neste
tópico, você verá algumas dessas tags e para que elas servem.

“<header>” e “<footer>”

As tags “<header>” e “<footer>” são usadas para marcar a parte

superior (cabeçalho) e a parte inferior (rodapé) de uma seção ou da
página inteira.

52
“<section>” e “<article>”

A tag “<section>” é usada para dividir o conteúdo em seções

distintas. A tag “<article>” é usada para conteúdo autônomo que faz
sentido por si só, como um post de blog.

“<nav>” e “<aside>”

A tag “<nav>” é usada para definir uma área de navegação. A tag

“<aside>” é usada para conteúdo secundário ou relacionado, como
uma barra lateral.

53
“<main>” e “<figure”

A tag “<main>” define o conteúdo principal da página. A tag

“<figure>” é usada para incorporar conteúdo, como imagens,
gráficos e ilustrações.

54
Essas tags semânticas permitirão que você estruture seu conteúdo

de forma organizada e significativa, melhorando tanto a experiência

dos leitores como a interpretação pelos mecanismos de busca.

55
 <header> <nav>

<aside> <main> <aside>

<footer>

Aqui encerramos o primeiro módulo do eBook. Não teremos

projetos práticos sobre HTML por que é muito mais proveitoso
trabalhar em projetos práticos aliando HTML ao CSS. Então, no final
do próximo módulo sobre CSS, você pode partir para os projetos
práticos, que estão nos arquivos do Notion exclusivos para alunos do
eBook.

56
 CSS - Introdução
Agora que você já sabe usar as principais tags HTML chegou a hora
de dar vida a todos esses elementos sem graça, aqui é onde as
coisas ficam realmente interessantes. O CSS é a ferramenta que nos
permite estilizar cada parte do layout, resultando em sites
visualmente incríveis e atraentes.

Recomendamos (assim como falamos lá no início) que você vá

fazendo os exemplos e testando na prática tudo que está
aprendendo, com um retorno visual em sua tela vai ficar mais fácil
entender os conceitos que vamos apresentar.

57
 CSS inline, interno e externo

Há 3 maneiras de você escrever o código CSS:

CSS inline

O CSS inline é a maneira mais direta de aplicar estilos a um

elemento. Você coloca as regras de estilo diretamente no atributo
“style” da tag HTML. Por exemplo, para tornar um parágrafo azul
com CSS inline:

Você pode fazer alterações rapidamente em elementos visuais com

ela, porém não é a técnica mais recomendada. É aconselhável evitar
o uso de CSS inline para manter um código mais organizado e
sustentável.

CSS interno

O CSS interno envolve a inserção das regras de estilo dentro da

seção “<style>” na tag “<head>” do seu documento HTML. Por
exemplo:

58
Aqui, todos os parágrafos se tornarão vermelhos. Usar CSS interno é

uma opção melhor do que usar CSS inline, ela pode servir para

projetos menores e necessidades específicas, mas ainda assim não

é a forma ideal.

CSS externo

A abordagem de CSS externo é a mais recomendada e organizada.

Você cria um arquivo CSS separado (por exemplo, “style.css”) e o

vincula ao seu HTML usando a tag “<link>” na seção “<head>”. Isso

mantém o código mais limpo, organizado e permite reutilizar

estilos em várias páginas.

Primeiro, crie um arquivo com o nome “style.css” - sempre que

criarmos um arquivo css temos de colocar o “.css” depois do nome

do arquivo:

59
 Arquivo .css

Em seguida, vincule o arquivo CSS ao seu HTML:

Agora se alterarmos o arquivo “style.css”:

Todos os parágrafos terão a cor da fonte em laranja. É importante

prestar atenção ao vincular o arquivo no HTML. Por exemplo, se o
arquivo "style.css" estiver dentro da pasta "estilo", você teria que
referenciá-lo da seguinte forma:

60
Sempre teste o estilo que você está chamando antes de começar a

estilizar a página, só para garantir que tudo está correto.

Prioridade

Quando você inclui arquivos externos, como arquivos CSS, em suas

páginas HTML, a ordem e a prioridade em que esses arquivos são

chamados podem ter um impacto no estilo final da página. Isso

ocorre porque as regras de estilo definidas em diferentes arquivos

podem entrar em conflito ou serem sobrescritas. Por exemplo:

Se ambos os arquivos definirem a cor de um elemento, a que vai

prevalecer será sempre a do arquivo que foi incluído por último. Isso

vale para qualquer outro tipo de arquivo que você incluir no seu

código.

No CSS também há a ordem de importância dependente de onde

você estiliza o elemento: o que foi declarado inline tem a maior

prioridade, seguido pelo interno e, por último, o externo. Então, se

você mudar a cor de um elemento de maneira inline (dentro da tag

HTML) e também mudar no arquivo css externo, aquele que vai

prevalecer será o inline.

Além disso, existe a propriedade “!important”, que pode ser

adicionada a uma regra de estilo para dar a ela uma prioridade mais

alta, ignorando a cascata normal de estilos. No entanto, recomenda-

se usá-la com moderação, pois o uso excessivo de “!important” pode

complicar a manutenção do código.

61
62
 Sintaxe CSS

A sintaxe é como você organiza e escreve suas instruções de estilo.

Não se preocupe, vamos quebrar tudo em pedaços fáceis de
entender.

A estrutura básica

Uma regra de estilo CSS é composta por pares de propriedades e

valores.

Seletor

O seletor é o elemento HTML que você deseja estilizar. Ele define

qual parte do seu documento deve receber os estilos que você
especifica. Existem três tipos principais de seletores:

Tag: É o nome da tag HTML em si, como “p”, “h1”, “div” e assim por
diante. Quando você seleciona uma tag, todos os elementos desse
tipo no seu HTML serão afetados.

Classe: É identificada por um ponto antes do nome da classe, como

“.botao”. Quando você usa um seletor de classe, apenas os
elementos com essa classe específica serão estilizados.

ID: É identificado pelo símbolo “#” seguido pelo nome do ID, como
“#cabecalho”. Ao selecionar um ID, apenas o elemento com esse ID
exclusivo será estilizado.

Dentro das chaves “{}” é onde estarão as instruções de estilo.

Propriedades e valores

As propriedades são como instruções que você dá ao navegador

sobre o que você quer estilizar. Por exemplo, “color” (cor do texto),
“font-size” (tamanho do texto) e “background-color” (cor de fundo)
são propriedades.

63
O valor é a definição que você dá à propriedade. Por exemplo, se a
propriedade for "color", o valor pode ser "red", assim a cor do texto
será vermelho.

Lembre-se de sempre colocar um ponto e vírgula (;) no final de cada

valor.

Exemplos simples

Vamos dar uma olhada em alguns exemplos simples para ilustrar a

sintaxe:

Prioridade de seletores

Aqui nos seletores também temos uma ordem de prioridade: O ID

tem a mais alta prioridade (“#id”), seguido pelas classes (“.classe”) e
por último, os seletores de elementos (“div”, “p”, etc.). Então se você
tem o seguinte trecho no HTML:

64
E estilizar assim:

A regra definida no seletor de classe “.texto1” será a que prevalecerá.

Além disso, a ordem em que os estilos são definidos também tem

influência na prioridade. Se houver conflito entre duas regras com a

mesma especificidade (mesmo tipo de seletor: classe e classe, por

exemplo), a regra definida por último terá prioridade sobre a

primeira. Por exemplo:

No caso acima, mesmo que a classe “.texto1” seja usada duas vezes,

a segunda definição de cor (“color: red”) tem maior prioridade que a

primeira (“color: blue”), devido à ordem em que foram declaradas.

Seletores avançados

Existem outros seletores avançados que vamos falar sobre mais a

frente. Mas, por enquanto, vamos manter as coisas simples para

facilitar o aprendizado. Com esses fundamentos, você está pronto

para começar.

65
Comentários

Os comentários são como anotações para você ou para quem mais

estiver lendo o código. Eles não afetam a aparência do seu site. No
CSS os comentários devem ser colocados entre “/* comentário */”.

66
 Configurações Globais - “Reset”

Por que precisamos de um “reset”?

Quando você cria um site, os navegadores aplicam

automaticamente algumas configurações aos elementos. Isso pode
fazer com que diferentes navegadores mostrem as coisas de
maneiras diferentes. Um “reset” remove essas configurações
automáticas, deixando você começar do zero.

Reset básico para “html” e “body”

Começaremos “resetando” as configurações padrão para os

elementos “html” e “body”. Isso garante que você tenha uma base
uniforme para começar a estilizar:

*Você vai entender melhor as propriedades que vamos citar aqui

nos próximos capítulos, então não precisa esquentar a cabeça
com isso. Mas mesmo assim vamos explicar brevemente o porquê
de cada ponto.

Definimos o valor de “height” (altura) como 100% para o corpo do

site ter uma altura definida, permitindo que atribuamos uma altura
em porcentagem aos elementos que estão dentro do “body”.

Seletor universal “*”

O seletor universal “*” seleciona todos os elementos da sua página.

Usamos isso para aplicar o “reset” a todos os elementos:

67
Zeramos a “margin” e o “padding” para que não tenham espaços

que vêm por padrão nos elementos.

Zeramos o “border” para eliminar qualquer borda que venha por

padrão.

Atribuímos o valor “border-box” à propriedade “box-sizing” para

manter o cálculo de largura e altura dos elementos considerando o

preenchimento e a borda. Você compreenderá isso no capítulo

sobre “margin e padding”.

Agora temos uma base consistente para estilizar qualquer página,

garantindo que você tenha um ponto de partida uniforme e

previsível em diferentes navegadores.

Lembre-se de sempre “resetar” o estilo do site quando você iniciar

um novo arquivo de estilo.

68
 Width e Height

O que são “width” e “height”?

O “width” (largura) e o “height” (altura) são propriedades CSS que

definem o tamanho de um elemento.

Unidades de medida

Você pode usar várias unidades de medida para “width” e “height”.

Algumas das mais comuns incluem:

Pixels (px): Uma unidade fixa, como se fossem centímetros.

Porcentagens (%): Relativo ao tamanho do elemento pai*.

Viewport units (vw e vh): Relativos ao tamanho da janela do

navegador.

*Elemento pai é o "container" que envolve outros elementos, por

exemplo:

Elemento pai
Elemento filho

Exemplos de unidades de medida

width: 300px - largura fixa de 300 pixels

height: 50% - altura igual a 50% do elemento pai

width: 10vw - largura igual a 10% da largura da janela

height: 20vh - altura igual a 20% da altura da janela

Vamos dar uma altura e uma largura de 100px para o seguinte

elemento:

69
 100px

100px

(Lembre-se de testar e explorar os exemplos na prática no seu VS

Code, hein! )

Teste prático

Agora, tente você mesmo: faça com que uma div tenha metade do
tamanho da tela e ocupe toda a altura dela, assim:

70
Uma dica: use a propriedade “background-color: blue;” para

conseguir visualizar a div.

Depois de tentar sozinho você pode conferir a resposta abaixo:

Isso pode ser feito de pelo menos duas formas, usando “width: 50%;”

ou “50vw”:

Usando “min” e “max” para controle

Às vezes, você quer garantir que um elemento nunca fique menor

que um tamanho mínimo ou maior que um tamanho máximo. É aí

que entram as propriedades “min-width”, “max-width”, “min-

height” e “max-height”:

71
Neste exemplo, se a largura de 30% que definimos para o elemento

for maior que 400px, a largura se manterá em 400px. Se ela for

menor que 100px, ela se manterá em 100px.

Na prática você vai entender em quais situações o “min” e “max”

serão úteis. Essas propriedades são ferramentas úteis para criar

designs mais controlados e responsivos (você vai aprender o que é

responsividade mais adiante), permitindo que os elementos se

ajustem adequadamente a diferentes tamanhos de tela e

dispositivos.

72
 Margin e Padding
Margin

A propriedade “margin” controla o espaço externo ao redor de um

elemento. Você pode aplicar margens a todos os lados ou a lados
específicos de um elemento. Exemplos:

30px

30px 30px

30px

73
 30px

30px

Padding

A propriedade “padding” controla o espaço interno entre o

conteúdo do elemento e as bordas. Você pode aplicar espaço a
todos os lados ou a lados específicos de um elemento. Exemplos:

15px

15px 15px

15px

74
 15px

Margin vs. Padding

A diferença chave entre eles é onde eles são aplicados: “margin” é

fora das bordas do elemento, enquanto “padding” é dentro das
bordas, ao redor do conteúdo.

margin
padding

Você se lembra da propriedade “box-sizing: border-box” que

utilizamos para fazer o “reset”? Bem, se não aplicássemos essa
propriedade a todos os elementos, o tamanho de um elemento
mudaria à medida que você adicionasse “padding” ou “margin” a
ele. Isso poderia prejudicar nosso controle sobre o tamanho dos
elementos.

Observe a diferença com e sem o “box-sizing: border-box”. Se

adicionássemos um “padding-left” de 100px ao elemento, sem o
“border-box”, o padding iria se somar ao tamanho do elemento:

75
Com o “border-box” o padding não altera o tamanho do elemento,

assim você tem total controle sobre a largura e altura:

Formato shortcode 


O formato “shortcode” (também conhecido como “shorthand”) se

refere a uma forma otimizada de escrever propriedades CSS,

combinando várias propriedades individuais em uma única linha,

economizando seu tempo e deixando o código mais limpo.

No contexto da margin e padding, você pode definir o valor de

todos os lados apenas uma linha, assim:

Agora sempre que citarmos o formato “shorthand” ou “shortcode”

você saberá sobre o que estamos falando.

 Cores no CSS
No CSS, existem diversas maneiras disponíveis para declarar cores,
vamos ver algumas das principais formas:

Cores em nomes

O CSS possui uma série de nomes de cores pré-definidos, como

“red”, “blue” e “green”. É uma maneira fácil de escolher cores sem
precisar lembrar ou buscar códigos de cores. No entanto, as opções
são limitadas.

Cores hexadecimais (#RRGGBB)

As cores hexadecimais são uma forma mais precisa e flexível de

escolher cores. Elas consistem em um símbolo de hash (#) seguido
de seis dígitos hexadecimais (0-9 e A-F) representando as
intensidades de vermelho (RR), verde (GG) e azul (BB).

77
Cores RGB (Red, Green, Blue)

As cores RGB são especificadas usando intensidades separadas de

vermelho, verde e azul, variando de 0 a 255. Elas oferecem mais
controle sobre as cores, permitindo tons mais sutis.

Cores RGBA (Red, Green, Blue, Alpha)

A adição de um valor “alpha” em uma cor RGB cria uma cor RGBA.
O valor “alpha” controla a transparência da cor, variando de 0
(totalmente transparente) a 1 (totalmente opaco).

78
Escolhendo a melhor opção

A escolha da melhor forma de especificar cores depende muito das

suas preferências pessoais; não existe uma opção melhor, pior, certa

ou errada.

Mas você pode estar se perguntando “como vou memorizar todos

esses padrões??”. A resposta é simples: você não precisa.

Existem diversas ferramentas que nos auxiliam nessa tarefa. Vamos

passar uma que já vai suprir qualquer necessidade que você tiver.

Selecionando cores no VS Code

Abrir um seletor de cores no VS Code é bastante simples. Primeiro,

escreva a propriedade de cor que deseja definir; pode ser qualquer

cor para começar. Em seguida, passe o cursor sobre o valor e o

seletor de cores se abrirá automaticamente.

Altera o formato da cor

Altera a transparência

Altera o tom da cor

Altera a cor

79
 Background
O background é nada mais do que o plano de fundo de um
elemento.

background-color

A propriedade “background-color” permite que você pinte o fundo

de um elemento com uma cor sólida. Você pode declarar a cor de
todas as formas que citamos no capítulo anterior. Vamos pintar
todo o corpo do nosso arquivo de azul:

background-image

Que tal adicionar uma imagem ao fundo? A propriedade

“background-image” faz exatamente isso. Você pode usar URLs
para imagens locais (salvas em uma pasta do seu projeto) ou online.

80
81
*Lembre-se de fornecer o caminho correto da imagem conforme o

local que ela estiver localizada.

Note que o seu fundo pode ter ao mesmo tempo uma imagem e

uma cor:

Com esta propriedade também podemos fazer fundos em

gradiente (ou degradê), mas vamos falar desse assunto no próximo

capítulo.

82
background-repeat

Se a imagem de fundo for menor que o elemento, ela pode se

repetir, assim:

Use “background-repeat” para controlar essa repetição:

83
Existem 4 valores para essa propriedade:

repeat-y - Repete-se na vertical.

repeat-x - Repete-se na horizontal.

no-repeat - Não se repete.

repeat - Valor padrão, repete-se nas duas direções.

Você pode experimentar cada valor para se familiarizar com os

efeitos que eles produzem. No geral, costumamos utilizar o valor
“no-repeat” quando queremos apenas uma imagem de fundo sem
repetição, e o valor “repeat” (que é o padrão) quando queremos
criar um efeito contínuo de padrão.

background-position

Você pode ajustar a posição da imagem de fundo usando

“background-position”. Isso é útil para garantir que a parte mais
importante da imagem fique visível.

84
Nesse exemplo, a imagem de fundo está sendo posicionada no
centro inferior do elemento. Você pode controlar a posição da
imagem nos eixos vertical e horizontal usando diferentes valores.

Horizontal

right - imagem à direita.

center - imagem no centro.

left - imagem à esquerda.

Vertical

top - imagem no topo.

center - imagem no centro.

bottom - imagem em baixo.

Se você der apenas um valor para a propriedade (“background-

position: center;“), a imagem vai seguir este valor tanto no eixo
vertical quanto no horizontal.

Você também pode usar valores em porcentagem ou pixels para

posicionar a imagem. O primeiro valor representa a posição
horizontal (distância à direita) e o segundo valor a posição vertical
(distância acima). Você pode usar somente pixels, somente
porcentagens ou combinar ambos.

85
background-size

A propriedade background-size é usada para controlar o tamanho

da imagem de fundo que você aplica a um elemento.

Usando valores fixos

Você pode definir valores em pixels ou porcentagem para a largura

e altura da imagem. No entanto, usar essa abordagem fixa não é

muito recomendado, pois a imagem pode ficar distorcida e você

terá menos controle sobre ela.

86
Largura fixa e altura automática

Uma opção melhor é definir apenas a largura e permitir que a altura

se ajuste automaticamente. Isso evita a deformação da imagem.

87
Valores pré-definidos

Para obter melhores resultados, é recomendável usar os valores pré-

definidos:

cover: dimensiona a imagem para cobrir todo o elemento. Pode

resultar em parte da imagem ficando fora da visão, mas garante

que o elemento seja totalmente preenchido.

contain: dimensiona a imagem para se ajustar completamente

dentro do elemento. Pode resultar em espaço em branco ao redor

da imagem, mas garante que toda a imagem seja visível.

Dessa forma, a imagem cobre todo o elemento. Note que

posicionamos ela no centro do elemento para ficar centralizada.

88
 background-attachment
A propriedade “background-attachment” controla se a imagem de
fundo se move junto com o conteúdo ou fica fixa enquanto você
rola. Criando o efeito popularmente conhecido como parallax, onde
parece que o conteúdo passa por cima e a imagem continua fixa.

89
 Quando rolamos a página para baixo a
imagem não se move junto, ela fica fixa, como
se a página estivesse passando por cima dela

background

A propriedade “background” é usada para definir diversas

características de fundo de um elemento em apenas uma linha (no
formato shortcode).

blue: Define a cor de fundo como azul.

url(‘Imagem.jpg’): Especifica a imagem de fundo a partir do

caminho fornecido.

no-repeat: Impede que a imagem de fundo seja repetida.

left top: Posiciona a imagem no canto superior esquerdo.

É importante entender que esse exemplo é apenas um entre

muitos. A propriedade "background" oferece diversas combinações
possíveis. No entanto, não se preocupe em memorizar todas, essa é
apenas uma forma mais curta e enxuta de fazer aquilo que já lhe
mostramos nas propriedades anteriores. Deixe para explorar melhor
o formato shorthand do "background" quando estiver dominando
os conceitos.

90
Teste prático

Agora, tente criar por conta própria: crie duas divs, cada uma com

40% de altura e 20% de largura. Aplique uma margem de 50 pixels à

esquerda e acima de cada div. Na primeira div, adicione um fundo

de cor azul e, na segunda div, uma imagem de fundo que cubra

todo o espaço e que esteja centralizada.

Lembre-se de substituir o caminho para a imagem pelo caminho

correto da imagem que você deseja usar como fundo na segunda

div. Se as divs não aparecerem corretamente, certifique-se de ter

aplicado o reset do CSS antes de começar o estilo.

O resultado deve ser esse:

Depois de tentar, você pode conferir a resposta nas próximas

páginas.

91
É possível que você tenha escolhido outras formas para definir a
altura e largura de cada div individualmente, e isso não está
incorreto. Porém, há sempre formas mais limpas e otimizadas de
escrever nosso código. Com a prática, você vai se familiarizando
cada vez mais com essas otimizações.

92
 DegradÊ

Um degradê (ou gradiente) é uma transição suave entre duas ou

mais cores. Ele começa com uma cor em um ponto e gradualmente
se transforma em outra cor em outro ponto. Os degradês podem
ser simples, com apenas duas cores, ou mais complexos, usando
várias cores intermediárias.

Entendendo a Sintaxe

Você pode criar degradês usando a propriedade “background-

image” e a função “linear-gradient()”. A sintaxe básica da função é a
seguinte:

background-image: linear-gradient([ <angle> | to <direction> ],

<start-color> [position], ..., <last-color> [position], ...)

No primeiro valor podemos indicar o ângulo (em graus) ou a

direção (com valores padrão).

angle: É o ângulo do gradiente, indicando a inclinação linear do

efeito. Se não especificado, o valor padrão é 180deg (deg = graus),
representando uma linha horizontal de cima para baixo.

direction: Indica a direção na qual o gradiente será aplicado. Valores

possíveis incluem “to left” (da direita para esquerda), to right (da
esquerda para direita), to bottom (de cima para baixo), to top (de
baixo para cima), entre outros.

start-color, last-color, etc: Indicam as cores que formarão o

gradiente.

position: Opcionalmente, você pode definir uma posição para cada

cor, permitindo um controle mais preciso da transição. Pode ser um
valor percentual ou uma posição específica.

A princípio parece um pouco complicado, mas na prática é mais

fácil. E no final ainda vamos te passar uma ferramenta que vai
facilitar muito na hora de você criar degradês.

93
Exemplos:

94
Radial Gradient: Criando Efeitos Circulares

A função “radial-gradient()” cria gradientes circulares ou elípticos a

partir de um ponto central, irradiando para fora. Ela é semelhante à

“linear-gradient”, mas com a origem no centro. A sintaxe básica da

função radial-gradient é:

radial-gradient([<shape>] || [<size>] [at <position>], <start-color>

[<size>] [at <position>], ..., <last-color> [<size>] [at <position>]);

shape: Indica o formato do gradiente, podendo ser circle ou ellipse.

size: Define o tamanho do gradiente.

position: Indica a posição do gradiente, com o centro como padrão.

start-color, last-color, etc: Especificam as cores do gradiente.

95
Facilitando sua vida

A fim de simplificar a criação de degradês sem a necessidade de se

preocupar com a sintaxe, existe uma solução prática: fazer uso de

ferramentas online que geram automaticamente o código do

degradê desejado. Embora haja várias alternativas disponíveis na

internet, vamos destacar uma em particular para você explorar:

https://cssgradient.io/

Esta ferramenta permite que você selecione cores, ângulos,

direções e outras opções visuais em uma interface intuitiva,

eliminando a necessidade de dominar a complexidade da sintaxe. A

partir dessas seleções, ela gera o código CSS correspondente,

pronto para ser copiado e colado diretamente em seus estilos.

96
Acima fica a representação do degradê que você está criando:

Você pode clicar em cima de um dos pontos que estão na barra de

seleção para alterar a cor dele:

Ou clicar em alguma parte da barra que ainda não há um ponto

para criar um novo ponto.

Para modificar as cores, o sistema é bem parecido com o seletor de

cores do VS Code. Na caixa à esquerda você pode mudar o tom e

nas barras da direita você modifica a cor e a transparência:

Abaixo você ainda pode modificar a forma do efeito (linear ou radial)

e também o ângulo:

97
Depois de finalizar o estilo você pode copiar o código e colar no seu

CSS:

Explore um pouco a ferramenta para se familiarizar com o efeito,

crie alguns degradês diferentes e coloque no seu código para ver o

resultado.

98
 Bordas
As bordas no CSS são elementos que envolvem a área de um
elemento HTML, criando uma moldura ao redor dele. Essas bordas
podem ter diferentes estilos, cores e espessuras:

“border”

A propriedade “border” permite adicionar uma borda sólida ao

redor de um elemento.

Mas nas bordas é muito melhor e mais fácil usar o formato

shortcode:

99
O primeiro valor é a espessura da borda, seguida do estilo e por
último a cor.

Bordas individuais

Se você quiser controlar as bordas individualmente, pode usar as

propriedades “border-top”, “border-right”, “border-bottom” e
“border-left”.

Você também pode adicionar a borda em apenas alguns dos lados

do elemento:

100
Cores e estilos de bordas

Você pode personalizar ainda mais as suas bordas escolhendo

diferentes estilos, como “dotted” (pontilhado), “dashed” (tracejado) e
“double” (duplo).

101
border-radius

A propriedade “border-radius” permite arredondar os cantos dos

elementos. Note que o elemento não precisa ter uma borda para
você usar essa propriedade.

Se você quiser transformar um elemento quadrado em um redondo

é só definir o valor do “border-radius” como 50%:

102
Também podemos arredondar apenas alguns cantos. Não há um

formato shorthand, então temos de definir individualmente:

103
 Box Shadow
A sombra de caixa (“box shadow”) é uma propriedade CSS que
permite adicionar sombras aos elementos. Ela cria uma ilusão de
que o elemento está flutuando sobre o plano de fundo, dando
profundidade e destaque.
Sintaxe do box-shadow

box-shadow: h-shadow v-shadow blur spread color;

h-shadow: Define o deslocamento horizontal da sombra. Valores
positivos deslocam a sombra para a direita, enquanto valores
negativos a movem para a esquerda.

v-shadow: Define o deslocamento vertical da sombra. Valores

positivos deslocam a sombra para baixo, enquanto valores
negativos a movem para cima.

blur: Define o desfoque da sombra. Quanto maior o valor, mais

borrada será a sombra.

spread: Define a expansão da sombra. Um valor positivo expandirá

a sombra, enquanto um valor negativo a contrairá.

color: Define a cor da sombra.

104
105
Facilitando sua vida

Apesar da simplicidade da propriedade "box-shadow", existem

ferramentas que podem te ajudar com ela. Recomendamos a

seguinte: https: //box-shadow.dev/

No lado esquerdo você tem controle sobre os valores da

propriedade e pode visualizar em tempo real como o elemento será

afetado.

Para copiar o código da propriedade, basta clicar no botão "Show

code" localizado no canto superior direito e, em seguida, você

poderá copiar o código gerado.

106
Teste prático

Agora, vamos aplicar os conceitos que discutimos para fixar o

conteúdo e saber se você está acompanhando. Crie uma div com
um parágrafo dentro. Defina a div com 300px de largura e altura,
margem superior de 200px e margem esquerda de 100px, além de
um espaçamento interno de 20px. Aplique um fundo gradiente
simples do preto para o azul, da esquerda para a direita, e uma
borda preta de 2px. Faça as bordas do elemento com
arredondamento de 10px. Adicione uma sombra com a cor
"rgba(0,0,0,0.2)", -20px à esquerda e 20px para baixo, desfoque em
25px e sem expansão.

Você terá de aplicar vários conceitos, então se sinta à vontade para

revisar o conteúdo se não estiver bem lembrado.

O resultado deve ser esse:

Tente fazer sozinho, depois confira a resposta nas próximas páginas.

107
108
 Tipografia

A tipografia é uma parte fundamental do design de um site. Ela se

refere à forma como o texto é apresentado, incluindo fontes,
tamanhos, espaçamento e estilo. No CSS, você tem controle total
sobre a tipografia do seu site, permitindo que você crie uma
experiência visual agradável e legível para os visitantes.

Adicionando fontes ao projeto: Google Fonts

O Google Fonts é uma biblioteca amplamente utilizada que oferece

uma variedade de fontes gratuitas. É a forma mais rápida e fácil de
adicionar uma fonte ao seu projeto. Para adicionar fontes do Google
Fonts ao seu site é muito simples:

Acesse o site do Google Fonts.

Navegue pelas fontes e clique naquela que deseja usar.
Role pra baixo e selecione os estilos da fonte.

Selecione os estilos clicando no sinal de mais “+”

Vai abrir uma barra na direita, caso ela não abra sozinha é só
clicar aqui:

109
Nesta aba você terá o código que importa a fonte no html e

abaixo você tem a forma que a fonte deve ser chamada no CSS,

agora é só copiar e adicionar ao seu projeto.

código HTML

código CSS

110
Você deve adicionar o código HTML dentro da tag <head> do site,

da mesma forma que você aprendeu a adicionar arquivos css:

E dentro do CSS você pode adicionar a fonte como uma

propriedade da tag body:

Adicionando fontes ao projeto: Fontes locais

Além das fontes do Google Fonts, você também pode incorporar

fontes personalizadas do seu próprio servidor. Para fazer isso, siga

estes passos:

Baixe os arquivos de fonte (geralmente em formatos como .woff,

.woff2, .ttf) para o seu projeto.

Crie uma pasta no seu projeto para armazenar esses arquivos de

fonte.

Adicione os arquivos de fonte à pasta que você criou.

No seu arquivo CSS, use a propriedade @font-face para

incorporar a fonte.

111
Lembre-se de substituir "Nome da Fonte" pelo nome que você

deseja usar para referenciar a fonte em seu CSS, e substitua os

caminhos para os arquivos de fonte pelos caminhos corretos em

seu projeto.

Escolhendo fontes

A propriedade “font-family” permite escolher a fonte para o texto. O

primeiro nome de fonte especificado é a que você deseja usar como

primeira opção, caso esta fonte não esteja disponível, o navegador

tentará usar a próxima fonte listada, e se essa também não estiver

disponível, ele continuará descendo na lista até encontrar uma

fonte que possa ser usada.

Nesse caso "Open Sans" é a fonte primária que você deseja usar. Se

"Open Sans" não estiver disponível, o navegador procurará por

"Arial" e a usará como alternativa. Se nenhuma das duas primeiras

opções estiver disponível, o navegador tentará usar qualquer fonte

genérica "sans-serif" que esteja disponível no sistema do usuário.

112
Controlando tamanhos

A propriedade “font-size” define o tamanho do texto. As medidas

adotadas podem ser qualquer uma utilizada no css (px, em, %...),

sendo as mais usadas:

Pixels (px): A unidade mais comum. Define o tamanho da fonte em

pixels.

Em: Define o tamanho da fonte em relação ao tamanho da fonte do

elemento pai. Por exemplo, se o tamanho da fonte do pai for 16px,

1em será igual a 16px, 0,5em será igual a 8px.

Rem: Semelhante ao em, mas define o tamanho da fonte em

relação ao tamanho da fonte do elemento raiz (<html>).

Porcentagem (%): Define o tamanho da fonte como uma

porcentagem do tamanho da fonte padrão do navegador. Por

exemplo, 100% é igual ao tamanho padrão do navegador.

113
Estilo da fonte

A propriedade “font-style” define o estilo da fonte, como “italic” para

itálico e “oblique” para uma inclinação.

Transformação do texto

Com a propriedade “text-transform”, você pode transformar o texto

em maiúsculas (uppercase), minúsculas (lowercase) ou capitalizá-lo
(capitalize).

Decoração do Texto:

Use a propriedade text-decoration para adicionar decorações ao

texto, como sublinhado (underline), tachado (line-through), entre
outros. Por exemplo:

114
Espaçamento entre linhas e letras

A propriedade “line-height” controla o espaçamento entre as linhas

de texto, enquanto “letter-spacing” ajusta o espaço entre as letras.
Isso afeta a legibilidade e o estilo do texto.

Texto normal:

Texto alterando espaçamentos:

115
Alinhamento do Ttexto

As propriedades “text-align” e “vertical-align” permitem alinhar o

texto horizontal e verticalmente, respectivamente.

Alinhamento horizontal

A propriedade “text-align” controla o alinhamento horizontal do

texto dentro de um elemento. Os valores possíveis incluem:

left: Alinha o texto à esquerda.

right: Alinha o texto à direita.

center: Centraliza o texto horizontalmente.

justify: Distribui uniformemente o espaço entre as palavras,

alinhando-as com as margens esquerda e direita. Isso é

comumente usado em parágrafos.

116
Cores do texto

A propriedade “color” define a cor do texto. Você pode colocar o

valor de todas as formas que já foram citadas anteriormente.

117
 font weight
A propriedade “font-weight” no CSS permite controlar a espessura
(também chamada de peso) da fonte que está sendo aplicada a um
elemento HTML. Essa propriedade é muito útil para dar destaque a
determinados textos, criar hierarquia visual ou melhorar a
legibilidade.

A propriedade “font-weight” aceita valores numéricos ou palavras-

chave para definir a espessura da fonte.

Valores numéricos

Você pode usar valores numéricos de 100 a 900 para definir a

espessura da fonte. Valores menores são mais finos, enquanto
valores maiores são mais grossos. Neste exemplo vamos importar a
fonte “Roboto” do Google Fonts com diferentes pesos:

118
Palavras-chave

Além dos valores numéricos, você também pode usar palavras-

chave para definir a espessura da fonte de maneira mais intuitiva:

normal: Espessura padrão (valor padrão).

bold: Espessura negrito.

bolder: Aumenta a espessura em relação ao valor atual.

lighter: Diminui a espessura em relação ao valor atual.

Quando você usa fontes importadas do Google Fonts é possível

saber quais espessuras a fonte tem ao selecionar os estilos que

serão importados, como mostramos no passo a passo para importar

a fonte para o seu projeto.

Lembre-se de que a disponibilidade das espessuras de fonte varia

de acordo com a fonte que você está usando. Nem todas as fontes

possuem todas as variações de espessura, então é importante

verificar as opções oferecidas pela fonte que você está utilizando.

119
Text shadow

A propriedade “text-shadow” permite adicionar sombras ao texto,

criando um efeito tridimensional e destacando-o do plano de

fundo. O “text-shadow” permite controlar a cor, a posição horizontal

e vertical da sombra e o desfoque (é bem parecida com o “box-

shadow”). A sintaxe básica do “text-shadow” é a seguinte:

text-shadow: <h-shadow> <v-shadow> <blur-radius> <color>;

<h-shadow>: Define a distância horizontal da sombra em relação ao

texto. Um valor positivo desloca a sombra para a direita, enquanto

um valor negativo a desloca para a esquerda.

<v-shadow>: Define a distância vertical da sombra em relação ao

texto. Um valor positivo desloca a sombra para baixo, enquanto um

valor negativo a desloca para cima.

<blur-radius>: Especifica o desfoque da sombra. Quanto maior o

valor, mais difusa será a sombra. Um valor de 0 significa que a

sombra será nítida.

<color>: Define a cor da sombra.

Teste prático

Chegou a hora de colocar a mão na massa, esse teste prático vai ser

um pouco mais extenso do que os anteriores, então vamos dividir

por etapas:

120
Passo 1: Adicionando Fontes

Adicione a fonte “Montserrat” com todos os estilos ao seu projeto.

Importe essa fonte no HTML e adicione-as ao CSS como a fonte
padrão do corpo do documento.

Passo 2: Tamanhos, estilos e sombra

- Crie um cabeçalho “<header>” com largura de 50%, espaçamento

de 50px, margem à esquerda e acima de 100px, uma borda de 2px
preta e cantos arredondados em 15px.

- Adicione um título “<h1>” dentro do header com um texto de sua

escolha.

- Defina o tamanho da fonte do título para 36 pixels e a cor do texto

para azul.

- Aplique uma sombra ao título com um deslocamento horizontal e

vertical, bem como um desfoque.

- Crie um parágrafo “<p>” abaixo do título com margem superior e

inferior de 10px.

- Defina o tamanho da fonte do parágrafo como 18 pixels.

- Aplique estilo itálico ao parágrafo e uma espessura de 300.

Passo 3: Transformações e Decorações

- Abaixo do parágrafo crie um botão “<button>” com o texto "Clique

Aqui".

- Transforme o texto do botão em letras maiúsculas.

- Aplique um sublinhado ao texto do botão.

- Defina um espaçamento de 10px, a cor de fundo do botão como

azul, a cor da fonte como branca, com 600 de espessura e bordas
arredondadas em 5px.

Passo 4: Espaçamento e Alinhamento

- Abaixo do header crie uma “<div>”, com um parágrafo contendo

um texto de exemplo comprido.

- Aumente o espaçamento entre as linhas de texto dentro desse

bloco para 30px.

- Aumente o espaçamento entre as palavras do bloco para 5px.

- Alinhe o bloco de texto ao centro horizontalmente.

- Defina um espaçamento de 30px.

121
O resultado deve ser esse:

Tente fazer sozinho, depois confira a resposta nas próximas páginas.

122
123
124
 Position
A propriedade “position” é utilizada para controlar a posição de um
elemento HTML em relação aos seus elementos pai e ao
documento como um todo. Ela determina como um elemento será
posicionado dentro do fluxo normal do conteúdo e como ele
interage com outros elementos ao redor.

Existem 5 valores principais para a propriedade position:

“static”

Esse é o comportamento padrão dos elementos. Eles são

posicionados na ordem em que aparecem no HTML, seguindo o
fluxo normal do documento. Não são afetados pelas propriedades
de posicionamento.

“relative”

Um elemento com a propriedade “position: relative” mantém seu

espaço normal no layout, mas permite que seja deslocado usando
as propriedades “top”, “right”, “bottom” e “left”, de maneira
semelhante à propriedade “margin”. No entanto, esse
deslocamento não terá impacto em outros elementos e eles não
serão reposicionados para ocupar o espaço deixado vago.

125
 30px

30px

“absolute”

Ao aplicar o valor “absolute” à propriedade “position”, o elemento é

“retirado” do fluxo normal, permitindo que ele sobreponha outros
elementos e ocupe um espaço independente no layout.

Essa propriedade é frequentemente usada para criar elementos

sobrepostos, como menus de navegação ou caixas de popup
(aquelas janelas que se abrem no meio do site sobre o conteúdo).

126
Sem position absolute:

127
Com position absolute:

128
Como você pode perceber, a box com position “absolute” se
comporta de maneira independente, podendo sobrepor os outros
elementos sem alterar o resto do layout. Experimente modificar os
valores de “top” e “left” para você perceber esse comportamento
independente melhor.

Ao utilizar o “position: absolute”, é importante entender os

seguintes conceitos-chave:

Elemento de Referência

O posicionamento absoluto é definido em relação ao elemento pai

mais próximo que possui uma propriedade position diferente de
“static”. Esse elemento pai é chamado de “elemento de referência”
para o elemento posicionado. No nosso exemplo, adicionamos a
propriedade position com valor “relative” à div “.container”. Embora
isso não tenha modificado o layout visível, tornou a div “.container” o
elemento de referência para todos os elementos contidos dentro
dela.

Coordenadas de Posicionamento

As propriedades “top”, “right”, “bottom” e “left” são usadas para

determinar a posição do elemento posicionado em relação ao seu
elemento de referência. Essas propriedades definem as distâncias
entre os lados do elemento posicionado e os cantos do elemento de
referência.

Se você deseja posicionar o elemento de forma alinhada com

algum dos cantos do elemento pai, basta atribuir o valor “0” à
propriedade correspondente ao canto. Exemplo:

129
130
“fixed”

Com “position: fixed”, o elemento permanece fixo na tela, mesmo

quando você rola a página. Útil para cabeçalhos, botões de contato

e menus que devem permanecer visíveis.

O elemento permanece fixo mesmo

quando rolamos a tela para baixo

131
O posicionamento de um elemento fixed é em relação a tela. As
propriedades “top”, “right”, “bottom” e “left” definem os espaços
entre o elemento e os cantos da tela.

“sticky”

Com “position: sticky”, o elemento se comporta como “relative” até

que você role além de um ponto específico, determinado por uma
coordenada vertical definida (por exemplo, “top: 100px”). A partir
desse ponto, o elemento “cola” naquela posição enquanto você rola
o restante da página, semelhante ao posicionamento “fixed”.

Assim como o position “absolute”, o position “sticky” é definido em

relação ao elemento pai mais próximo que possui uma propriedade
position diferente de “static”.

132
 Até que o seu elemento pai
O elemento fica fixo chega ao fim conforme rolamos

133
 display

A propriedade “display” controla como os elementos HTML são

renderizados e posicionados na página. Ela influencia diretamente a
estrutura do seu layout. Existem vários valores que a propriedade
display pode assumir. Vamos explorar os mais importantes:

“block”

Quando um elemento tem o valor “block” para a propriedade

“display”, ele ocupa toda a largura disponível, não deixando nenhum
outro elemento na mesma linha, e cria um “bloco”. Isso significa que
ele começa em uma nova linha e empurra outros elementos para
baixo. É o valor padrão da maioria dos elementos, incluindo <div>,
<p>, <h1> a <h6>, entre outros.

134
“inline”

O valor inline faz com que o elemento se comporte como um

elemento de texto normal, ocupando apenas o espaço necessário
para seu conteúdo. Ele não inicia uma nova linha e outros
elementos podem ficar ao seu lado na mesma linha. No entanto, ao
utilizar o valor “inline” as propriedades de largura e altura serão
ignoradas, o espaçamento vertical pode não funcionar
corretamente e as margens verticais são ignoradas. Exemplos de
elementos com valor “inline” incluem <span>, <a>, <strong>, entre
outros.

O display “inline” é mais adequado para elementos de texto ou

pequenos elementos que precisam ser posicionados lado a lado na
mesma linha.

“inline-block”

A propriedade “display: inline-block” combina as características dos

valores “inline” e “block”. Elementos com essa configuração ocupam
apenas o espaço necessário para o conteúdo ou o tamanho
definido, permitindo que fiquem lado a lado com outros elementos,
assim como os elementos “inline”. Além disso, eles possibilitam a
configuração de largura, altura, margens e espaçamentos de
maneira semelhante aos elementos “block”.

135
No próximo capítulo vamos falar sobre o “display: flex”, que precisa

de um capítulo a parte pela sua importância e diversas

propriedades.

136
 Flexbox
O Flexbox introduz um sistema de layout bidimensional que
permite organizar elementos em um eixo principal e um eixo
transversal, proporcionando controle total sobre o posicionamento,
alinhamento e distribuição dos elementos. Ele é especialmente útil
quando você precisa criar layouts complexos ou quando deseja
alinhar elementos de maneira precisa.
Ativando o flex

Para ativar o flex, basta aplicar “display: flex” ao container que

envolve os elementos que você deseja organizar de forma flexível.

Observe que todos os elementos estão agora na mesma linha, e não

um abaixo do outro, como estariam sem o flex.

137
Direção

A direção dos itens é definida pela propriedade “flex-direction”:

row - os itens ficarão na direção horizontal, em linha, é o valor

padrão que vem com a propriedade, por isso os itens ficam um ao

lado do outro assim que você adiciona o “flex” ao elemento pai.

column - os itens ficarão na direção vertical, em coluna, dessa forma

eles serão alinhados um abaixo do outro.

row-reverse e column-reverse - funcionam como os valores que

mostramos acima, com a diferença de que eles invertem a ordem

dos itens.

Nosso exemplo ficaria assim com a direção em coluna:

138
Alinhamento

O “display: flex” oferece várias propriedades para controlar o

alinhamento e a direção dos elementos filhos:

justify-content

Alinha os elementos horizontalmente. Valores que podem ser

usados:

flex-start: Alinha os itens no início do container.

flex-end: Alinha os itens no final do container.

center: Centraliza os itens horizontalmente no container.

space-between: Distribui os itens uniformemente ao longo do eixo

principal, deixando o primeiro item no início e o último no final.

space-around: Distribui os itens uniformemente ao longo do eixo

principal, com espaço igual adicional ao redor de cada item.

space-evenly: Distribui os itens uniformemente ao longo do eixo

principal, com espaço igual entre os itens e nas extremidades.

139
align-items

Alinha os elementos verticalmente. Valores que podem ser usados:

flex-start: Alinha os itens no início do container transversalmente.

flex-end: Alinha os itens no final do container transversalmente.

center: Centraliza os itens verticalmente no container.

baseline: Alinha os itens com suas linhas de base.

stretch: Estica os itens para preencher o container verticalmente.

Para você conseguir ver essa propriedade na prática, vamos

aumentar a altura do container:

140
Quando o “flex-direction” está definido como “row”, a propriedade

“justify-content” controla o espaço horizontal e a propriedade

“align-items” controla o espaço vertical. Mas você deve observar que

quando o “flex-direction” está definido como “column”, essa lógica

se inverte: a propriedade “justify-content” controla o espaço vertical

e a propriedade “align-items” controla o espaço horizontal:

141
flex-wrap

A propriedade “flex-wrap” especifica se os itens devem quebrar ou

não em uma nova linha quando não couberem no container. Por

exemplo:

142
143
Quando não é aplicado “flex-wrap: wrap”, os elementos não são

movidos para uma nova linha e, em vez disso, são redimensionados

para caber dentro do container.

align-content

A propriedade “align-content” é útil quando o “flex-direction” está

definido como "row", e existem várias linhas de itens dentro do

container, permitindo ajustes verticais no alinhamento das linhas:

144
Esta propriedade possui os seguintes valores disponíveis:

flex-start: Alinha as linhas no início do container.

flex-end: Alinha as linhas no final do container.

center: Centraliza as linhas verticalmente no container.

space-between: Distribui as linhas uniformemente ao longo do

eixo transversal, deixando espaço igual adicional entre as linhas.

space-around: Distribui as linhas uniformemente ao longo do eixo

transversal, com espaço igual adicional ao redor de cada linha.

stretch: Estica as linhas para preencher o container verticalmente.

gap

O gap no Flexbox é uma propriedade que permite adicionar um

espaçamento entre os itens filhos dentro de um container flexível.

Ele oferece uma maneira mais simples e eficiente de adicionar

espaçamento entre os itens, em comparação com a necessidade de

adicionar margens ou espaçamento interno para alcançar o mesmo

resultado.

145
A sintaxe para usar o gap no Flexbox é bastante simples. Basta

adicionar a propriedade "gap" ao container flexível e especificar o

valor desejado em pixels, em unidades rem ou em porcentagem.

Você também pode dar o “gap” apenas entre as linhas ou colunas:

146
Existem outras propriedades no Flexbox que podem ser exploradas

para criar layouts flexíveis e responsivos. As mencionadas acima são

algumas das principais e mais utilizadas. Se você quiser se

aprofundar mais sobre Flexbox acesse a documentação completa:

Clique aqui para acessar

147
Teste prático

Para praticar o Flexbox vamos propor um layout para você criar.

Tente fazer por conta própria e caso tenha alguma dúvida é só dar
uma olhada nas resoluções.

O layout que você deve tentar reproduzir:

Confira a resposta:

148
149
 Animações

As animações são uma maneira de adicionar movimento e

interatividade aos elementos em seu site sem a necessidade de
JavaScript. Com o CSS, você pode criar animações que melhoram a
experiência do usuário e tornam seu design mais dinâmico. As
animações CSS permitem controlar as transições de propriedades
ao longo do tempo, como a mudança de cor, posição, tamanho e
muito mais.

Keyframes

As animações em CSS são criadas usando a regra “@keyframes”.

Essa regra permite definir os estágios da animação ao longo do
tempo, especificando como o elemento deve se comportar em
cada estágio. Os estágios da animação são representados por
porcentagem, sendo obrigatório o estágio inicial (0%) e o final
(100%), entre o início e o fim podemos ter quantos estágios
quisermos. Sintaxe Básica:

Aplicando a animação

Depois de definir a animação, você pode aplicá-la a um elemento

usando a propriedade “animation”.

150
Sintaxe de Aplicação:

animation: animation-name animation-duration animation-

timing-function animation-delay animation-iteration-count

animation-direction: animation-fill-mode:;

animation-name: Define o nome da animação (keyframes).

animation-duration: Define a duração da animação em segundos

ou milissegundos.

animation-timing-function: Especifica como a animação progride

ao longo do tempo (ex: ease, linear, ease-in-out).

animation-delay: Define um atraso antes da animação começar.

animation-iteration-count: Especifica quantas vezes a animação

deve ser repetida.

animation-direction: Define a direção da animação (normal,

reverse, alternate, alternate-reverse).

animation-fill-mode: Define o estado final da animação (forwards,

backwards, both).

Neste exemplo, vamos criar uma animação simples que altera a cor

de fundo de um elemento de vermelho para azul.

151
Neste código, criamos uma animação chamada “muda-cor” que
altera a cor de fundo do elemento de vermelho para azul. No
keyframe 0%, a cor de fundo é vermelha, no keyframe 50%, a cor de
fundo é azul e no 100% ela volta a ser vermelha. A classe “.elemento”
aplica a animação à div, fazendo com que a mudança de cor ocorra
durante 3 segundos, com um timing de entrada e saída suave
(ease-in-out) e repetindo infinitamente (infinite).

152
Outro exemplo, dessa vez vamos simular um círculo giratório, para

dar aquele efeito de “carregando”:

153
Neste exemplo, a classe “.loader” cria um círculo usando a
propriedade “border” para criar um anel. O “border-top” colore uma
parte do anel para dar a sensação de que está girando. A animação
é definida usando a regra “@keyframes” chamada “spin”, que faz o
círculo girar 360 graus. A animação dura 2 segundos e é repetida
infinitamente com o timing “linear”. O resultado é um efeito de
círculo giratório, semelhante a um indicador de carregamento.

Lembre-se de que os valores dentro da propriedade “animation”

não precisam ser todos os que citamos. Há muitas opções
disponíveis para personalizar a animação de acordo com suas
necessidades. Se você quiser ver mais exemplos e aprender mais
sobre as opções e propriedades disponíveis, você pode conferir a
documentação oficial: CSS Animations

154
 Centralizando Objetos

Centralizar objetos no CSS é uma tarefa comum e importante no

design de sites. Existem várias técnicas que você pode usar para
alcançar esse objetivo, independentemente do tamanho ou tipo de
elemento que você deseja centralizar.

Como centralizar na horizontal

Conseguir a centralização horizontal de elementos é geralmente

mais simples do que a vertical. Aqui, apresentamos algumas
abordagens comuns para centralizar elementos horizontalmente:

Centralizando texto

Para centralizar textos ou links horizontalmente, você pode utilizar a

propriedade CSS “text-align” com o valor “center”:

Centralizando com "margin: 0 auto"

Para centralizar elementos do tipo bloco, como uma div, na

horizontal, você pode usar a propriedade “margin” com o valor “0
auto”:

155
Centralizando na horizontal com Flexbox

Para centralizar um elemento na horizontal usando Flexbox, basta

aplicar “display: flex” e “justify-content: center” ao elemento pai:

156
Como centralizar verticalmente

Alcançar a centralização vertical de elementos sem o uso de

métodos modernos, como o Flexbox, pode ser uma tarefa
desafiadora. Vamos explorar alguns dos métodos tradicionais de
centralização vertical e, em seguida, demonstrar como realizar essa
tarefa usando o Flexbox.

Centralização vertical com transform e translate

Defina a propriedade “position” do elemento pai como “relative”. No

elemento filho, defina “position” como “absolute” e “top” como
“50%”.

157
Nesse ponto, o topo do elemento filho estará centralizado
verticalmente no elemento pai. No entanto, nosso objetivo é
centralizar o próprio centro do elemento. Para alcançar isso,
utilizamos “transform: translate(0, -50%)”. Essa transformação move
o elemento “para cima” em 50% de sua própria altura, efetivamente
centralizando-o verticalmente no elemento pai.

158
Centralização vertical com Flexbox

Assim como o Flexbox centraliza elementos horizontalmente,

também é eficaz para centralizar elementos verticalmente. Use
“display: flex” e “align-items: center” no elemento pai para alcançar a
centralização vertical:

O uso do Flexbox simplifica a centralização vertical e é altamente

recomendado para criar layouts modernos e responsivos.

Centralização vertical e horizontal

Centralização com transform e translate

Defina a propriedade “position” do elemento pai como “relative”. No

elemento filho, defina “position” como “absolute”, “top” como “50%”
e “left” como “50%”. Use “transform: translate(-50%, -50%)” para
centralizar efetivamente o elemento filho tanto na vertical quanto
na horizontal:

159
Centralização com Flexbox

Flexbox é a abordagem mais simples para centralizar elementos

vertical e horizontalmente.

Basta aplicar as propriedades “display: flex”, “justify-content: center”

e “align-items: center” ao elemento pai:

160
161
 SELETORES AVANÇADOS
Os seletores avançados do CSS oferecem maneiras mais precisas e
flexíveis de selecionar elementos em suas páginas. Eles permitem
que você aplique estilos específicos a elementos com base em
critérios mais detalhados, como a relação entre elementos, estados
e características específicas.

Seletores de filhos e descendentes

Os seletores de filhos e descendentes permitem selecionar

elementos específicos que estão dentro de outros elementos.

Seletores de filhos (>)

Você pode usar o seletor de filhos para selecionar elementos que

são filhos diretos de um elemento pai. Por exemplo:

162
Neste caso há dois parágrafos dentro da div “.container”, mas o
único filho direto é o parágrafo 2, que está diretamente aninhado
dentro da div “.container”, sem nenhum outro elemento
intermediário entre eles. Isso significa que o elemento filho direto é
imediatamente contido pelo elemento pai, sem nenhum outro
elemento se intrometendo entre eles na estrutura HTML.

Seletores de descendentes (espaço)

Usando um espaço, você pode selecionar todos os elementos

descendentes que correspondem a um determinado seletor. O
termo “descendente” refere-se a um elemento que está aninhado
dentro de outro elemento, independentemente de quantos
elementos estão entre eles na hierarquia HTML. Por exemplo:

Neste caso, ambos os parágrafos são descendentes da div

“.container”, então ambos foram selecionados.

Seletores de atributos

Os seletores de atributos permitem que você selecione elementos

com base nos valores de seus atributos:

163
Selecionando múltiplos elementos com vírgula

Em muitos casos, você pode querer aplicar estilos semelhantes a

vários elementos diferentes em sua página HTML. Em vez de repetir
as mesmas regras de estilo para cada seletor individualmente, o
CSS oferece uma maneira eficiente de lidar com essa situação:
selecionando múltiplos elementos separados por vírgula.

Basta listar os seletores dos elementos que você deseja selecionar,

separados por vírgulas:

164
Seletores de pseudo-classes

As pseudo-classes são extensões do seletor que ajudam a definir

estilos específicos quando um elemento está em um estado
especial ou posição em relação a outros elementos no documento.

Passando o mouse (:hover)

A pseudo-classe “:hover” é ativada quando o cursor do mouse está

sobre um elemento. É ideal para fornecer feedback visual quando
os visitantes interagem com elementos:

165
 Efeito quando o mouse está em cima do botão

Neste exemplo, quando o cursor do mouse passa sobre o elemento

ele fica mais escuro e o seu texto maior. Também utilizamos a
propriedade “transition” em 0.5 segundos para um efeito suave de
transição. Teste com e sem o “transition” para você ver a diferença.

Clicando em um elemento (:active)

A pseudo-classe “:active” é ativada quando um elemento é clicado,

criando uma resposta imediata. É ótimo para botões e links.

166
 Efeito quando o elemento é clicado

Elemento em foco (:focus)

A pseudo-classe “:focus” é aplicada a elementos que estão

ativamente recebendo foco, como campos de entrada. É útil para
realçar elementos interativos:

Efeito quando o elemento está focado

167
Selecionando elementos específicos (:nth-child(n))

A pseudo-classe “:nth-child(n)” permite selecionar elementos

específicos com base em sua posição em relação aos irmãos. É útil
para estilizar listas ou itens de forma diferente.

168
Primeiro e último elemento (:first-child e :last-child)

Essas pseudo-classes permitem selecionar o primeiro e o último

elemento entre seus irmãos:

169
170
 VARIÁVEIS

Variáveis CSS, também conhecidas como variáveis do tipo custom

property, são recursos que permitem armazenar valores para
reutilização em todo o seu código CSS. As variáveis CSS permitem
que você defina um valor uma vez e, em seguida, utilize essa
variável em várias partes do seu estilo, facilitando a manutenção e
personalização do design do seu site.

Definindo variáveis

As variáveis CSS são declaradas utilizando a notação “--nome-da-

variavel” seguida pelo valor desejado. Veja um exemplo:

Aqui, declaramos duas variáveis: “--cor-primaria” com o valor

“#3498db” e “--tamanho-fonte” com o valor “25px”. A declaração é
feita dentro do seletor “:root”, que representa o elemento raiz
(normalmente a tag <html>) e garante que as variáveis sejam
globais e aplicáveis a todo o documento.

Utilizando variáveis

Depois de definir uma variável, você pode usá-la em qualquer parte

do seu código, substituindo o valor original:

171
Benefícios das variáveis

Facilidade de manutenção: Se você quiser alterar a cor primária,

basta atualizar o valor da variável, e todas as referências serão
atualizadas automaticamente.

Reutilização de código: Você pode usar as mesmas variáveis em

diferentes partes do seu site, garantindo consistência.

Customização rápida: As variáveis permitem que você experimente

rapidamente com diferentes valores sem precisar alterar todos os
lugares individualmente.

172
 RESPONSIVIDADE
A responsividade é a prática de criar layouts que se ajustam de
forma inteligente a diferentes tamanhos de tela e dispositivos. Isso
garante que o conteúdo seja legível e usável em uma ampla
variedade de dispositivos, desde desktops até smartphones.

Por que a responsividade é importante?

Nos dias de hoje, a grande maioria dos acessos a websites ocorre

por meio de dispositivos móveis, tornando a responsividade uma
característica crucial. É fundamental que seu site se adapte a
diferentes tamanhos de tela, incluindo não apenas notebooks e
PCs, mas também smartphones e tablets.

Usando media queries

As media queries são uma técnica fundamental no design

responsivo. Elas permitem aplicar estilos diferentes com base nas
características do dispositivo, como largura de tela, altura e
orientação. Assim você pode dar comandos de estilos diferentes
conforme o tipo de dispositivo que a pessoa está visualizando o site.

A sintaxe básica de uma media query envolve o uso da regra

“@media”, seguida de uma condição que especifica as
características do dispositivo em que você deseja aplicar as regras
de estilo.

Existem variações dessa condição, mas aqui vamos utilizar apenas o

“max-width: largura” onde a largura será o tamanho em pixels a
partir do qual o estilo será aplicado. No exemplo abaixo todo o estilo
que estiver dentro da media query será aplicado se o usuário estiver
visualizando o site em uma tela menor do que 768 pixels:

173
Se o usuário estiver acessando o site através de um dispositivo
maior que 768 pixels, o parágrafo terá o tamanho da fonte de 20px,
mas se o usuário acessar o site em um dispositivo com o tamanho
da tela igual ou menor que 768 pixels, então o parágrafo terá o
tamanho da fonte definido em 16px.

Breakpoints

Os breakpoints, ou pontos de quebra, referem-se aos pontos

específicos em que o design do website é ajustado para se adaptar
às diferentes dimensões das telas dos dispositivos. São os pontos
em que o layout ou os estilos da página são alterados para
proporcionar uma experiência de usuário otimizada em dispositivos
com diferentes tamanhos de tela.

Não há uma convenção em relação a quais valores de breakpoints

devemos ter em nossos projetos, mas vamos apresentar para você
as principais medidas de dispositivos recomendadas:

Smartphones Tablets e smartphones

Notebooks e tablets em Desktops e telas maiores
em modo retrato modo retrato

174
Smartphones:

max-width: 480px

Tablets e iPads

max-width: 768px

Notebooks e telas pequenas

max-width: 1024px

Desktops, telas grandes e telas muito grandes

Aqui colocamos o código normalmente, sem precisar definir uma

media query. Em telas muito grandes geralmente não adaptamos o
layout, apenas limitamos o conteúdo no centro com “max-width”
para que ele fique centralizado com um tamanho fixo.

Tela do dispositivo

Tamanho máximo do
conteúdo do site

Seguindo esses breakpoints o seu código CSS seguiria essa

estrutura:

175
Vale lembrar que você não precisa reescrever todo o estilo em cada
media query, você só deve alterar os pontos que devem sofrer
alterações para se encaixar no tamanho de tela específico.

E como testar os diferentes tamanhos de tela para saber o que

eu devo mudar?

Você pode usar a extensão do Chrome Window Resizer: Clique aqui

Depois de instalada, basta ir em “extensões” e clicar sobre ela. Você

também pode fixá-la na barra do navegador clicando no alfinete:

176
Então você abre ela como uma janela, a página que você está
acessando será aberta em uma nova aba, assim como a extensão:

Você já tem algumas opções de dispositivos disponíveis para testar

a página, basta clicar sobre o dispositivo desejado para
redimensionar a tela:

177
Clique neste ícone para as medidas aparecerem no canto da tela:

Você também pode redimensionar a tela clicando e arrastando o

canto da janela, as dimensões irão aparecer no canto direito:

Dimensões

Note que o “viewport” é o valor que importa para nós. É com base
nele que os breaking points funcionam:

178
 Quando a largura do viewport
fica menor que 480px, o estilo
do parágrafo muda conforme a
media query

Se possível também teste seu design em dispositivos e

navegadores diferentes para ter certeza que o site está funcionando
perfeitamente.

Unidades de medida flexíveis

Ao criar designs responsivos, é importante usar unidades de

medida flexíveis, como porcentagens, em vez de unidades fixas
como pixels.

179
Dessa forma os elementos se adaptam a diferente dispositivos sem
quebrar o layout.

Mas não se preocupe se o design responsivo parece algo complexo

neste momento; você ainda está se habituando com o CSS.
Portanto, concentre-se agora em aprender o essencial. Conforme
você pegar o jeito, aprofunde-se mais nas práticas do design
responsivo, pois é um assunto muito importante no
desenvolvimento de sites e qualquer tipo de sistema.

180
 COMPATIBILIDADE COM NAVEGADORES

Nem todos os navegadores interpretam as regras CSS da mesma

maneira. Isso pode levar a diferenças na exibição do seu site em
plataformas diferentes. A compatibilidade entre navegadores é
uma preocupação fundamental no desenvolvimento web, pois os
usuários acessam sites de diferentes dispositivos e programas.

Estratégias para lidar com a compatibilidade

Teste em diferentes navegadores e dispositivos:

Antes de lançar seu site, é importante testá-lo em uma variedade

de navegadores populares, como Google Chrome, Mozilla Firefox,
Microsoft Edge, Safari e outros. Além disso, verifique como ele se
comporta em diferentes dispositivos, incluindo smartphones e
tablets.

Você pode testar com diferentes navegadores do seu próprio

computador ou usar ferramentas de teste online. Esse teste de
navegador é chamado de “Cross-browser”. Há diversas ferramentas
de teste pagas, mas geralmente elas oferecem alguns testes grátis
onde você pode conferir o seu site em diferentes navegadores e
dispositivos, a mais famosa ferramenta é a browserstack.com.

Reset CSS:

Dar o “reset” no CSS ajuda a normalizar o comportamento padrão

de diferentes elementos HTML em todos os navegadores. Isso reduz
as inconsistências de estilo entre navegadores.

Prefixos de fornecedores

Em ocasiões raras, você pode se deparar com propriedades CSS que

não funcionam como esperado, ou até mesmo não funcionam de
maneira alguma. Isso pode ocorrer quando um navegador é mais
antigo e não oferece suporte total a determinadas propriedades.
Quando confrontado com esse cenário, a solução pode envolver o
uso de prefixos de fornecedores (ou de vendedor).

181
Houve uma época em que a propriedade “border-radius” era um
exemplo clássico de algo que precisava de diferentes prefixos para
funcionar corretamente:

No entanto, com as atualizações dos últimos anos, essa prática

deixou de ser necessária. Geralmente, os prefixos de fornecedores
são relevantes apenas para navegadores mais antigos ou para novas
propriedades CSS que estão sendo introduzidas recentemente.

Fim do módulo

Aqui finalizamos o módulo sobre CSS. Agora você está preparado

para partir aos projetos práticos que foram disponibilizados nos
arquivos exclusivos para os alunos do Ebook no Notion.

Estaremos sempre adicionando novos projetos regularmente,

oferecendo oportunidades para que você aprimore suas
habilidades. No entanto, não se restrinja apenas aos projetos
fornecidos. Sinta-se à vontade para praticar desenvolvendo
qualquer outro layout que desperte seu interesse. O fundamental é
que você se mantenha engajado em aplicar tudo o que absorveu,
conforme mencionamos no início deste Ebook.

182
 JAVASCRIPT - INTRODUÇÃO
Depois de criar os elementos e deixá-los visualmente bonitos,
chegou a hora de acrescentarmos um pouco de inteligência a
nossas páginas. Com o JavaScript, vamos poder fazer com que
esses elementos interajam dinamicamente com os usuários e
respondam às suas ações.

Aqui vamos poder abrir janelas, validar formulários, criar botões

com as mais diversas funcionalidades, mudar informações, cores,
imagens e etc. Tudo isso sem precisar recarregar a página.

O que é JavaScript?

O JavaScript é uma linguagem de programação de alto nível (agora

sim é uma linguagem de programação!), criada especificamente
para a web. Ele atua diretamente nos navegadores dos usuários,
permitindo que você crie comportamentos interativos nas suas
páginas. Seja para desenvolver uma calculadora online, uma galeria
de imagens que muda ao passar o mouse ou até mesmo para criar
uma validação de formulário em tempo real, o JavaScript é a
ferramenta que torna tudo isso possível.

183
 SINTAXE

Assim como as outras linguagens, o javaScript também tem sua

sintaxe. Ou seja, a maneira como deve ser escrito para que o
navegador entenda exatamente o que você deseja que ele faça. Ao
longo desse capítulo nós vamos explorar a sintaxe de cada
funcionalidade do JavaScript, aqui vamos te apresentar aos
conceitos iniciais:

Ponto e vírgula - Separando instruções

O ponto e vírgula (;) em JavaScript é usado para separar instruções.

Embora isso não seja obrigatório, é uma boa prática adicionar ponto
e vírgula no final de cada linha para evitar erros. Por exemplo:

Indentação - Organizando seu código

Embora a indentação não seja obrigatória em JavaScript, é uma

prática recomendada para tornar seu código mais legível.
Indentação refere-se à recuo das linhas de código dentro de blocos.
Isso ajuda a entender a estrutura do código, especialmente quando
há vários níveis de blocos aninhados. Aqui também podemos usar o
atalho “Alt + Shift + F” para o VS Code organizar o nosso código:

184
Comentários - Explicando seu código

Comentários são trechos de texto que são ignorados pelo

navegador, mas ajudam você e outros desenvolvedores a entender

o que o código está fazendo, o que é muito importante para

melhorias e manutenções no código. Existem dois tipos de

comentários em JavaScript:

Case sensitive

Case sensitive significa que a diferença entre letras maiúsculas e

minúsculas é considerada ao interpretar palavras ou identificadores.

Em JavaScript, isso significa que "Nome" e "nome" são tratados

como coisas diferentes:

Note que "Nome" e "nome" são tratados como duas variáveis

diferentes no código JavaScript devido à sensibilidade a maiúsculas

e minúsculas.

185
 PRIMEIROS PASSOS COM JAVASCRIPT

Chegou a hora de colocar a mão na massa e escrever suas primeiras

linhas de código em Javascript. Mas antes você precisa aprender a
preparar seu documento para receber esse código e executar da
maneira certa.

Incorporando JavaScript na sua página

Para adicionar JavaScript a uma página, utilize a tag “<script>”. Essa

tag pode ser inserida no “<head>” ou no final do “<body>”. Tudo que
você escrever entre as tags “<script>” será lido como código
Javascript:

Incluindo um arquivo JavaScript externo

Além de incorporar o código JavaScript diretamente na página,

você também pode criar um arquivo JavaScript separado, o que é
ideal na maioria das vezes.

Mas antes de incluirmos um arquivo Javascript externo, primeiro

precisamos criar esse arquivo. Então no menu de arquivos do seu
VS Code, crie um arquivo chamado meu-script.js (pode ser outro
nome se quiser, mas sempre coloque “.js” no final) da mesma forma
como criamos o arquivo “.html” e “.css” nos módulos passados.

186
Agora vamos incluí-lo usando o atributo “src” da tag “<script>”. Essa
é a maneira mais recomendada de usar códigos Javascript, pois
ajuda a manter seu código organizado e facilita a reutilização em
várias páginas.

Nome do seu arquivo js

Criando seu primeiro alert

O “alert()” é uma das formas mais simples de interagir com os

usuários. Ele exibe um pop-up na tela com uma mensagem.

Agora, vamos combinar o código do “alert()” com o arquivo HTML.

Deixe seu arquivo HTML como no exemplo acima e então escreva o
seguinte comando em seu arquivo JS:

Abra o arquivo “index.html”, ao carregar o “alert()” será executado e

você verá o pop-up com a mensagem. Se a mensagem aparecer,
significa que seu arquivo “.js” foi incluído com sucesso. Caso não
apareça, revise se você escreveu o nome correto do seu arquivo Js
no “src” da tag “<script>”.

187
Console.log()

Além do “alert()”, você também pode usar o “console.log()” para

exibir mensagens. No entanto, as mensagens não aparecerão em
um pop-up na tela. Elas serão exibidas no console do navegador,
uma ferramenta útil para verificar e depurar (corrigir bugs) no seu
código.:

Como abrir o console do navegador

1. Abra o “index.html” em seu navegador (Chrome, Firefox, Edge,

etc.).

2. Clique com o botão direito em qualquer parte da página e

selecione “Inspecionar” no menu de contexto.

3. Na janela de inspeção que se abre, clique na aba “Console”.

4. Você verá o console do navegador, onde poderá visualizar as

mensagens impressas pelo “console.log()”.

O “console.log()” é muito útil para corrigir bugs e entender como

seu código está funcionando sem interromper a experiência visual
do usuário. Use e abuse dele ao longo do desenvolvimento do seu
código.

188
 VARIÁVEIS E CONSTANTES
Imagine as variáveis como caixas que você usa para guardar
informações. Em vez de repetir o mesmo valor várias vezes, você
pode armazená-lo em uma variável e usá-la sempre que necessário.

Declarando variáveis

Para criar uma variável em JavaScript, utilizamos a palavra-chave

“var”, seguida pelo nome da variável. Também é possível atribuir um
valor a essa variável usando o sinal de igual (=). Veja um exemplo:

Neste exemplo, "idade" é o nome da variável, e "25" é o valor que

estamos atribuindo a ela.

Outra forma de declararmos variáveis é utilizando a palavra-chave

“let”. Ela funciona da mesma forma que o “var” porém com algumas
diferenças:

189
Diferenças de “var” e “let”

var: Tem escopo de função. Isso significa que uma variável

declarada com var é acessível dentro da função onde foi declarada,
ou, se não estiver dentro de uma função, ela terá um escopo global
(pode ser acessada em qualquer parte do documento).

let: Tem escopo de bloco. Isso significa que uma variável declarada
com “let” é acessível apenas dentro do bloco onde foi declarada,
seja esse bloco uma função, um loop ou qualquer outro bloco
delimitado por chaves “{}”:

“const”

A palavra-chave “const” é usada para declarar constantes. Assim

como let, as constantes também têm escopo de bloco, o que
significa que elas são válidas apenas dentro do bloco onde foram
declaradas. A característica fundamental das constantes é que, uma
vez que você atribui um valor a elas, esse valor não pode ser
alterado:

190
Reatribuição de valores

Você pode atribuir novos valores a variáveis a qualquer momento:

Declarações múltiplas

Você também pode declarar várias variáveis em uma única linha,

separando-as por vírgula. Isso pode tornar o código mais compacto:

Tipos de dados

No JavaScript, você tem à disposição uma variedade de tipos de

dados que podem ser armazenados em variáveis. Confira alguns
exemplos comuns abaixo:

Números inteiros: Utilize a variável para armazenar números

inteiros, que devem ser escritos sem aspas:

191
Números de ponto flutuante (com casas decimais): Para números
com casas decimais (use pontos no lugar da virgula), a variável pode
conter valores como:

Textos (strings): As variáveis também podem armazenar

sequências de caracteres dentro de aspas, chamadas de strings. Por
exemplo:

Booleanos: Uma variável booleana armazena valores verdadeiros

(true) ou falsos (false):

Null e Undefined: Variáveis também podem ter valores especiais,

como “null” (nulo) e “undefined” (indefinido):

192
Esses são apenas alguns dos tipos de dados que podem ser
armazenados em variáveis, mais adiante você vai conhecer e
entender novos tipos de dados que podem ser armazenados em
variáveis, como funções, arrays e objetos.

Nomeando variáveis

Ao nomear variáveis, siga algumas regras simples: use letras e

números, mas não comece com um número. É recomendado usar
nomes descritivos para suas variáveis para que o seu código seja
legível tanto para você quanto para outros desenvolvedores.
Comece com uma letra ou sublinhado e use camelCase (com letra
maiúscula em cada palavra composta) para nomes compostos:

193
 OPERADORES
Os operadores são ferramentas que usamos para realizar operações
com valores. Operadores permitem que você realize cálculos
matemáticos, junte textos, compare valores e muito mais.

Operadores aritméticos

Os operadores aritméticos são usados para realizar cálculos

matemáticos em JavaScript. Alguns exemplos incluem:

+ (adição): Soma dois valores.

- (subtração): Subtrai um valor do outro.

* (multiplicação): Multiplica dois valores.

/ (divisão): Divide um valor pelo outro.

% (módulo): Retorna o resto da divisão entre dois valores.

Operadores de comparação

Os operadores de comparação são usados para comparar dois

valores e retornam um valor booleano (verdadeiro ou falso). Alguns
exemplos incluem:

== (igual): Verifica se os valores são iguais.

!= (diferente): Verifica se os valores são diferentes.

> (maior que): Verifica se o valor à esquerda é maior que o valor à

direita.

< (menor que): Verifica se o valor à esquerda é menor que o valor à

direita.

>= (maior ou igual): Verifica se o valor à esquerda é maior ou igual

ao valor à direita.

<= (menor ou igual): Verifica se o valor à esquerda é menor ou igual

ao valor à direita.

194
Os operadores de comparação são muito usados nas condições,
que veremos no próximo capítulo.

Operadores lógicos

Os operadores lógicos são usados para combinar comparações e

retornam um valor booleano como resultado. Alguns exemplos
incluem:

&& (E lógico): Retorna verdadeiro se ambos os valores forem

verdadeiros.

|| (OU lógico): Retorna verdadeiro se pelo menos um dos valores for

verdadeiro.

! (NÃO lógico): Inverte o valor booleano. Se o valor original for “true”,

o operador “!” transforma em “false”. Se o valor original for “false”, o
operador “!” transforma em “true”.

195
Os operadores lógicos, assim como os de comparação, são muito
usados nas condições que veremos logo mais.

Operadores de concatenação

O operador “+” também é usado para concatenar (juntar) textos em

JavaScript:

196
 DOM
O que é o DOM?

O DOM (Document Object Model) é uma representação da

estrutura de um documento HTML ou XML. Ele cria uma árvore de
objetos onde cada elemento, atributo e conteúdo é representado
por um objeto. Isso permite que você acesse e manipule elementos
e conteúdos diretamente do seu código JavaScript.

Document

HTML

Head Body

Title Text H1 H2

Como o DOM funciona?

Quando o navegador carrega uma página da web, ele cria uma

representação do documento usando o DOM. Cada elemento HTML
é um nó na árvore do DOM, com elementos pai, filhos e irmãos. Isso
permite que você navegue pela estrutura e altere seu conteúdo,
estilos e até mesmo eventos.
De maneira mais simplificada, o DOM é a sua página e os
elementos que tem nela, e “manipular o DOM” é manipular sua
página e os elementos que tem nela.
Você pode usar JavaScript para acessar e manipular o DOM de
várias maneiras.

197
Acessando elementos do DOM

Para poder manipular os elementos da página (como fazer ele

desaparecer, mudar de cor, tamanho etc.), Precisamos primeiro
“capturar” esse elemento, para que o Javascript saiba a qual
elemento estamos nos referindo. Então agora vamos aprender a
selecionar os elementos da sua página.

Através de IDs

Cada elemento HTML pode ser atribuído a um ID único. Use

“document.getElementById(“nomeDoID”)” para selecionar um
elemento pelo seu ID.

Através de classes

Selecione elementos por classe usando

“document.getElementsByClassName(“nomeDaClass”)”. Lembre-se
de que isso retornará uma coleção com todos os itens daquela
classe, então você precisará especificar o índice do elemento
desejado:

Neste exemplo estamos selecionando o primeiro elemento (índice

“0”) com a classe “minhaClasse”. Os índices são como a posição do
elemento, eles começam em 0, o que significa que o primeiro
elemento tem índice 0, o segundo índice 1 e assim por diante.

198
Através de tags

Para selecionar elementos por suas tags HTML, use

“document.getElementsByTagName()”. Assim como com as classes,
isso retornará uma coleção:

Para selecionar um elemento específico teríamos de usar o índice

do mesmo:

Através de seletor CSS

Você pode usar seletores CSS para selecionar elementos com mais
precisão. Ou seja, pode selecioná-los da mesma forma como faz no
CSS, usando “#” e “.” ou “tag”.

document.querySelector(): Seleciona apenas o primeiro elemento

encontrado.

document.querySelectorAll(): Seleciona todos os elementos

encontrados.

Através de nome

Para elementos como inputs, selects e textareas, você pode acessá-

los por nome usando “document.getElementsByName(“nome”)”:

199
Alterando conteúdo do DOM:

Agora que aprendemos a capturar os elementos da página, vamos

aprender a manipular esses elementos usando Javascript.

Alterando texto

Para alterar o texto de um elemento, você pode acessar a

propriedade “textContent” ou “innerText”:

Alterando HTML interno

Use a propriedade “innerHTML” para modificar o conteúdo HTML

interno de um elemento:

Alterando atributos

Para alterar atributos de elementos, como “src” de uma imagem ou

“href” de um link, use “setAttribute()”:

200
Criando novos elementos

Você pode criar novos elementos usando

“document.createElement()” e, em seguida, adicioná-los ao DOM,
dentro de outro elemento, com “appendChild()”:

Neste exemplo criamos um parágrafo e adicionamos ele dentro do

elemento com ID “container”.

Removendo elementos

Para remover elementos do DOM, utilize “removeChild()”:

Adicionando e removendo classes

Para adicionar ou remover classes em elementos, utilize as

propriedades “classList.add()” e “classList.remove()”:

201
Alternando classes

Você pode alternar classes usando “classList.toggle()”, útil para

aplicar alternâncias de estilo:

Neste exemplo, quando o botão é clicado, a classe “.classeAtiva” é

alternada. Se a classe estiver presente, ela será removida; se não
estiver presente, será adicionada. Isso alterará o estilo do botão de
acordo com a presença ou ausência da classe.

202
 EVENTOS DOM
Eventos são ações que acontecem em um elemento HTML, como
um clique de mouse, pressionamento de tecla, movimento do
mouse, envio de um formulário e muito mais. Eles são a forma de
interagir com os visitantes da sua página e desencadear ações em
resposta.
Adicionando um evento a um elemento:

Para adicionar um evento a um elemento HTML, você usa o método

“addEventListener”. Isso diz ao navegador para ficar atento a um
evento específico em um elemento, e executar uma função quando
o evento ocorrer:

Evento
O que acontece

quando o vento

é disparado

Tipos comuns de eventos:

click: Acionado quando um elemento é clicado.

mouseenter: Disparado quando o mouse entra em um elemento.

mouseleave: Disparado quando o mouse sai de um elemento.

keydown: Ocorre quando uma tecla é pressionada.

keyup: Ocorre quando uma tecla é solta.

submit: Disparado quando um formulário é enviado.

Suponha que você queira criar uma funcionalidade em que, ao
digitar em um campo de entrada, o texto digitado seja exibido em
tempo real em algum outro elemento na página, como um
parágrafo.
Para fazer isso podemos usar o evento “keyup”:

203
Neste exemplo, o evento “keyup” é adicionado ao campo de
entrada. Cada vez que uma tecla é liberada após ser pressionada, o
evento é acionado. O valor do campo de entrada é lido usando
“event.target.value” e é exibido no elemento “<p>” com o ID
“resultado”.

A medida que você digita no campo de entrada, o conteúdo do

parágrafo resultado será atualizado em tempo real com o texto
digitado.

204
 CONDIÇÕES

Condições permitem que você instrua seu código a executar

diferentes ações com base em uma avaliação verdadeira ou falsa. É
como se você estivesse dando ao seu programa um conjunto de
instruções: “Se algo for verdadeiro, faça isso; senão, faça aquilo.”

Usando a declaração “if”:

A declaração “if” é a base das condições. A tradução de “if” é “se”,

então estamos falando literalmente “se isso for verdade, então faça
isso:”. Você verifica se uma condição é verdadeira e, se for, o bloco de
código dentro do “if” é executado. Caso contrário, ele é
simplesmente ignorado.

A sintaxe de uma declaração “if” é a seguinte:

Adicionando “else if” e “else”:

Você pode adicionar mais cenários usando “else if” e “else”. Isso
permite que você especifique ações diferentes para diferentes
condições.

205
Você pode fazer desta forma apenas com “if” e “else”:

Ou adicionando mais condições com “else if”:

Note que você pode ter quantos “else if” quiser para abranger várias
condições. O uso do “else” é opcional, você pode ter várias
condições e caso nenhuma seja verdadeira nada acontece:

206
Operadores de comparação e lógicos

Você pode usar os operadores que você aprendeu anteriormente,

como “>”, “<”, “>=”, “<=”, “==” e “!=” para comparar valores e criar
condições mais complexas.

Também podemos utilizar os operadores lógicos como “&&”, “||” e “!”:

Condições aninhadas:

Você também pode aninhar condições dentro de outras condições,

criando lógicas mais elaboradas:

207
208
 LOOPS

O que são loops?

Loops são estruturas de controle que permitem que você execute

um bloco de código repetidamente enquanto uma condição for
verdadeira. Isso é ideal para tarefas que precisam ser realizadas
várias vezes, como processar listas de itens ou repetir ações.

Loop “for”

O loop “for” é uma maneira comum e eficaz de repetir um bloco de

código um número específico de vezes. Ele consiste em três partes:
inicialização, condição e incremento.

Inicialização: é onde você define a variável de controle e seu valor

inicial.

Condição: é a expressão que é avaliada antes de cada iteração do

loop. Enquanto essa condição for verdadeira, o loop continuará a ser
executado. Quando a condição se tornar falsa, o loop será
interrompido.

Incremento/decremento: é uma operação que modifica a variável

de controle a cada iteração (cada vez que o código dentro do loop
for executado), geralmente para avançar ou retroceder no loop:

209
Nesse exemplo, o código dentro do loop vai se repetir enquanto “i”
for menor que 5. Dentro do código nós incrementamos o valor de “i”
cada vez que o loop acontece, então chega um momento que “i” é
maior que 5, e então o loop para de se repetir.

Loop “while”

O loop “while” executa um bloco de código enquanto uma

condição for verdadeira. Ele é útil quando você não sabe quantas
vezes o loop precisa ser executado.

Um loop "while" simples que imprime os números de 1 a 5:

Nesse exemplo, o código dentro do loop vai se repetir enquanto “i”

for menor que 5. Dentro do código nós incrementamos o valor de “i”
cada vez que o loop acontece, então chega um momento que “i” é
maior que 5, e então o loop para de se repetir.

Loop “do...while”

O loop “do...while” é semelhante ao “while”, mas garante que o

bloco de código seja executado pelo menos uma vez, mesmo que a
condição inicial seja falsa. Ele valida a condição apenas depois que o
código já foi executado.

210
Implementando o “do...while” em um jogo simples de adivinhação:

Break

O “break” é usado para interromper imediatamente a execução de

um loop. Aqui está um exemplo de um loop “for” que utiliza “break”
para interromper o loop quando encontra um número maior que 5:

Continue

O “continue” é usado para pular uma iteração específica do loop e

continuar com a próxima iteração. Aqui está um exemplo de um
loop “for” que utiliza “continue” para pular a iteração quando o
número é par:

211
212
 FUNÇÕES

Funções são conjuntos de instruções que você pode chamar

sempre que precisar realizar uma tarefa específica. Usar funções
ajuda a evitar repetições de código e facilita a manutenção.

Declarando funções:

Para criar uma função em JavaScript, você deve declará-la com a

palavra-chave “function”, seguida pelo nome da função e um
conjunto de parênteses. O bloco de código que contém as
instruções da função é chamado de corpo da função:

nomeDaFuncao: Substitua isso pelo nome que você deseja dar à

sua função.

parametro1, parametro2, ...: São os parâmetros (variáveis que

podem ser enviadas quando chamar a função e que podemos
utilizar dentro dela) que a função pode aceitar. Os parâmetros são
opcionais, você pode ter nenhum, um ou mais parâmetros
separados por vírgulas.

// Código a ser executado: Aqui você coloca o código que será

executado quando a função for chamada.

return valorDeRetorno;: Isso é opcional. Se você quiser que a

função retorne um valor, use a palavra-chave “return” seguida pelo
valor que você deseja retornar.

213
Neste exemplo, a função “somar” aceita dois parâmetros, “a” e “b”, e
retorna a soma deles. Quando chamamos a função com os valores 5
e 3, ela retorna 8, que é então impresso no console:

Neste outro exemplo a função apenas mostra um alerta na tela.

Chamando funções:

Depois de criar uma função, você pode chamá-la (ou executá-la) em

qualquer lugar do seu código, fornecendo os argumentos
necessários caso seja preciso:

214
Funções anônimas

Uma função anônima é uma função que não tem um nome

associado a ela. Elas são frequentemente usadas como argumentos
para outras funções. No entanto, você ainda pode atribuir uma
função anônima a uma variável para reutilizar depois:

215
 OBJETOS

Em JavaScript, objetos são estruturas fundamentais que permitem

armazenar e organizar dados de forma mais complexa e
estruturada. Um objeto é uma coleção de propriedades, onde cada
propriedade é uma associação de chave (nome) e valor.

imagine um objeto como uma caixa que pode conter informações

variadas sobre algo. Pense em um carro: ele tem propriedades
como cor, modelo e ano, além de ações como ligar e desligar. Em
JavaScript, objetos são como essas caixas que podem conter tanto
dados quanto funcionalidades. Os valores podem ser qualquer tipo
de dado, incluindo números, strings, outros objetos, funções e até
mesmo arrays.

Criando objetos:

Existem diversas maneiras de criar objetos em JavaScript, sendo as

mais comuns a utilização da notação de objeto literal e a criação por
meio de construtores de objetos.

Para criar objetos utilizando notação de objeto literal usamos a

notação de chaves “{}”. Dentro dessas chaves, você pode definir
propriedades e seus valores associados, separados por vírgulas:

Acessando propriedades e métodos:

Você pode acessar as propriedades e métodos de um objeto

usando a notação de ponto “.”:

216
Além de armazenar dados, objetos podem conter funções,
conhecidas como métodos. Os métodos permitem que você defina
comportamentos associados ao objeto:

Adicionando propriedades e métodos a objetos:

Além das propriedades e métodos já definidos ao criar um objeto, o

JavaScript permite adicionar novas propriedades e métodos a
objetos existentes. Isso é útil para estender a funcionalidade de um
objeto ou ajustá-lo dinamicamente de acordo com as necessidades
do programa.

Para adicionar uma nova propriedade a um objeto, você pode

simplesmente usar a notação de ponto ou colchetes para atribuir
um valor a uma chave ainda não existente:

217
Da mesma forma, é possível adicionar métodos a objetos existentes:

Objetos e this:

O “this” é uma referência especial em JavaScript que se refere ao

objeto atual, ao contexto no qual o código está sendo executado.
Ele é particularmente útil ao trabalhar com objetos, pois permite
acessar propriedades e métodos dentro do objeto sem precisar se
referir ao próprio nome do objeto:

218
 ARRAYS

Um array é uma estrutura de dados que permite agrupar vários

valores em uma única variável. Imagine que você tem uma lista de
números ou palavras que deseja manter organizada. Um array é
como uma prateleira com espaços numerados, onde cada espaço
pode conter um valor.

Criando arrays:

Você pode criar um array colocando os elementos entre colchetes “[

]” e separando-os com vírgulas. Por exemplo, um array de números
inteiros ficaria assim:

Acessando elementos:

Cada elemento no array tem uma posição, começando de 0. Isso é

chamado de “índice”. Se você quiser pegar o primeiro número do
array acima (que é 1), você usaria o índice “0”:

Alterando elementos:

Você pode mudar um elemento do array simplesmente atribuindo

um novo valor a ele usando o índice:

219
Tamanho do array:

Se você quiser saber quantos elementos tem em um array, pode

usar a propriedade “length”:

Adicionando elementos:

Você pode adicionar um novo elemento ao final do array usando o

método “push()”:

Removendo elementos:

Você pode remover o último elemento do array usando o método

“pop()”:

Percorrendo um array:

Para passar por todos os elementos de um array, você pode usar um

loop “for”:

220
Isso imprimirá cada número no array “números”.

Métodos de array:

Os arrays possuem uma variedade de métodos úteis para

manipulação além dos que já citamos. Alguns exemplos incluem
“shift()”, “unshift()” e “splice()”:

Arrays multidimensionais:

Arrays podem conter outros arrays, formando uma estrutura

chamada array multidimensional. É como ter caixas dentro de
caixas. Por exemplo:

221
Você pode acessar elementos dentro de arrays multidimensionais
assim:

Fim do módulo

Chegamos ao fim do módulo de JavaScript. Os conceitos que você

absorveu podem parecer um pouco mais desafiadores e complexos
em comparação com o HTML e o CSS. É por isso que se torna
fundamental que você se envolva em projetos práticos para ver na
prática esses conceitos. Para ajudar nesse processo,
disponibilizamos projetos específicos de JavaScript no Notion,
exclusivamente para os alunos do Ebook.

Lembre-se de que estamos sempre adicionando novos projetos

para que você possa praticar ainda mais. No entanto, não se
restrinja apenas aos desafios que oferecemos. Se tiver ideias
criativas para projetos, não hesite em colocá-las em prática. O mais
importante é aplicar o que você aprendeu desde o início do Ebook.

222
 CHEGAMOS AO FIM

Se você chegou até aqui, parabéns! Agora você tem em suas mãos
os principais conceitos para desenvolver qualquer layout web que
quiser. Ainda há muitas outras coisas que você pode explorar no
mundo do desenvolvimento front-end. Assim como em qualquer
outra área da programação, novas funcionalidades estão sempre
surgindo, e a evolução contínua depende da busca constante por
conhecimento.

E como falamos lá no início, a prática vai ser sua maior aliada nessa
jornada, por isso os projetos práticos são essenciais para o seu
aprendizado. Nesses projetos nós vamos te mostrar na prática
muitos dos conceitos que apresentamos, especialmente aqueles
que podem não ter ficado tão claros sem a experiência prática
(como a parte relacionada ao JavaScript). Como falado, nossos
projetos ficarão hospedados no arquivo do Notion exclusivo para os
alunos do eBook, estaremos sempre tentando trazer novidades
para aprimorar suas habilidades.

Você provavelmente ainda tem algumas dúvidas ou vai se deparar

com elas ao longo do caminho, e isso é ótimo, significa que você
está tentando colocar o que aprendeu em prática. Por isso temos
um canal exclusivo para os nossos alunos no Discord, onde você
pode tirar as dúvidas que tiver sobre os conceitos que
apresentamos aqui e os projetos que irá desenvolver.

Agora está em suas mãos. Nós lhe fornecemos as bases necessárias

para iniciar essa jornada. Chegou a hora de colocar a mão na massa
e fixar todo o conhecimento adquirido. Lembre-se, estamos aqui
para apoiá-lo a cada passo do caminho.

Mais uma vez, parabéns pelo seu progresso até aqui e pelo
comprometimento com seu crescimento como desenvolvedor
front-end. Que esse seja o inicio de uma trajetória incrível!

223