Codificação Front-End
Role para baixo
Desafio 2
No desafio anterior, você aprendeu sobre a linguagem de marcação HTML5 e criou a estrutura de uma página da web, utilizando como base o protótipo já criado, após o levantamento de requisitos. Agora, está na hora de fazer a estilização desse código, tornando-o mais fiel ao protótipo. Para isso, nesta etapa, você deverá resolver o desafio 2.
- Desenvolver o Front-End, aplicando a linguagem de folha de estilos do CSS3 sobre o HTML5 já desenvolvido.
Neste desafio, você estudará os seguintes conteúdos:
- Cascading Style Sheets (CSS)
- Estilos de fonte
- Estilos de linha
- Eventos
- Responsividade
- Criação de layouts
- Código semântico
- Versionamento
css
Como você já deve saber, o HTML é um conjunto de códigos que descreve a estrutura, o conteúdo e a apresentação de um site, no qual é possível adicionar conteúdo de texto ou mídias.
O CSS (Cascading Style Sheets) é uma linguagem de folha de estilos para páginas web que define a estética ou o design da página, como estilo e cor de fontes e de linhas, presença de animações e aplicações que tornam o site mais dinâmico e visualmente mais agradável.
O CSS3 é a última versão da Folha de Estilo em Cascata. Com ela, há mais flexibilidade na criação de layouts. Nessa versão, foram adicionados alguns comandos como cantos arredondados, sombras, efeitos gradientes, animações e efeitos de transição.
Não é necessário adicionar nenhum comando informando sobre o uso do CSS3, pois o navegador automaticamente já indica sua versão.
Fonte: Pixabay
As imagens a seguir mostram uma mesma página da Web. A primeira conta somente com a linguagem HTML, e a segunda, com a estilização do CSS:
Sem CSS
Com CSS
Fonte: Pixabay
Formas de Estilização
Há três formas para definir a estilização de uma página: inline, interno ou externo.
Clique nas abas a seguir para conhecer os três tipos.
O CSS é passado como um atributo na tag.
O CSS é passado no cabeçalho do documento HTML. Dentro da tag <head>, é aberta a tag <script>, na qual você irá passar as declarações:
Um arquivo com a extensão .css é criado separadamente e é chamado no cabeçalho do HTML pela tag <link>. Assim, o CSS criado pode ser aplicado a qualquer página, o que otimiza o tempo de carregamento dos elementos. Neste curso, trabalharemos com o estilo externo.
Estrutura do css
A sintaxe do CSS é simples, formada pelos seguintes elementos, em inglês: selector, property, property value e declaration.
Clique nos destaques a seguir para conhecê-los.
Fonte: Pixabay
A declaration é formada pela propriedade (property) e pelo valor (property value), sempre separados por dois pontos. Cada seletor pode conter uma ou mais declarações separadas por ponto e vírgula.
Class e id
Nas tags do código HTML, adicionamos uma class ou
um id. Lembre-se de que é possível ter diversas
class na mesma página, porém o id é
único. As imagens a seguir mostram um exemplo de código com uma estrutura de menu que
utiliza o seletor id e a sua estilização:
Um id é chamado no CSS por uma cerquilha (#), ou seja, #nome-do-id.
No exemplo, #menu. Note que não deve existir espaço entre a # e o
id.
Nesse exemplo, quantas declarações compõem o
#menu?
Clique no botão para saber a resposta.
São 6 declarações:
Width(largura): no exemplo, a tag<nav>revela que o conteúdo vai ocupar 100% da largura disponível da tela.Height(altura): a altura está fixada em 60px.Justify-content: alinha os itens quando os elementos não utilizam todo o espaço horizontal. Nesse caso, optamos pelo alinhamentocenter(centralizado), mas poderia serflex-start(à esquerda),flex-end(à direita),space-between(distribuído simetricamente na largura disponível), entre outros.Displaypropriedade que especifica o comportamento de exibição. O valorflextorna a tag<nav>uma tag pai flexível, comportamento herdado por suas tags filhas.
Agora, vamos fazer o mesmo menu, mas utilizando uma
class com sua estilização. Na primeira imagem, temos o HTML; na segunda, o
CSS; e, na terceira, a renderização no navegador.
As class são chamadas no CSS por um ponto antes do nome. No
exemplo, .linkMenu.
Assim como no caso do id, note que não deve existir espaço entre o
ponto e a class.
Nesse exemplo, quantas declarações compõem o
.linkMenu?
Clique no botão para saber a resposta.
São 6 declarações:
Text-decoration: define a formatação de linhas, comounderline(sublinhado abaixo do texto),overline(sublinhado acima do texto), entre outros. No exemplo, o valornonesignifica nenhuma.Margin: define a margem do elemento, que poder ser única ou subdividida em superior, direita, inferior e esquerda (respectivamentetop,right,bottomeleft). Então, uma declaraçãomargin 10pxdefine uma margem uniforme de10pxao redor do elemento. No exemplo,margin 20px 10px 0pxdefine20pxde margem superior,10 pxde margem direita,0pxde margem inferior. Margens não declaradas (como a esquerda, no exemplo) assumem o valor de seu simétrico.Text-transform: define a fonte como minúscula ou, como no exemplo, maiúscula.Color: define a cor da fonte.Font-weight: define o peso da fonte, ou seja, se deverá estar realçado (bold).Font-family: define o tipo de fonte, no exemplo,Arial.
Agora você irá conhecer o conceito de BoxModel. Clique no player e assista ao vídeo.
Clique aqui para baixar um arquivo pdf que contém outros tipos de seletores, como as pseudoclasses.
Saiba mais
Saiba mais sobre a diferença entre margin e
padding clicando aqui.
Para saber mais sobre margin e suas propriedades, clique aqui.
Importante
Observe como chamar elementos pai e filho no CSS.
O elemento pai, a tag que está agrupando as demais, é chamado normalmente, ou seja,
.menu no exemplo. Para chamar a tag filha
.linkMenu (as âncoras das páginas), é necessário chamar o elemento
pai anteriormente, ou seja, .menu .linkMenu no exemplo.
Em uma declaração, há várias maneiras de chamar os seletores, além da
class e do id. É possível chamar
vários elementos sem uma class ou
id, separando-os por vírgulas, desde que sejam elementos pai.
Nesse exemplo, todos os parágrafos, títulos h1, títulos
h2 e links (com ou sem class ou
id) estarão na cor vermelha.
No caso de elementos filhos, é necessário passar o caminho todo. Analise um exemplo a seguir.
.menu .linkmenu, h3, #txt1 a, .titulos {
color: black;
}
Nesse exemplo, a class .linkmenu dentro da
class .menu, os títulos h3, as
âncoras dentro do id txt1 e a
class .títulos estarão na cor preta.
Você pode chamar um seletor pelo nome (class ou
id) e passar o tipo do atributo dele, por exemplo:
Clique no player para acessar o vídeo sobre seletores.
Clique aqui para baixar a versão PDF.
Saiba mais
Para conhecer os seletor combinador e outros, clique aqui.
Você sabia?
Você pode definir a cor dos elementos por meio do:
- nome da cores em inglês: red, green, blue, turquoise, lavender, entre outros;
- código hexadecimal: #FF0000, #00FF00, #0000FF, #40E0D0, #E6E6FA etc.;
- valor RGB (Red, Green e Blue) que define os valores de vermelho, verde e azul que compõem as demais cores, como (255, 0, 0), (0, 255, 0), (0, 0, 255), (64, 224, 208), (230, 230, 250) etc.
Fonte: Pixabay
Criando uma folha de estilos
O arquivo CSS é independente do arquivo HTML, ficando separado. Portanto, você deve criar uma pasta interna chamada CSS, para adicionar o arquivo em que serão salvas as estilizações, e, no Visual Code, criar um arquivo .CSS.
Clique nas setas de navegação para acompanhar o procedimento.
Dentro da pasta do arquivo index.html, crie uma subpasta chamada css.
No Visual Code, crie um novo arquivo clicando em “File” e depois em “New File” ou utilize o atalho ctrl+n.
Salve o arquivo como style.css. Para isso, utilize o atalho ctrl+s ou clique em “Save As” no menu “File”.
Salve o arquivo como style.css. Para isso, utilize o atalho ctrl+s ou clique em “Save As” no menu “File”.
Integrando o CSS no HTML
Para chamar a página de estilização no código HTML, basta inserir na tag <head> a linha a seguir:
No exemplo, a tag <link> tem
três atributos:
rel: relação entre link e documento.type: especifica o tipo de mídia do documento/recurso vinculado.href: define o caminho do arquivo.
Fonte: heylagostechie on Unsplash
Você sabia?
Alguns atributos que podem ser adicionados à tag
<link> são:
hreflang: especifica o idioma do texto no documento vinculado.sizes: determina o tamanho do recurso vinculado para ícones. Usado apenas para orel=“icon”.
Um olhar prático
Vamos fazer um teste prático adicionando um estilo ao corpo do texto, ou seja, na tag
<body>. Além disso, adicionaremos uma cor ao
background e definiremos as medidas de largura e de altura.
Clique nas setas de navegação para acompanhar o procedimento.
Primeiro, abra o index.html e insira a tag <link>
dentro da tag <head> e salve o arquivo.
Então, abra o style.css e insira como cor de fundo
(background-color) o vermelho
(red), com 100% de largura
(width) e altura
(height). Salve o arquivo. Tudo que estiver dentro do
body, irá receber esse estilo.
Agora, abra o index.html no navegador e confira o resultado.
Agora que você já conhece os seletores e alguns tipos de estilização, clique no player a seguir e acesse o vídeo sobre prioridades.
Clique aqui para baixar a versão PDF.
Estilos de fonte
As propriedades para estilizar fontes definem a apresentação dos conteúdos textuais dos diferentes elementos da marcação HTML.
Clique nas abas a seguir para conhecer as propriedades básicas para estilizar fontes.
A propriedade font-family define o tipo da fonte e é
utilizada para atributos de textos, ou seja, tags como
<p>, <h1>,
<h2>, <h3>,
<h4>, <h5>,
<h6> e
<figcaption>.
Por padrão, algumas fontes já são instaladas nas máquinas, como Arial, Verdana,
Lucida Sans, Georgia e Times New Roman. Por isso, ao digitar a letra “A” no
font-family, o Visual Basic filtra todas as fontes que
iniciam com essa letra.
No exemplo, escolhemos a fonte Arial para todos os parágrafos. Note que as fontes sugeridas já vêm agrupadas com outras fontes do mesmo tipo. Então, se houver algum problema com a primeira opção, o navegador automaticamente busca a próxima fonte. No exemplo, se a fonte Arial estiver corrompida na sua máquina, o navegador vai renderizar o HMTL com a fonte Helvetica.
Define o estilo da fonte, como normal,
italic ou oblique.
Na imagem, constam as três opções a título de exemplo, mas escolha apenas uma propriedade em seu seletor.
A propriedade font-style oblique é uma fonte romana
inclinada, possuindo uma variação de 8 a 12 graus. A propriedade
font-style italic cria uma versão mais caligráfica e
inclinada.
Fonte em caixa-baixa (minúscula) convertida em caixa-alta (maiúscula).
Define a espessura da fonte, ou seja, o quão “pesado” ou grosso será o traçado. A
fonte pode ter valor normal ou
bold, porém, é possível determinar um valor entre
100 e 900. Quanto menor
o número, mais fino será o traço da fonte.
Outra maneira possível de editar uma fonte é chamando a propriedade
font e passando alguns valores, como exemplificado na
imagem.
Ao posicionar o mouse sobre a propriedade
<p>, será apresentada uma sequência a ser seguida
para adicionar os valores.
Estilos de linha
O CSS permite estilizar vários tipos de borda em elementos da página, que pode ser uma linha lisa, pontilhada, com bordas arredondadas etc.
As principais propriedades para estilizar as bordas das linhas são:
Dotted: pontilhada.Dashed: tracejada.Solid: sólida.Double: dupla.Groove: com sulcos 3D; o efeito depende do valor da cor da borda.Ridge: 3D estriada; o efeito depende do valor da cor da borda.Inset: inserção 3D; o efeito depende do valor da cor da borda.Outset: inserção 3D; o efeito depende do valor da cor da borda.None: sem borda.Hidden: define uma borda oculta.Mixed: composição de diferentes bordas.
Veja nas imagens a seguir o HTML, o CSS e a renderização.
Eventos
Eventos são ações que ocorrem em um elemento da página web, por exemplo, quando o usuário termina de preencher um formulário, clica no botão “enviar” e aguarda uma mensagem de confirmação para saber se seu formulário foi de fato enviado. Após o clique, pode aparecer uma tela ou uma mensagem com a confirmação de que o formulário foi enviado.
Alguns eventos são codificados na linguagem de programação JavaScript, enquanto outros não. Veja na ferramenta online um exemplo de evento com CSS.
Conheça outros eventos com CSS clicando aqui (arquivo em pdf).
Agora, confira na ferramenta online um exemplo de evento no JavaScript.
Dica
Você pode adicionar a tag <script> antes ou depois da tag
<body>. O recomendado é que ela venha após o código em
HTML5, pois, dessa forma, a página será carregada mais rapidamente.
Responsividade
Responsividade é o termo técnico utilizado para designar uma página da web que se adapta a diversos tipos de resoluções, resultando em um layout agradável ao usuário final. Um dos pilares básicos do RWD (responsive web design ou, em português, design responsivo) é a fundação flexível: técnica para que seu layout possua um grid fluído, utilizando medidas relativas ao definir um tamanho ou uma altura para o componente do HTML5.
Um site pode ter suas medidas categorizadas em pixels, porcentagem ou em.
Clique nas abas a
seguir para conhecer melhor essas unidades de medida.
Um pixel corresponde à menor unidade (quadrados) presente em uma tela. Quando definimos um valor em pixels, a página ficará estática, ou seja, não irá se adaptar a diversos tipos de resoluções.
Ao passar um valor para o atributo, as medidas não precisam estar em números inteiros.
A porcentagem é uma medida relativa ao tamanho do bloco, seja ele o pai ou o
body. Por exemplo, sabemos que o
body corresponde a 100% da largura da tela (seja qual for
o dispositivo). Ao adicionar uma imagem com a propriedade de 50% de
width, a imagem será adaptada ao tamanho da tela, ou seja,
independentemente do dispositivo, ela ocupará 50% da tela.
Em ou quadratim é uma medida relativa que surgiu com a tipografia. Isso significa que 1
em equivale a 16px para o browser. É utilizado como uma propriedade do
font-size.
Algo importante para se atentar é a conversão de uma medida para a outra.
A última etapa para desenvolver um layout responsivo é o uso da propriedade media
query. É nessa propriedade que você selecionará um elemento e adaptará certas
medidas para determinadas resoluções, após ter realizado a estilização em toda página; ou seja, você
determinará uma nova medida de width (largura),
height (altura) e font-size (tamanho de
fontes) para os elementos de sua página. Dessa maneira, o conteúdo será adaptado a determinadas
resoluções.
Para aprender como usar o media query na prática, clique aqui (arquivo em pdf).
Bootstrap
Bootstrap é um framework web gratuito para o desenvolvimento de componentes do Front-End para sites e aplicações web que utilizam HTML, CSS e JavaScript, melhorando a experiência do usuário e deixando o site amigável e responsivo.
Temos duas opções para incluir o bootstrap em nosso projeto:
- adicionar
<links>disponíveis na documentação do site; e - baixar o framework na máquina.
Clique aqui e acompanhe o passo a passo das duas opções pelo pdf.
Agora, iremos compreender sua estrutura básica, antes de iniciar a prática. O
bootstrap possui um sistema de grid, composto de
containers, row e
columns.
Container
O container é um bloco que agrupará demais elementos em seu layout, que podem ser:
container: possui uma largura fixa. A delimitação do seu bloco é mais centralizada. Tem ummax-witdhem cada ponto de interrupção.container-fluid: possui uma largura total, ou seja, abrange toda a largura da página. Tem umwidthde 100% em todos os pontos de interrupção.
A seguir, analise uma tabela que apresenta larguras para diferentes tamanhos de telas:
| Extra pequena < 576px |
Pequena ≥ 576px |
Média ≥ 768px |
Grande ≥ 992px |
Extra grande ≥ 1220px |
Extra extra grande ≥ 1400px |
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sn |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Fonte: [https://getbootstrap.com/docs/5.0/layout/containers/]
Tanto a classificação container quanto a
container-fluid são class responsivas.
Caso prefira, é possível adicionar uma class com o
respectivo tamanho para uma determinada parte de seu código:
No entanto, caso opte por usar .container ou
.container-fluid, o responsivo será adaptado da menor até a maior
resolução.
Row
Rows são linhas horizontais utilizadas para fazer divisões no layout.
Fonte: [https://bootstrapcreative.com/bootstrap-4-grid-explained-examples/]
Columms
Columms é um sistema de grade construído na
arquitetura flexbox. As colunas são elementos filhos do
container (container ou
container-fluid). Como vimos anteriormente,
container e container-fluid são
delimitações de tamanho divididos, internamente, por colunas, sendo 12 o número máximo.
Fonte: [Fonte: [https://www.c-sharpcorner.com/article/bootstrap-grid-system/]
Veja, na ferramenta online, o código na primeira janela e a renderização na segunda.
Agora você irá acompanhar a instalação do Bootstrap em um projeto. Entendida a estrutura básica do Bootstrap, você irá conhecer os componentes navBar e dropdown
Clique no player e assista à sequência de 3 vídeos.
Clique aqui para aprender a usar componentes navBar e dropdown (arquivo em pdf).
Criação de layout
A criação de um layout é feita a partir de elementos das tags do HTML5 e
da estilização do CSS3. Você estudou que a documentação do código HTML se inicia pela tag
<html> e finaliza com a tag
</html>, bem como que todas as tags que irão no
<head> serão lidas pelo desenvolvedor e navegador, mas apenas o
que estiver dentro da tag <body> será visto pelo usuário (corpo
do HTML).
HTML
CSS
Renderização
Vamos acrescentar mais divs, sendo que cada
div representará um espaço da página:
header (cabeçalho), conteúdo e footer
(rodapé). Personalizaremos todos os componentes, mantendo um padrão para o tamanho e a altura;
mudaremos apenas o valor do background.
HTML
CSS
Renderização
Caso queira montar sua página e deixar componentes um ao lado do outro, ou seja, duas colunas dentro de uma mesma div, é possível criar um elemento pai e, dentro dele, dois filhos.
HTML
CSS
Observe que as propriedades envolvidas são
float-left (flutuar na esquerda) e
float-right (flutuar na direita).
Além das divs, há muitos outros elementos a serem inseridos em um site, como imagens, botões e formulários.
Para baixar o arquivo pdf que trata de imagens e de carrossel, clique aqui.
Para acessar o arquivo pdf sobre botões, clique aqui.
Clique aqui para aprender a montar um formulário (arquivo em pdf).
Código semântico e acessibilidade
O código semântico é um termo que se refere à estrutura de criação do corpo do código em HTML5. O
HTML possui uma estrutura básica que diz respeito a cada sessão do site, ou seja, para criar um
cabeçalho, não se deve utilizar a tag <footer>, mas, sim, a
tag <header>.
Ao utilizar as tags corretas para cada sessão do site, além de seguir a estrutura adequadamente, a acessibilidade na web é valorizada. Dessa maneira, é possível criar uma página acessível para todo tipo de público, resultando em uma experiência agradável a todos os usuários, inclusive àqueles que tenham alguma deficiência, por exemplo, a visual.
Para compreender melhor, é importante você conhecer o conceito de acessibilidade na web, segundo a Cartilha Acessibilidade na Web, do site W3C Brasil:
Acessibilidade na web significa que pessoas com deficiência podem usar a web. Mais especificamente, a acessibilidade na web significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela também beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudança devido ao envelhecimento.(W3C Brasil. Cartilha Acessibilidade na Web. Disponível em: https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-I.html. Acesso em: 26 mar. 2021.)
Portanto, ao projetar um site que seja acessível, é possível que pessoas com deficiência visual, entre outros tipos de deficiência permanentes ou não, também possam navegar e entender o conteúdo proposto. Mas como isso é feito?
A acessibilidade é garantida por meio da semântica do código. Esse tipo de público pode utilizar
ferramentas que farão a leitura da estrutura do site, ou seja, irão ler e compreender cada parte
constituinte do código. Ao ler um site que utiliza <footer> em vez
de <header> no cabeçalho, por exemplo, a ferramenta repassará essa
informação ao usuário, causando confusão em razão da inadequação estrutural.
Saiba mais
A acessibilidade na web possui regulamentação. Você poderá encontrar mais informações nos atos normativos listados a seguir:
- Decreto n.º 5.296, de 2 de dezembro de 2004, Capítulo VI;
- Comitê CB-40 da ABNT;
- Decreto n.º 6.949, de 25 de agosto de 2009;
- Lei de Acesso à Informação, n.º 12.527, de 18 de novembro de 2011.
Clique aqui para acessar o site do Planalto e conferir o texto do Decreto n.º 5.296/04 na íntegra.
Versionamento
Qualquer projeto, seja para a criação de um sistema online, seja para a criação de um software, pode ser desenvolvido por uma equipe que esteja trabalhando em conjunto, ainda que cada um o faça em sua própria máquina. Imagine que esse projeto seja o e-commerce de uma loja de jogos e será desenvolvido por uma equipe de três pessoas. Cada pessoa recebeu uma demanda: uma foi designada para desenvolver o código da página home; outra para desenvolver o código da página de hardware; e, por último, outra para desenvolver o Back-End.
Para que o código seja compartilhado entre eles, existem meios de gerenciar cada uma dessas versões, de manter o histórico de alterações, de voltar para versões anteriores, caso necessário, e de acessar o código-fonte como estava antes de ser alterado.
O versionamento de código é realizado por um sistema de controle de versões. Aqui, optamos pelo sistema gratuito Git.
Clique aqui para saber como usar o Git (arquivo em pdf).
Vamos Praticar
1. Considere o código abaixo e relacione corretamente os elementos que compõem a estrutura sintática do CSS:
p {font-family: arial;}
a. font-family: arial; |
|
b. p |
|
c. font-family |
|
d. arial |
2. Dado o trecho de HTML a seguir, identifique qual alternativa representa a
sintaxe correta do CSS, para estilizar tamanho, cor e espessura da fonte de uma
class.
<section class="titulos">
<h1>Bem-vindo!</h1>
</section>
Atenção
Selecione uma alternativa.
Parabéns! Resposta correta.
As class são chamadas no CSS por um ponto antes do nome
e as tags filhas, no caso h1, precisam do caminho
completo.
Ops! Tente novamente.
Lembre-se de que devemos chamar as tags filhas com o caminho completo e que
id/class são representadas por caracteres diferentes.
Ops! Resposta incorreta.
A resposta correta é a alternativa e.
class são chamadas no CSS por um ponto antes do nome e
as tags filhas, no caso h1, precisam do caminho
completo.
Retome o conteúdo de class e
id e revise a sintaxe do CSS.
3. Dado os códigos HTML e CSS, escolha a alternativa que representa a renderização de ambos.
HTML
<p class="class"> CSS</p>
<p id="id">HTML</p>
CSS
#id {font: italic bold 20px arial; color: DarkSlateBlue;}
.class {font: 30px times; color: DeepPink;}
Atenção
Selecione uma alternativa.
Parabéns! Resposta correta.
A alternativa c representa a renderização correta dos códigos mostrados.
Ops! Tente novamente!
Redobre a atenção ao analisar estilo, peso, tamanho, família e cor da fonte, além do caminho do seletor no CSS.
Ops! Resposta incorreta.
A resposta correta é a alternativa
c.
Retome o conteúdo sobre class e
id e sobre estilo de fontes.
Neste desafio...
Situação problema | Desafio 2
Neste desafio, você estudou linguagem de estilização e como aplicá-la na sua linguagem de marcação (HTML5). Além de criar um código com o puro CSS3, no tópico sobre responsividade.
No próximo desafio...
Você vai conhecer e integrar o JavaScript ao projeto.
Orientações de Navegação
Veja abaixo as orientações de como navegar pelo curso.
No topo da página é exibido o nome da
unidade curricular.
Indicador de progresso da aula.
Acesso aos principais recursos da página.
Direciona ao início do curso, bem antes do primeiro desafio.
Menu com a relação das seções da unidade curricular.
Exibe as orientações de navegação.
Aumenta ou diminui o tamanho da fonte.
Exibe a tela de glossário da unidade.
Ajusta o contraste da tela.
Exibe a tela de créditos do curso.
Orientações para os exercícios:
Os exercícios contidos nos desafios do curso não fazem
parte da composição da nota.
Para refazer os exercícios, atualize a página
clicando no ícone 
, localizado ao lado
da barra de endereço do navegador, ou pressione a tecla F5.
Título da seção 
Buscar outra seção dentro do desafio 
Glossáriospellcheck
Atributo: Declara uma característica da tag, modificando sua estrutura ou funcionalidade.
Content: Especifica o conteúdo do metadado.
DOM: Document Object Model ou DOM é a interface do HTML lida pelo browser e apresentada para o usuário.
Entities: Entity é um caractere especial, sempre iniciado com
&, como 
(non-breaking space) ou 
(A maiúsculo com til ou Ã) ou 
(a minúsculo
com til ou ã), entre outros.
Framework: Frameworks possuem um modelo ou uma estrutura de códigos prontos a serem seguidos, que permitem que os programadores desenvolvam sites mais rapidamente.
Metadados: Informações que descrevem um dado principal. No HTML, são informações sobre o próprio documento.
Name: É o atributo que especifica o nome do metadado e que tipo de
informação ele contém.
Ponto de interrupção: Medida a partir da qual o elemento assume outro valor para
max-width.
Renderizá-las: Renderizar é obter o produto final de um processo digital. No caso do HTML, significa ver a interpretação gráfica do código, ou seja, ver como fica o código em um navegador.
Responsivo: Responsividade é a capacidade de reagir ou responder de forma esperada ou apropriada em determinada situação. No caso, uma imagem responsiva adapta-se ao tamanho do dispositivo utilizado.
Aviso
Parece que você já iniciou o curso, você pode: