HTML CSS

DÊ UM START EM
SUA CARREIRA DEV.

A JORNADA COMPLETA PARA VOCÊ ENTRAR NA
CARREIRA DO FUTURO, SER DISPUTADO PELAS
EMPRESAS E GANHAR 5X MAIS.
ORIENTAÇÕES GERAIS
O CURSO
O curso está estruturado em módulos. Cada um deles irá te levar para um
próximo nível de conhecimento progressivamente.
Módulo A - HTML Básico

O HTML é utilizado para estruturar a página. Nesse módulo, vamos aprender um
pouco mais sobre essa linguagem e suas principais tags.
Módulo B - CSS Básico

Nesse módulo vamos ver uma introdução ao CSS e sua utilização mais básica,
desde a sua definição, passando por cores, fontes até dimensionamento e
posicionamento simples de elementos.
O CURSO
Módulo C - CSS Avançado
Nesse módulo vamos nos aprofundar um pouco mais em CSS. Vamos avançar no
posicionamento e ver conceitos responsividade e utilização de variáveis no CSS.
Módulo D - Publicando seu website

Esse é o módulo final. Aqui temos uma revisão de todo o conteúdo e um tutorial
básico para você publicar seu website.
Alguns vídeos estão em inglês. Porém não se preocupe, caso não domine
a língua. Você pode ativar as legendas clicando no ícone CC na barra de
ferramentas do vídeo. Caso tenha dúvidas, segue link explicativo sobre a ativação
das legendas: Como ativar as legendas
AS FERRAMENTAS
Para que você aproveite e aprenda muito durante o curso, selecionamos algumas
ferramentas(sem custo para você) que servirão para a visualização das aulas,
execução dos exercícios e entrega das atividades.
Essas são as ferramentas que irá utilizar:
GitHub: Ferramenta de versionamento

VS CODE: editor que vamos utilizar para editar os códigos.
Page Ruler: ferramenta para tirar medidas do site
Code Pen: editor online
MÓDULO A - HTML BÁSICO
AULA 1 - HTML
ASSISTA A AULA
INTRODUÇÃO
Vamos mergulhar no HTML (Linguagem Referência de Elementos/Tags HTML

de Marcação de Hipertexto). O HTML é
uma linguagem de marcação que fornece Referência do HTML 5
um modo estruturado de criar páginas
web. Ao usarmos as tags que o HTML nos
disponibiliza, podemos controlar como
quase tudo é apresentado no navegador do
usuário. É o navegador quem interpreta as
tags para apresentar o que o usuário final vê.
HTML E SUAS TAGS
O HTML é uma linguagem de marcação As tags são colocadas dentro de sinais de

interpretada pelo navegador. Ela usa menor que (<) e maior que (>). Perceba
tags ou elementos específicos para dizer que a tag de fechamento leva o caractere
ao navegador como as coisas devem ser /. Isto diz ao navegador que esta é a tag
apresentadas visualmente ao usuário. Vamos de fechamento correspondente. As tags
dar uma olhada em alguns conceitos por são quase sempre seguidas de tags de
trás de como essas tags funcionam antes de fechamento correspondentes.
vermos as tags em si.
<tag>conteúdo</tag>
Nem todas as tags desses exemplos são tags
HTML reais. Elas estão sendo usadas para As tags também podem ser aninhadas umas
explicar os conceitos. dentro das outras.
<div> Algumas tags têm fechamento próprio. Essas
<p>abacaxi</p> tags normalmente não envolvem algum
</div> conteúdo. A tag `<img>` é uma tag de
fechamento próprio bem comum. Como
você pode ver, ainda há uma / no final da tag.
<div> Observe também o uso dos atributos.
<p>queijo</p>
<p>pizza</p> 1. <img src=”caminho/para/arquivo/de/
<p>presunto</p> imagem.jpg” alt=”descrição da imagem” />
</div>
As tags usam o que chamamos de atributos

para adicionar funcionalidades ou descrever
comportamentos.
ESTRUTURA BÁSICA DE PÁGINAS HTML
ASSISTA A AULA
Nesta seção vamos dar uma olhada na 7. </body>

estrutura de um arquivo html. Vamos 8. </html>
discutir as tags básicas necessárias para ter
uma página bem formada para exibição na Vamos dar uma olhada em algumas dessas
internet. A partir de agora, vamos falar no tags/elementos.
contexto do HTML5.
• Doctype
1. <!DOCTYPE html>
2. <html> <!DOCTYPE html> informa ao navegador
3. <head> qual versão do HTML será usada neste
4. <title></title> documento. Neste caso, estamos declarando
5. </head> o HTML5. Doctype é especial no sentido
6. <body> de que ele não é considerado uma tag de
verdade, mas sim uma declaração.
O que você realmente precisa entender <title> das páginas. Também é aqui onde
sobre esta tag/declaração é que ela deve você insere coisas como <meta> e planilhas
estar presente, e deve estar especificamente de estilo. Falaremos mais sobre essas coisas
na primeira linha do seu arquivo HTML. mais para frente nesse curso. Observe que a
tag <title> possui uma tag de fechamento,
• html </title>, assim como a tag <html>. Acredito
que você esteja percebendo o padrão.
<html> é a tag que representa o elemento
raiz (elemento de nível superior) de um Leitura Recomendada
documento HTML, por isso ela também
é chamada de elemento raiz. Todos os • title
outros elementos devem ser descendentes
deste elemento. Dito isto, observe a tag de <title> é a tag que define o título do
fechamento </html> na última linha. documento, ele é exibido na barra de título
do navegador ou na aba da página. Ela
• head pode conter apenas texto, e todas as tags
colocadas aqui são ignoradas. Ela é seguida
<head> é a tag que contém informações da tag de fechamento </title>.
descritivas sobre a sua página, como o título
• body
<body> representa o conteúdo de um

documento HTML. Pode haver apenas um
elemento <body> em um documento HTML.
É aqui onde ficam as coisas que queremos
que as pessoas vejam. Vou parar de apontar
as tags de fechamento. Acho que você já
pegou a ideia.
Leitura adicional
Introdução ao HTML no MDN
O que há no head? no MDN
O elemento meta no MDN
Lista de códigos ISO 639-1 no Wikipedia

AULA 2 - HTML ELEMENTOS DE
BLOCO E EM LINHA
ASSISTA A AULA TRANSCRIÇÃO DO VÍDEO
Olá, a todos. Sejam bem-vindos à Kenzie

Academy. Meu nome é Davey Strus.
Leitura adicional
Aninhamos tranquilamente elementos uns
Elementos inline no MDN dentro dos outros, e até agora tudo certo.
Elementos em nível de bloco no MDN Desde que você feche suas tags
adequadamente, você pode colocar os
elementos uns dentro dos outros.
<p> O parágrafo é filho do body, e a citação é
Estou <em>muito</em> entediado! filha do parágrafo. Portanto qual a relação
</p> entre o body e cite? Ué, a cite é o neto do
body!
Ao fazer isso, o elemento externo é chamado
de pai do elemento interno, e o elemento Vamos mais fundo.
interno é o filho do elemento externo.
<html>
Ah, mas e se o filho tiver seus próprios filhos? <body>
<p>
<body> Vamos ler <cite>Carlos Drummond de
<p> Andrade!</cite>
Vamos ler <cite>Carlos Drummond de </p>
Andrade!</cite> </body>
</p> </html>
</body>
O parágrafo é filho do body, e a citação é descendentes. O elemento html é um
filha do parágrafo. Portanto qual a relação ancestral de todos os elementos da
entre o body e cite? Ué, a cite é o neto do página, e todos os outros elementos são
body! descendentes do elemento html Falaremos
mais sobre isso e sobre a estrutura de árvore
Vamos mais fundo. que isso cria mais para frente. Isso é tudo
que você precisa saber por enquanto.
<html>
<body> Então agora sabemos tudo sobre aninhar
<p> elementos uns dentro dos outros, e você
Vamos ler <cite>Carlos Drummond de provavelmente pode aninhar qualquer
Andrade!</cite> elemento dentro de outro, certo? Não! Há
</p> regras.
</body>
</html> Para determinar quais elementos podem
ser aninhados dentro de outro, primeiro
Termos como bisavô não são muito úteis temos que entender as diferenças entre
em termos de marcação. Neste ponto, elementos de nível de bloco e elementos em
os chamamos apenas de ancestrais e linha. O HTML 5 reclassificou os elementos
HTML usando um sistema muito mais Mas quais são as restrições de quais
complicado que, sinceramente, não é muito elementos podem ser aninhados dentro
útil no começo, e entender as antigas de outros elementos? Bom, como você
classificações de nível de bloco e em linha deve ter imaginado, você não pode colocar
são úteis, então vamos por este caminho um elemento de nível de bloco dentro de
para ajudar no aprendizado. um elemento em linha. Você pode colocar
um elemento em linha dentro de outro
A versão super curta é que os elementos elemento em linha. E você pode colocar
de nível de bloco começam uma nova um elemento de nível de bloco dentro
linha e preenchem toda a largura de seu de outro elemento de nível de bloco… às
container. Elementos em linha podem iniciar vezes. Há algumas exceções bem grandes.
e terminar no meio de uma linha. Na verdade, você não pode colocar
elementos de nível de bloco dentro de um
Exemplos de elementos de nível de bloco parágrafo ou dentro de títulos, h1 até h6.
que você já conhece incluem h1 até h6 Isso significa que ainda não falamos sobre
e os parágrafos. Os elementos em linha nenhum elemento que possa conter outros
que você já está familiarizado incluem em, elementos de nível de bloco.
strong, cite, i, b, e u.
Conheça o <div>. É uma abreviação de algum CSS em linha, e não há um elemento
divisão de conteúdo, e é um elemento semântico melhor que este.
sem significado semântico. Ele não tem
função a não ser servir de container para E é isso. Até a próxima, meu nome é Davey
outros elementos. É um elemento de nível Strus. Boooom desenvolvimento!
de bloco e pode conter qualquer outro
elemento que pertence ao corpo. Não é
muito útil até que você comece a mexer
com CSS, mas é bom saber que ele existe
para aquelas ocasiões onde você precisa de
um tipo de container e não há um elemento
mais apropriado. Ele é essencialmente o
elemento de nível de bloco genérico.
E como você deve estar imaginando, há

um equivalente em linha: <span>. Ele não
significa nada. É apenas um container em
linha genérico. Mas às vezes é disso que
você precisa, porque é necessário aplicar
AULA 3 - HTML LISTAS
ASSISTA A AULA
TRANSCRIÇÃO DO VÍDEO
Leitura adicional
Olá, pessoal. Sejam bem-vindos à Kenzie
Listas em HTML no w3schools Academy. Meu nome é Davey Strus.
Listas não ordenadas no MDN Estamos progredindo bem com o HTML,

mas nossas páginas ainda estão um pouco
Listas ordenadas no MDN tediosas, apenas com títulos e parágrafos,
e com algumas frases em negrito ou itálico.
Lista de itens no MDN Vamos agitar um pouco as coisas com listas.
Um pequeno agito, mas não deixa de ser um
Lista de itens no MDN agito.
Estamos interessados em dois tipos reorganizar a lista e ela ainda fará sentido. O
de listas: Listas não ordenadas e listas navegador não irá reorganizá-la para você de
ordenadas. Ambas são constituídas de maneira inesperada, mas ao decidir qual tipo
itens de lista. Há um terceiro tipo de lista de lista usar, a questão é: A ordem dos itens
em HTML chamado de lista de definições, é importante? Se sim, então você precisa de
mas ela não é constituída de itens de lista, uma lista ordenada. Vamos dar uma olhada
e geralmente não é tão parecida (nem tão na marcação.
comum) com as outras duas, então iremos
focar nas listas não ordenadas e ordenadas <h1>Filmes de 1978</h1>
por enquanto. Sinta-se à vontade para
seguir o link e ler mais sobre listas de <h2>Filmes de maior bilheteria (EUA)</h2>
definição quando quiser. <ol>
<li>Grease — Nos Tempos da Brilhantina</
Tanto as listas não ordenadas quanto as li>
listas ordenadas são constituídas de itens <li>Superman</li>
de lista, e a marcação é virtualmente <li>Clube dos Cafajestes</li>
idêntica. Então qual a diferença? Bem, está <li>Doido para Brigar... Louco para Amar</
no nome. Em uma lista não ordenada, a li>
ordem dos itens não importa. Você pode <li>O Diabo Disse Não</li>
</ol> específica.
<h2>Indicados para melhor filme</h2> Então como elas serão apresentadas no

<ul> navegador?
<li>Expresso da Meia-noite</li>
<li>O paraíso Pode Esperar</li> Bem, devo admitir que eu trapaceei um
<li>O Franco Atirador</li> pouquinho aqui. Eu usei alguns divs e
<li>Amargo Regresso</li> um pouco de CSS para fazer as listas
<li>Uma Mulher Descasada</li> aparecerem lado a lado. As suas aparecerão
</ul> uma embaixo da outra se você copiar o
HTML que eu acabei de mostrar. Isso facilita
À esquerda, há uma lista ordenada, na hora de encontrar as diferenças. Em
marcada com o elemento <ol> À direita, suma, a lista ordenada está numerada, e
há uma lista não ordenada, <ul>. Ambas a lista não ordenada está em tópicos. Faz
são constituídas de itens de lista, marcadas sentido, certo? Já que a ordem faz diferença
com <li>. a lista da esquerda, a ordem é em uma lista ordenada, a numeração faz
importante. São os dez filmes de maior sentido. E na lista não ordenada, os pontos
bilheteria do ano, em ordem. Na lista da de tópico deixam claro que isso é, de fato,
direita, a ordem não interessa. São as uma lista, mesmo que não tenha uma ordem
indicações de melhor filme sem ordem específica. E esta é a diferença básica.
As listas ordenadas também possuem <h2>Top 5</h2>
alguns atributos opcionais que as listas não <ol reversed>
ordenadas não têm. Se você quiser começar <li>O Paraíso Pode Esperar</li>
uma lista ordenada, digamos, no 6º item, <li>Doido para Brigar... Louco para Amar</
simplesmente adicione start=”6”. li>
<li>Clube dos Cafajestes</li>
<h2>Filmes de maior bilheteria (EUA)</h2> <li>Superman</li>
<ol start=”6”> <li>Grease — Nos Tempos da Brilhantina</
<li>Hooper, o Homem das Mil Façanhas</ li>
li> </ol>
<li>Tubarão 2</li>
<li>A Vingança da Pantera Cor-de-Rosa</ Lembra dos atributos booleanos? Os valores
li> deles são opcionais. Se você incluir o valor,
<li>O Franco Atirador</li> ele deve ser o mesmo do nome do atributo.
<li>Halloween - O Início</li> Neste caso, reversed=”reversed”.
</ol>
<h2>Top 5</h2>
Quer listar as coisas em ordem invertida? <ol reversed=”reversed”>
Use o atributo booleano reversed. <li>O Paraíso Pode Esperar</li>
<li>Grease — Nos Tempos da Coloque type=”I” para algarismos romanos
Brilhantina</li> maiúsculos, “i” para algarismos romanos
</ol> minúsculos, “A” para letras maiúsculas,
“a” para letras minúsculas, ou “1” para
Você também pode mudar a numeração números, que é o padrão.
para usar letras maiúsculas ou minúsculas,
ou algarismos romanos, usando o atributo Portanto as listas ordenadas possuem
type. alguns atributos que podemos usar: start,
reversed, e type. As listas não ordenadas
<h1>Review de Roger Ebert’s sobre Grease não possuem atributos que são parte da
— Nos Tempos da Brilhantina</h1> especificação atual. Se você quiser exibi-las
<ol type=”I”> de maneira diferente, você precisará usar
<li>Introdução</li> CSS.
<li>Elenco</li>
<li>Resumo do enredo</li> E quanto aos itens de lista? Eles possuem
<li>Pontos Fortes</li> um atributo muito útil: value, que funciona
<li>Pontos Fracos</li> apenas em listas ordenadas. Ele especifica
<li>Conclusão</li> o valor de um item de lista específico,
</ol> e depois dele a lista continuará sendo
numerada automaticamente. Isso é útil se <h1>Review de Roger Ebert’s sobre Grease
houver um empate, por exemplo. — Nos Tempos da Brilhantina</h1>
<ol type=”I”>
<h1>Filmes com a maioria dos prêmios da <li>Introdução</li>
Academia</h1> <li>Elenco
<ol> <ul>
<li>Ben-Hur (empate)</li> <li>Olivia Newton-John</li>
<li value=”1”>Titanic (empate)</li> <li>John Travolta</li>
<li value=”1”>O Retorno do Rei </ul>
(empate)</li> </li>
<li value=”4”>Amor, Sublime Amor</li> <li>Resumo do enredo</li>
</ol> <li>Pontos Fortes</li>
<li>Pontos Fracos</li>
E adivinha só. Você pode aninhar listas <li>Conclusão</li>
dentro de listas! Eita! Simplesmente inclua </ol>
outra lista dentro de um item de lista antes
de fechar a tag.
Aqui eu aninhei uma lista não ordenada </li>
dentro de uma lista ordenada. É possível <li>Elenco</li>
fazer isso e vice-versa. Naturalmente, você <li>Resumo do enredo</li>
também pode aninhar uma lista dentro de <li>Pontos Fortes</li>
outra lista do mesmo tipo. <li>Pontos Fracos</li>
<li>Conclusão</li>
Na verdade, você pode colocar quase </ol>
qualquer outro tipo de elemento dentro de
um item de lista: parágrafos, títulos, divs… E aí, você está pronto para temperar um
como quiser! E claro, você pode colocar pouco suas páginas com listas? Sim, é
elementos em linha também. claro que sim, seu fazedor de listas! Até
a próxima, meu nome é Davey Strus.
<h1>Review de Roger Ebert’s sobre Grease Booooas codificações!
— Nos Tempos da Brilhantina</h1>
<ol type=”I”>
<li>Introdução
<p><cite>Grease — Nos Tempos
da Brilhantina</cite> vale a pena ver
pela nostalfia, mas é apenas um musical
mediano.</p>
Aqui eu aninhei uma lista não ordenada
dentro de uma lista ordenada. É possível
fazer isso e vice-versa. Naturalmente, você
também pode aninhar uma lista dentro de
outra lista do mesmo tipo.
Na verdade, você pode colocar quase

qualquer outro tipo de elemento dentro de
um item de lista: parágrafos, títulos, divs…
como quiser! E claro, você pode colocar
elementos em linha também.
<h1>Review de Roger Ebert’s sobre Grease

— Nos Tempos da Brilhantina</h1>
<ol type=”I”>
<li>Introdução
<p><cite>Grease — Nos Tempos
da Brilhantina</cite> vale a pena ver
pela nostalfia, mas é apenas um musical
mediano.</p>
EXERCÍCIOS: LISTAS ORDENA-
DAS E NÃO ORDENADAS
VISÃO GERAL
Construa duas listas, uma ordenada e
outra não ordenada
REQUISITOS
Fazer uma lista ordenada com seus
FILMES favoritos. Começando com os
mais favoritos seguindo para os menos
favoritos.
Fazer uma lista não ordenada com seus

HOBBIES.
Acesse o exercício
AULA 4 - HTML HIPERLINKS
ASSISTA A AULA
Leitura adicional
Aprendemos como fazer todo tipo de
HTML tag <a> on w3schools coisa chique com textos, mas ainda é só
texto. Queremos hipertexto! Para isso,
O elemento âncora on MDN precisamos de hiperlinks.
sobre rel=noopener by Mathias Bynens Um hiperlink, ou apenas link, se você

preferir assim, nos envia para outro lugar
na internet. Pode ser outra página do
mesmo site, outro site, ou para uma parte
diferente da página onde estamos. Pode
até mesmo ser um link para baixar um fechamento podem ser ativados para seguir
arquivo. Se o objeto tiver uma URL, você o link. O href aponta para uma URL, ou para
pode criar um link até ele. um fragmento de URL.
Você faz isso com o elemento <a>. Um fragmento de URL começa com uma
cerquilha (#) e aponta para um elemento
<a> específico da página atual, usando o id do
elemento. Você pode dar um id a qualquer
É um a de âncora, apesar de seu uso como elemento usando, com antecedência
âncora agora ser obsoleto. Hoje em dia, suficiente, o atributo id.
ele é usado apenas para links. O atributo
crucial aqui é o href. <a href=”#products”>Produtos</a>
<a href=”about.html”>Sobre nós</a> <h2 id=”products”>Nossos produtos</h2>
Quando um href estiver presente, o Este link aponta para aquele h2, pois o
elemento se torna um hiperlink, e o nome que segue a cerquilha do fragmento
conteúdo entre as tags de abertura e de de URL bate com o id do h2. Ao ativar
aquele link, o navegador irá rolar a página
até onde o h2 está. Você também pode que aparecem entre as tags de abertura
usar um fragmento no final de uma URL e fechamento, e as coisas que se tornam
para linkar a um id específico de outra clicáveis, podem ser praticamente qualquer
página. coisa, exceto outro link. Nada de links
dentro de links. Você pode pensar em
<a href=”about.html#founders”> links como elementos em linha. Como
Fundadores mencionei antes, o HTML redefiniu os tipos
</a> de conteúdo, pois precisávamos de mais
confusão em nossas vidas, mas os links não
Este link nos enviaria para o about.html e inserem novas linhas automaticamente nem
em seguida iria rolar a nova página até o preenchem a largura de seus containers
elemento com o id “founders”. por padrão. Portanto, eles agem como
elementos em linha. Apesar disso, você
Você também pode linkar ao topo da pode colocar um elemento de nível de
página atual usando #top ou apenas #. bloco dentro de um link, por mais esquisito
Você não precisar ter um elemento com o que isso se pareça para caretões como eu,
id “top” para que isso funcione. que se lembram de quando não se podia
fazer isso.
O conteúdo de um link, ou seja, as coisas
<h1> ocupa toda a largura. Então todo o espaço
<a href=”https://kenzie.com.br/”>Kenzie à direita da palavra ainda faz parte do h1 e
Academy Brasil</a> é clicável.
</h1>
Os links têm vários atributos além do href,
<a href=”https://kenzie.com.br/”> mas o que você provavelmente irá usar
<h1>Kenzie Academy Brasil</h1> mais é o target. A maioria dos valores
</a> possíveis para o target tem a ver com
frames, os quais não mexeremos agora.
Aqui, fiz das duas formas. Aninhei um link Mas o uso mais comum do target é o de
dentro de um h1 e um h1 dentro de um dar o valor _blank para abrir um link em
link. Qual a diferença prática? uma nova aba ou janela.
No primeiro link, apenas o texto é clicável. <a href=”https://kenzie.com.br/” target=”_

Observe o ponteiro do mouse. Eu preciso blank”>
colocá-lo diretamente sobre a palavra. No Kenzie Academy Brasil
segundo link, todo o h1, e não apenas o </a>
texto dentro do h1, é clicável. Já que o
h1 é um elemento de nível de bloco, ele
Isso é comum ao linkar a recursos comportamento.
externos, tipo ao linkar a outro site, Ao usar target=”_blank”, é uma boa ideia
sob certas circunstâncias em que você adicionar rel=”noopener” ao link.
acredita que o usuário provavelmente
irá desejar manter seu site aberto. Por <a
exemplo, usamos isso nas páginas deste href=”https://kenzie.com.br/”
curso ao linkar a um recurso externo, pois target=”_blank”
imaginamos que você provavelmente quer rel=”noopener”
manter a aula aberta enquanto lê outra >
coisa. Mas cuidado para não exagerar Kenzie Academy Brasil
com o target=”_blank”. Ele está fazendo </a>
uma suposição sobre a intenção do
usuário, e ao passo que ele sempre pode O atributo rel especifica a relação entre a
clicar com o botão direito ou com a tecla página atual e a página para qual o link está
CTRL pressionada para abrir qualquer apontando. Você pode não usá-lo muito,
link em uma nova aba, se você marcá-lo e deve sentir-se à vontade para ler mais
com target=”_blank”, o usuário não terá sobre isso por conta própria; mas neste
escolha a não ser abri-lo em uma nova caso, você pode usar isso para lidar com
aba. Eles não têm a opção de ignorar este um possível problema de segurança ao
usar target”_blank”. Você pode ler mais texto bom e hiper. Use este novo poder
sobre a natureza exata deste problema com responsabilidade. Até a próxima,
de segurança seguindo um link nesta aula. meu nome é Davey Strus. Cá entre nós, eu
Não vou falar sobre isso neste vídeo. provavelmente continuarei sendo o Davey
Strus até mesmo depois da próxima. Mas
Você deve ter notado que eu coloquei até lá, booooas codificações!
algumas linhas em branco no meio da
tag de abertura aqui, pois o número de
atributos estava tornando a tag muito
grande. Isso é totalmente válido. Se você
fizer isso, é uma boa ideia indentar seus
atributos e alinhá-los verticalmente, como
eu fiz, para mantê-los agradáveis de
ler. Em seguida, eu alinhei o símbolo de
fechamento com o símbolo de abertura
para ficar fácil identificar onde a tag de
abertura começa e termina.
Agora você tem o poder de tornar seu

AULA 5 - HTML INCORPORANDO
IMAGENS
ASSISTA A AULA HTML <img> tag no w3schools (em inglês)
Leitura adicional
Imagens no HTML no MDN
Vamos falar de imagens. É claro que HTML
O elemento de incorporação de imagem
significa Linguagem de Marcação de
no MDN
Hipertextos, mas nossas páginas não estão
limitadas a apenas textos. Nós podemos
Guia de tipo e formato de arquivo de
inserir outras mídias em nossas páginas. E
imagem no MDN (em inglês)
qual o exemplo mais simples? Uma simples
imagem. Para inserir uma imagem, use o
HTML images no w3schools (em inglês)
elemento de inserção de imagem, <img>.
<img> É aqui que você coloca a URL da imagem.
Facinho. Falaremos mais sobre formatos
O <img> é diferente de todos os outros de imagem depois, mas de longe os
elementos que usamos até agora no formatos de imagem mais comuns que você
corpo, no sentido de que é um elemento encontrará na web são JPGs, GIFs e PNGs.
vazio. Quer dizer, ele não tem tag de
fechamento. Usamos outro elemento Em seguida, temos o atributo alt.
vazio no cabeçalho: <meta>. Mas esta é
a primeira vez que usamos um no corpo. <img src=”davey.png” alt=”Davey Strus”>
E a tag de fechamento não é meramente
opcional, ela é proibida. Ele simplesmente O atributo alt fornece uma alternativa
não possui tag de fechamento. textual, caso o usuário esteja impossibilitado
de ver a imagem por algum motivo. Pode
Contudo, ele possui atributos. Primeiro, o ser porque está usando um leitor de tela,
atributo source, src. ou porque a URL está errada, ou porque a
conexão está muito lenta. Seja como for,
<img src=”davey.png”> o valor aqui deve ser o texto que você
gostaria que aparecesse caso a imagem Entretanto, você não deveria deixar o
não possa ser vista. Não seja preguiçoso atributo alt totalmente desligado. Coloque
de colocar o nome do arquivo de imagem algo útil nele ou aponte-o para uma string
ou algo assim. Isso não ajuda muito. Pense vazia se ele for puramente decorativo.
sobre o que a imagem está tentando Mais especificamente, a especificação do
comunicar e converta isso em palavras. HTML 5 permite que o alt seja omitido
sob certas circunstâncias, mas isso tem
<img src=”decoration.gif” alt=””> a ver com ferramentas que geram HTML
automaticamente e coisas do tipo, e não
Se a imagem for puramente decorativa, com cenários que você mesmo encontrará
você pode dar um valor vazio ao atributo ao escrever HTML. Você deveria considerar
alt. Os leitores de tela irão ignorá- o alt como algo obrigatório.
lo e as pessoas com conexões lentas
simplesmente não verão nada. Isso é Você também pode especificar a largura e a
provavelmente mais útil do que ver ou altura da imagem usando esses atributos.
ouvir as palavras “fronteira florida” ou algo
do tipo.
<img do mundo, mas não é o adequado.
src=”davey.png”
alt=”Davey Strus” Isso é o básico. E como sempre, sinta-se à
width=”600” vontade para seguir os links nesta aula para
height=”600” aprender mais. Até a próxima, meu nome é
> Davey Strus. Booooas codificações!
Espera-se que os valores numéricos

que você usar aqui sejam em pixels. Por
padrão, a imagem aparecerá no tamanho
que ela de fato é. Você não precisa dizer
isso ao navegador. Ele irá entender. A
vantagem de especificar a largura e
altura é que um placeholder do tamanho
correto irá aparecer enquanto a imagem
está carregando. Sem isso, você verá o
conteúdo mudando de lugar na página
enquanto a imagem carrega. Não é o fim
EXERCÍCIOS: IMAGENS E LINKS
VISÃO GERAL
Nesta atividade você ira inserir algumas
imagens com subtítulos e criar links nelas.
REQUISITOS
Você tem bastante liberdade para escolher
imagens sobre o que gosta, aqui estão as
informações que são necessárias:
Um título de nível um (h1) com um nome
apropriado.
Ao menos três imagens com subtitulos (h2-

h6). Cada nível de título possui tamanhos
diferentes, escolha com sabedoria qual usar.
Acesse o exercício
AULA 6: HTML TÍTULOS
Os elementos h1 - h6 são títulos. O código a seguir mostra alguns títulos com
algum conteúdo abaixo deles.
Esses elementos têm uma classificação
dada pelo número em seu nome. O <h1> <h1>Elementos de cabeçalho</h1>
elemento é dito ter o posto mais alto, o <h2>Sumário</h2>
<h6> elemento tem o menor grau, e dois <p>Algum texto aqui...</p>
elementos com o mesmo nome têm o
mesmo valor. <h2>Exemplos</h2>
<h3>Exemplo 1</h3>
<h1>This is heading 1</h1> <p>Algum texto aqui...</p>
<h2>Esse é um cabeçalho 2</h2>
<h3>Esse é um cabeçalho 3</h3> <h3>Exemplo 2</h3>
<h4>Esse é um cabeçalho 4</h4> <p>Algum texto aqui...</p>
<h5>Esse é um cabeçalho 5</h5>
<h6>Esse é um cabeçalho 6</h6> <h2>Veja também</h2>
<p>Algum texto aqui...</p>
QUESTÕES DE ACESSIBILIDADE Fazer
Uma técnica de navegação comum para <h1>Esse é um cabeçalho 1</h1>

usuários de software de leitura de tela <h2>Esse é um cabeçalho 2</h2>
é pular de um título para outro para <h3>Esse é um cabeçalho 3</h3>
determinar rapidamente o conteúdo da
página. Por isso, é importante não pular Os títulos podem ser aninhados como
um ou mais níveis de título. Fazer isso subseções para refletir a organização
pode criar confusão, pois a pessoa que do conteúdo da página. A maioria dos
está navegando dessa forma pode ficar se leitores de tela também pode gerar uma
perguntando onde está o rumo que está lista ordenada de todos os títulos em uma
faltando. página, o que pode ajudar uma pessoa a
determinar rapidamente a hierarquia do
Não fazer conteúdo:
<h1>Esse é um cabeçalho 1</h1> 1. h1 Besouros

<h3>Esse é um cabeçalho 3</h3> 1. h2 Etimologia
<h4>Esse é um cabeçalho 4</h4> 2. h2 Distribuição e Diversidade
3. h2 Evolução
1. h3 Paleozóico tardio EXEMPLOS:
2. h3 jurássico
3. h3 Cretáceo Tags de título w3schools
4. h3 Cenozóico
4. h2 Morfologia Externa Exemplo
1. h3 Cabeça
1. h4 Partes da boca
2. h3 Tórax
1. h4 Protórax
2. h4 Pterotórax
3. h3 Pernas
4. h3 Asas
5. h3 Abdômen
Quando os títulos são aninhados, os

níveis dos títulos podem ser “ignorados”
ao fechar uma subseção.
AULA 7: HTML TAGS DE DIVISÃO
DE CONTEÚDO
TAG ARTICLE tag article.
A tag <article> representa uma
composição completa ou independente Este exemplo mostra uma postagem de
em uma página. Pode ser uma postagem blog usando a tag article:
num fórum, um artigo de revista ou
jornal, um post de um blog ou mesmo <article>
um comentário de um usuário.
<header>
Quando as tags <article> são aninhados, <h1>A Primeira Regra da Vida</h1>
os elementos internos representam <p><time>3 dias atrás</time></p>
artigos que estão relacionados ao </header>
conteúdo do artigo externo. Por
exemplo, os comentários do post de um <p>Se houver um microfone perto de
blog, podem ser implementados com a você, assuma-o</p>
uma seção de serviços.
<footer>
<a href=”#”>Mostrar comentários...</ Exemplos
a>
</footer> Exemplos de seções, seriam capítulos de
um livro, ou seções numeradas de uma
</article> tese. Uma página de web pode ser dividida
em seções, como por exemplo, uma para
Você pode ver um pouco mais sobre a a introdução, uma para posts e outra para
tag <article> nesse vídeo: informações de contato.
Tag article do HTML 5 No exemplo a seguir, vemos um artigo(parte

de uma página da web) sobre maçãs,
TAG SECTION contendo duas seções curtas.
A tag section representa uma seção <article>

genérica de um página. Uma seção, <p>A maçã é o fruto da macieira.</p>
neste contexto, é um agrupamento <section>
temático de conteúdo, por exemplo, <h1>Maça vermelha</h1>
<p>Essas maças vermelhas brilhantes <head>
são as mais comumente encontradas na <title>Cerimônia de Graduação Verão
maioria dos supermercados.</p> 2022</title>
</section> </head>
<section>
<h1>Maça-verde</h1> <body>
<p>Essas maças verdes e suculentas
fazem um ótimo recheio para tortas de <h1>Graduação</h1>
maça.</p>
</section> <section>
</article> <h1>Cerimônia</h1>
<p>Procissão de Abertura</p>
Aqui está um programa de graduação <p>Discurso do Orador da Turma</p>
com duas seções, uma para a lista de <p>Discurso do Presidente da Turma</
formandos e outra para a descrição da p>
cerimônia. <p>Apresentação dos Diplomas</p>
<p>Discurso de Fechamento do
<!DOCTYPE Html> Diretor</p>
<html Lang=En> </section>
Antes
<section>
<h1>Graduados</h1> <div>
<h2>Cabeçalho</h2>
<ul> <p>Amontoado de conteúdos maneiros</
<li>Molly Carpenter</li> p>
<li>Anastasia Luccio</li> </div>
<li>Ebenezar McCoy</li>
<li>Karrin Murphy</li> Depois
<li>Thomas Raith</li>
<li>Susan Rodriguez</li> <section>
</ul> <h2>Cabeçalho</h2>
</section> <p>Amontoado de conteúdos maneiros</
p>
</body> </section>
</html>
Conforme mencionado acima, <section> é
Exemplo de uso simples um elemento de corte genérico e só deve
ser usado se não houver um elemento
mais específico para representá-lo. Por
exemplo, um menu de navegação deve ser Tag section do HTML 5
envolvido em uma tag <nav>, mas uma
lista de resultados de pesquisa ou uma
exibição de mapa e seus controles não
possuem elementos específicos e podem
ser colocados dentro de uma <section>.
Considere também estes casos:
Se o conteúdo do elemento representa

uma unidade atômica autônoma de
conteúdo como, por exemplo, uma
postagem de blog, um comentário ou um
artigo de jornal), o <article> seria uma
escolha melhor.
Você pode ver um pouco mais sobre a tag

<section> nesse vídeo:
PORTFÓLIO BÁSICO
VISÃO GERAL (h2-h6), fazendo com que na sequência
Nesta atividade, você irá criar uma página de cada um seja introduzido no mínimo 3
de portfólio básica. parágrafos(p). Cada nível de título possui
tamanhos diferentes, escolha com sabedoria
REQUISITOS qual usar.
Para realizar esse exercício você vai acessar
a plataforma codepen. O link está no fim Um link para um site que você visita com
desse página. frequência.
Em sua biografia, você tem bastante
liberdade em relação ao conteúdo que Acesse o exercício
deseja compartilhar. Aqui estão os
elementos que devem ser incluídos:
Um título de nível um(h1) com um nome
apropriado para a sua biografia.
Ao menos três títulos de níveis inferiores

MÓDULO B - CSS BÁSICO
AULA 1 - INTRODUÇÃO AO CSS
Neste módulo, você irá aprender a usar em documentos HTML. Por exemplo, para
o CSS para manipular a aparência do selecionar todos os elementos parágrafo
conteúdo das suas páginas web. de uma página HTML e tornar o texto
dentro deles vermelho, você escreveria
O QUE REALMENTE É CSS? este CSS:
CSS (Folha de Estilo em Cascata) é o p{

código que você usa para dar estilo à sua color: red;
página. }
O CSS não é uma linguagem de Anatomia de um conjunto de regras CSS

programação mas sim uma linguagem de Vamos dar uma olhada no CSS acima com
estilização. Isso significa que o CSS permite mais detalhes:
aplicar estilos seletivamente a elementos
estilizados(elementos <p>). Para dar estilo
a um outro elemento, é só mudar o seletor.
Propriedades(Property)
Forma pela qual você altera um
determinado estilo de um elemento HTML.
No CSS, você escolhe quais propriedades
você deseja alterar.
Valor da propriedade(Property value)

À direita da propriedade, depois dos dois
Toda essa estrutura é chamada de conjunto pontos, nós temos o valor de propriedade,
de regras, mas geralmente usamos o termo que escolhe uma dentre muitas aparências
“regra”, por ser mais curto. Note os nomes possíveis para uma determinada
das partes individuais: propriedade.
Seletor(Selector) Declaração(Declaration)
É, nesse caso, o nome do elemento HTML. Uma regra simples como color: red;
Ele seleciona o(s) elemento(s) a serem especificando quais das propriedades do
elemento você quer estilizar. p{
color: red;
Note outras partes importantes da sintaxe: width: 500px;
border: 1px solid black;
Cada linha de comando deve ser envolvida }
em chaves({})
Dentro de cada declaração, você deve usar Selecionando múltiplos elementos
dois pontos(:) para separar a propriedade
de seus valores Você também pode selecionar vários tipos
Dentro de cada conjunto de regras, você de elementos e aplicar um único conjunto
deve usar um ponto e vírgula(;) para de regras a todos eles. Inclua múltiplos
separar cada declaração da próxima seletores separados por vírgulas. Por
exemplo:
Então para modificar múltiplos valores
de propriedades de uma vez, você deve p, li, h1 {
escrevê-los separados por ponto e vírgula, color: red;
desse modo: }
AULA 2 - SELETORES NO CSS
Neste módulo, nós vamos nos aprofundar
navegador quais elementos HTML devem
um pouco mais nos seletores de CSS.
ser selecionados para que os valores
de propriedade dentro da regra sejam
SELETORES CSS
aplicados a eles.
Em CSS, os seletores são usados para
direcionar os elementos HTML em nossas
páginas da web que queremos estilizar.
Há uma grande variedade de seletores
CSS disponíveis, permitindo uma precisão
refinada ao selecionar os elementos a
serem estilizados.
Um seletor CSS é a primeira parte de uma

regra CSS. É um padrão de elementos
e outros termos que informam ao
Tipos de seletores através da sua classe, você precisa
adidionar um ponto(.) antes do nome da
Existem alguns agrupamentos diferentes classe:
de seletores e saber qual tipo de seletor
você pode precisar o ajudará a encontrar .titulo{
a ferramenta certa para o trabalho. /* declarações aqui */
}
Seletores por nome de elemento
Seleciona elementos através do seu Seletores por ID
nome:
Assim como na classe você precisa de um
/* Todos os elementos <a> */ ponto, para utilizar o seletor por ID, você
a{ precisa adicionar uma cerquilha(#) antes
color: red; do nome do ID:
}
#tituloUnico{
Seletores por classe /* declarações aqui */
Perceba que para selecionar um elemento }
Seletores por atributo
Os elementos HTML podem ter

atributos que fornecem mais detalhes
sobre o elemento que está sendo
marcado. Em CSS, você pode usar
seletores de atributo para estilizar
elementos com determinados atributos.
Esta lição mostrará como usar esses
seletores. No exemplo abaixo você pode ver esses
seletores sendo usados:
Seletores de presença e valor
Esses seletores permitem a seleção de Usando li[class] podemos combinar
um elemento com base na presença qualquer seletor com um atributo de
de um atributo sozinho(por exemplo, classe. Isso corresponde a todos os itens
href) ou mesmo através do atributo da lista, exceto o primeiro.
juntamente com o valor desse. li[class=”a”] corresponde a um seletor com
uma classe de a, mas não a um seletor com
uma classe de a com outra classe separada
por espaço como parte do valor. Ele
seleciona o segundo item da lista.
li[class~=”a”] corresponderá a uma
classe de a, mas também a um valor
que contém a classe de a como parte
de uma lista separada por espaços em
branco. Ele seleciona o segundo e o
terceiro itens da lista.
Seletores de presença e valor
Esses seletores permitem a seleção de

um elemento com base na presença
de um atributo sozinho(por exemplo,
href) ou mesmo através do atributo
juntamente com o valor desse.
Seletores de substring O próximo exemplo mostra o uso
desses seletores:
Esses seletores permitem uma
correspondência mais avançada de li[class^=”a”] corresponde a qualquer
substrings dentro do valor do seu valor de atributo que comece com
atributo. Por exemplo, se você tivesse a, portanto, corresponde aos dois
classes de box-warning e box-error e primeiros itens da lista.
quisesse combinar tudo que começou
com a string “box-”, você poderia usar li[class$=”a”] corresponde a qualquer
[class^=”box-”] para selecionar os valor de atributo que termina com a,
dois(ou [class|=”box”] como descrito portanto, corresponde ao primeiro e
abaixo) terceiro item da lista.
li[class*=”a”] corresponde a qualquer

valor de atributo onde a apareça em
qualquer lugar na string, portanto,
corresponde a todos os itens da nossa
lista
Seletores de substring
Se você deseja combinar valores de

atributo sem distinção entre maiúsculas
e minúsculas, você pode usar o valor i
antes do colchete de fechamento. Este
sinalizador informa ao navegador para
corresponder caracteres ASCII sem
distinção entre maiúsculas e minúsculas.
Sem o sinalizador, os valores serão
correspondidos de acordo com a
distinção entre maiúsculas e minúsculas
do idioma do documento - no caso
do HTML, será sensível a maiúsculas e
minúsculas.
No exemplo a seguir, o primeiro seletor

corresponderá a um valor que começa
com um - ele corresponde apenas ao
primeiro item da lista porque os outros
dois itens da lista começam com
um A maiúsculo. O segundo seletor
usa o sinalizador que não diferencia
maiúsculas de minúsculas e, portanto,
corresponde a todos os itens da lista.
Para saber mais
Leia: Seletores CSS

EXERCÍCIO - UTILIZANDO OS
SELETORES CSS
VISÃO GERAL
Nos conteúdos anteriores você

aprendeu a utilizar alguns seletores.
Hora de praticar!
Abra o arquivo CodePen e faça as

alterações necessárias no arquivo
HTML e CSS para obter o seguinte
resultado:
EXERCÍCIOS:
1. Adicione uma classe ‘mainTitle’ no

seletor h1.
2. Adicione uma classe ‘text’ no
primeiro parágrafo.
3. Altere a cor do item “3. Digital
Marketing” para rosa(dica: você pode
utilizar a keyword ‘pink’).
4. Encontre o erro no seletor css
‘knowMore’; (dica: declaração com
classe).
5. Atribua um id ‘excited’ a tag span
dentro do elemento div ‘knowMore’.
AULA 3 - UNIDADES DE MEDIDA
ASSISTA A AULA
VISÃO GERAL O que é uma unidade de medida?
CSS tem várias opções de unidades O que é uma unidade de medida?

para se usar ao determinar o tamanho Uma unidade CSS determina o tamanho
de alguma propriedade no CSS. de uma propriedade que você está
Aprender todas as suas opções para definindo para um elemento ou
unidades CSS pode ser fundamental conteúdo. Por exemplo, se você deseja
para estilizar de uma melhor forma e o definir a margem de propriedade de um
layout tenha uma ótima aparência em parágrafo, você deve dar a ela um valor
qualquer tela. específico. Este valor inclui a unidade
CSS.
Vamos ver um exemplo: unidade e exemplos de casos de uso:
p{ Unidades absolutas vs. Unidades

margin: 20px; relativas
}
Ao considerar todas as opções para
Nesse caso, margin é uma quais unidades usar, é importante
propriedade, e 20px é o valor, onde px considerar as duas categorias de
é a unidade de medida. unidades: absolutas e relativas.
Embora seja comum ver unidades Unidades absolutas

como o px sendo usadas, a grande
questão é: “Qual é a melhor unidade As unidades que são “absolutas” têm o
para se usar aqui?” mesmo tamanho, independentemente
do elemento pai ou do tamanho
Aqui estão algumas considerações a da janela. Isso significa que uma
serem feitas ao escolher um tipo de propriedade definida com um valor
que tem uma unidade absoluta terá quando o tamanho da tela muda.
esse tamanho quando vista em um
dispositivo móvel ou computador.
As unidades absolutas podem ser

úteis ao trabalhar em um projeto
onde a capacidade de resposta não
está sendo considerada. Por exemplo,
aplicativos de desktop que não podem
ser redimensionados podem ser Pixels (px) são normalmente a unidade
estilizados para as dimensões padrão. absoluta mais popular para telas.
Se a janela não escalar, você também Centímetros, milímetros e polegadas
não precisa que o conteúdo escale. são mais comuns para impressão e você
pode nem saber que eram opções!
Dica: unidades absolutas podem
ser menos favoráveis para sites
responsivos porque não escalam
Unidades relativas então vamos examinar suas opções em
detalhes.
As unidades relativas são úteis para
estilizar sites responsivos porque são
dimensionadas em relação ao pai ou
ao tamanho da janela(dependendo da
unidade).
Como regra geral, as unidades

relativas podem ser usadas como
padrão para sites responsivos. Isso
pode ajudá-lo a evitar a necessidade
de atualizar estilos para diferentes Nem sempre está claro qual dessas
tamanhos de tela. opções é melhor usar para cada tipo
de propriedade CSS. Por exemplo, %
As unidades relativas podem ser um é geralmente mais apropriado para
pouco mais difíceis do que as unidades propriedades relacionadas ao layout,
absolutas para determinar qual usar, como largura, do que para tamanho da
fonte. em: Você deseja que a fonte de um
elemento filho tenha metade do
Aqui estão alguns exemplos de tamanho da fonte de seu pai(por
quando você usaria cada unidade exemplo, o parágrafo sob o título de
relativa: uma seção).
%: Você deseja que um elemento filho .filho {

tenha 10% da largura do pai como font-size: 0.5em;
margem para que nunca preencha }
todo o elemento pai. Se o tamanho
do pai mudar, a margem também será rem: O tamanho da fonte deve ser
atualizada. o dobro do tamanho da fonte do
elemento raiz. Pode ser assim que
.filho { você dimensiona seus cabeçalhos,
margin: 10%; porque todos eles devem ter o mesmo
} tamanho, independentemente do
contêiner pai.
header { vmin: Você tem uma imagem que deve
font-size: 2rem; ser sempre tão larga quanto a menor
} dimensão da janela de visualização. Em
um dispositivo móvel no modo retrato, a
vh: Sua página deve sempre ter a imagem será tão ampla quanto a largura
altura da janela de visualização. da janela de visualização.
body { img {
height: 100vh; width: 100vmin;
} }
vw: Você tem uma seção com texto vmax: Você não se importa se uma
que deve ter a metade da largura da imagem for cortada porque você deseja
janela de visualização. que ela preencha completamente
a dimensão maior da janela de
section { visualização. Por exemplo, se a imagem
width: 50vw; de um padrão for usada como plano de
} fundo.
img { Para saber mais
width: 100vmax;
} Leia: Conheça as Unidades de CSS
No geral, quando e como você

escolhe suas unidades CSS se
resumem a algumas perguntas:
Eu quero que o meu estilo seja

dimensionado quando o tamanho da
janela de visualização mudar?
Se eu quiser que ele seja escalonado,
ao que eu quero que ele seja relativo?
Depois de responder a essas
perguntas, é muito mais fácil definir
qual unidade usar!
AULA 4 - APLICANDO COR A
ELEMENTOS COM CSS
Nessa aula vamos ver um pouco sobre desenhadas nos elementos, como texto
as cores no css, propriedades como e bordas e assim por diante. Para cada
color, background, que podem ser útil um, veremos uma lista das propriedades
nas próximas atividades, e também CSS que aplicam cores a eles.
páginas para seleção de paleta de
cores. PROPRIEDADES
COISAS QUE PODEM TER COR Sempre que um elemento é

renderizado, essas propriedades
No nível do elemento, tudo em HTML são usadas para determinar a cor do
pode ter uma cor aplicada a ele. texto, seu plano de fundo e quaisquer
Em vez disso, vamos olhar para as decorações no texto.
coisas em termos dos tipos de coisas
color border
Propriedade utilizada para definir a Essa propriedade é utilizada para
cor de um texto definir uma borda par um elemento,
dentre as suas configuração está a cor
A cor a ser usada ao desenhar o texto dessa borda.
e quaisquer decorações de texto,
como a adição de sublinhados ou opacity
sobrelinhados e assim por diante. Propriedade utilizar para regular a
transparência de um elemento, ou
background-color seja, deixá-lo mais opaco ou mais
A cor de fundo de um elemento, seja transparente.
ele do tipo em linha ou em bloco.
VALORES
text-shadow
Define um efeito de sombra As cores no CSS podem ser aplicadas
para o texto. Entre as opções de tanto através de uma palavra chave,
configuração para a sombra, está a ou seja, o nome da cor, quanto através
cor dessa sombra. de valores numéricos, utilizando as
unidades hexadecimal ou rgb, há Leia (em inglês): CSS HEX Colors -
também outras formas, porém essas W3Schools
são as mais comuns.
Paletas
Vamos utilizar como exemplo a cor
preta: Paletton
Coolors
Palava chave: black Adobe Color
Hexadecimal: #000000
RGB: rgb(0, 0, 0) Conteúdo opcional
Para saber mais Leia (em inglês): Applying color to

HTML elements using CSS
Leia: Propriedade color do CSS - MDN Leia (em inglês): CSS Color Module
Leia: opacity - MDN Level 3
Leia (em inglês): CSS Colors - Leia (em inglês): color - MDN
W3Schools Leia(em inglês): opacity - MDN
Leia (em inglês): CSS RGB Colors -
W3Schools
AULA 5 - FONTES CSS
ASSISTA A AULA
ESTILIZANDO FONTES família para o elemento selecionado:
Nós temos algumas opções de p{

estilização de fontes, desde o seu font-family: Georgia, serif;
tamanho até família dessa fontes. }
Vamos ver algumas propriedades e
como utilizá-las! Esse código resultará no seguinte:
font-family
A propriedade font-family especifica
uma lista de um ou mais nomes de
famílias de fontes e / ou categorias de
As aspas são necessária quando o
nome da família é composto, ou seja, Valores
tem mais um nome Há duas opções de valores, definir
apenas a categoria de família da fonte ou
Os valores são separados por vírgulas definir uma fonte específica.
para indicar que são alternativas. O
navegador selecionará a primeira Categorias de famílias
fonte da lista, se não encontrar a Quando definimos apenas a categoria,
primeira ele utiliza a segunda e assim o navegador aplica uma fonte dessa
por diante. categoria que ela tenha por padrão em
sua memória
Você deve sempre incluir pelo menos
uma categoria de família em uma Temos algumas opções de categorias de
lista de famílias de fontes, uma vez fontes. As principais são:
que não há garantia de que qualquer
fonte esteja disponível. Isso permite serif
que o navegador selecione uma fonte A fonte do tipo serif é aquela que tem
alternativa quando necessário. uma ‘perninha’ no início e final da letra.
Alguns exemplos de fonte do tipo Um exemplo de fonte monospace é a
serif são Times New Roman e Georgia, Roboto Mono:
como vimos no exemplo acima.
sans-serif
A fonte do tipo sans-serif é o contrário
da serif, ou seja, ‘sem serifa’, como o
próprio nome já mostra. cursive
A font do tipo cursive é aquela que
Alguns exemplos, são Arial, Roboto possui um design mais sofisticado, com
e Gill Sans, que vimos no exemplo estilo de manuscrito.
acima.
Um exemplo de fonte cursive é a
monospace Pacifico:
Na fonte to tipo monospace, todos
os caracteres passam a ocupar
exatamente o mesmo espaço. Muito
utilizada em IDE’s.
font-size Valores
A propriedade CSS font-size define o normal
tamanho da fonte. Espessura normal, equivalente aos
valores 400 ou mesmo 500
Valores
Há algumas opções de valores para bold
essa propriedade. A mais utilizada é Negrito. Equivalente aos valores 600 ou
um valor numérico, seguido de uma mesmo 700.
unidade de medida como px, em ou
rem, que são as mais utilizadas se lighter
tratando de fontes. Um peso de fonte relativo mais leve do
que o elemento pai.
font-weight
A propriedade CSS font-weight bolder
define a espessura da fonte. Os pesos Um peso de fonte relativo mais pesado
disponíveis dependem da família de que o elemento pai.
fontes atualmente definida.
valor numérico que varia de 100 a 900,
sem a utilização de unidades de está aplicando o line-height
medida
IMPORTANDO FONTES
line-height
A propriedade CSS line-height define Como utilizar o Google Fonts
a altura de uma caixa de linha. É Acesse o website da Google Fonts,
comumente usado para definir a através da url fonts.google.com
distância entre as linhas de texto.
Em elementos de nível de bloco, ele Pesquise pela fonte desejada ou procure
especifica a altura mínima das caixas por alguma rolando a página inicial.
de linha dentro do Você também pode filtrar pela categoria
desejada.
Valores
Principalmente valores numéricos,
seguido ou não de uma unidade de
medida. Quado é aplicado um valor
sem unidade, ele fica relativo ao
tamanho da fonte do texto no qual
1. Selecione a fonte desejada.
2. Selecione os estilos dessa fonte que deseja utilizar, clicando em “Select this style”, ao
lado do estilo.
1. Depois é só importar no seu website, utilizando o código disponibilizado pela

plataforma, e então, aplica no seu CSS.
Para saber mais
Leia: Estilizando Fontes com CSS

EXERCÍCIO - TRABALHANDO
COM FONTES
Neste exercício vamos trabalhar com
a importação de fontes e edição das
suas propriedades:
Acesse o exercício
AULA 6 - DIMENSIONAMENTO
Nessa aula vamos ver um pouco elemento. Impede que o valor usado da
sobre o dimensionamento no css, e as propriedade width se torne menor do
principais propriedades utilizadas para que o valor especificado para largura
dimensionar elementos, como width, mínima.
height, max-width, min-width, max-
height e min-height max-width
A propriedade max-width define a
PROPRIEDADES largura máxima de um elemento. Impede
que o valor usado da propriedade
width width se torne maior do que o valor
A propriedade width define a largura especificado para a largura máxima.
de um elemento.
height
min-width A propriedade height especifica a altura
A propriedade min-width define de um elemento.
uma largura mínima para um
min-height a largura: Normalmente, valores
A propriedade min-height define uma numéricos, seguido de uma unidade de
altura mínima para um elemento. medida. A mais utilizada são px, % ou vw.
Isso evita que o valor usado na
propriedade height se torne menor do Para as propriedades relacionadas a
que o valor especificado para a altura altura: Normalmente, valores numéricos,
mínima. seguido de uma unidade de medida. A
mais utilizada são px ou vh.
max-height
A propriedade max-height define Para saber mais
a altura máxima de um elemento.
Isso evita que o valor usado da Leia: Propriedade width
propriedade height se torne maior do Leia: Propriedade height
que o valor especificado para a altura
máxima.
VALORES
Para as propriedades relacionadas
AULA 7 - POSICIONAMENTO
Nessa aula vamos ver um pouco texto nesses elementos em uma string
sobre posicionamento utilizando a de texto não interrompe o fluxo do
propriedade display. texto.
O DISPLAY
Todo elemento em uma página

da web é uma caixa retangular. A
propriedade display no CSS determina
apenas como essa caixa se comporta.
Existem alguns valores que são O elemento <em> possui uma borda
comumente usados: vermelha de 1px. Observe que ele está
alinhado com o resto do texto.
inline
Pense em elementos como <span>, Um elemento inline irá aceita margin
<em> ou <b> e como envolver o e padding, mas o elemento ainda fica
embutido como você pode esperar. sentido de que será definido em linha
A margem e o preenchimento com o fluxo natural do texto (na “base
apenas afastarão outros elementos da linha”). A diferença é que você
horizontalmente, não verticalmente. pode definir uma largura e altura.
Um elemento inline não aceita height block

e width. Ele simplesmente irá ignorar. Vários elementos são definidos
como block pela folha de estilo do
inline-block navegador. Eles geralmente são
Um elemento definido como inline- elementos de contêiner, como <div>,
block é muito semelhante ao inline no <section> e <ul>. Também “blocos
de texto” como <p> e <h1>. Os
elementos de nível de bloco não
ficam em linha, mas passam por eles.
Por padrão(mesmo sem definir uma
largura), eles ocupam todo o espaço
horizontal disponível.
Para saber mais

Leia: Pare de chutar e aprenda como
funciona o display: block

HTML CSS

Enviado por

Direitos autorais:

Formatos disponíveis

HTML CSS

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML CSS

Enviado por

Direitos autorais:

Formatos disponíveis

DÊ UM START EM

SUA CARREIRA DEV.

Módulo A - HTML Básico

Módulo B - CSS Básico

Módulo D - Publicando seu website

Essas são as ferramentas que irá utilizar:

GitHub: Ferramenta de versionamento

Vamos mergulhar no HTML (Linguagem Referência de Elementos/Tags HTML

O HTML é uma linguagem de marcação As tags são colocadas dentro de sinais de

As tags usam o que chamamos de atributos

Nesta seção vamos dar uma olhada na 7. </body>

<body> representa o conteúdo de um

Introdução ao HTML no MDN

O que há no head? no MDN

O elemento meta no MDN

Lista de códigos ISO 639-1 no Wikipedia

Olá, a todos. Sejam bem-vindos à Kenzie

E como você deve estar imaginando, há

Listas não ordenadas no MDN Estamos progredindo bem com o HTML,

<h2>Indicados para melhor filme</h2> Então como elas serão apresentadas no

Na verdade, você pode colocar quase

<h1>Review de Roger Ebert’s sobre Grease

Fazer uma lista não ordenada com seus

sobre rel=noopener by Mathias Bynens Um hiperlink, ou apenas link, se você

<a href=”about.html”>Sobre nós</a> <h2 id=”products”>Nossos produtos</h2>

No primeiro link, apenas o texto é clicável. <a href=”https://kenzie.com.br/” target=”_

Agora você tem o poder de tornar seu

Espera-se que os valores numéricos

Ao menos três imagens com subtitulos (h2-

Uma técnica de navegação comum para <h1>Esse é um cabeçalho 1</h1>

<h1>Esse é um cabeçalho 1</h1> 1. h1 Besouros

Quando os títulos são aninhados, os

Tag article do HTML 5 No exemplo a seguir, vemos um artigo(parte

A tag section representa uma seção <article>

Considere também estes casos:

Se o conteúdo do elemento representa

Você pode ver um pouco mais sobre a tag

Ao menos três títulos de níveis inferiores

CSS (Folha de Estilo em Cascata) é o p{

O CSS não é uma linguagem de Anatomia de um conjunto de regras CSS

Valor da propriedade(Property value)

Um seletor CSS é a primeira parte de uma

Os elementos HTML podem ter

Seletores de presença e valor

Esses seletores permitem a seleção de

li[class*=”a”] corresponde a qualquer

Se você deseja combinar valores de

No exemplo a seguir, o primeiro seletor

Para saber mais

Leia: Seletores CSS

Nos conteúdos anteriores você

Abra o arquivo CodePen e faça as

1. Adicione uma classe ‘mainTitle’ no

VISÃO GERAL O que é uma unidade de medida?

CSS tem várias opções de unidades O que é uma unidade de medida?

p{ Unidades absolutas vs. Unidades

Embora seja comum ver unidades Unidades absolutas

As unidades absolutas podem ser

Como regra geral, as unidades