WDD 130 | S02 - Tarefa: Aprimorar a Página Inicial

S02 Tarefa: Melhoria da Página Inicial

Visão Geral

Nesta tarefa, você usará os conceitos da atividade de aprendizagem para melhorar sua página inicial com mais HTML e CSS.

Instruções

Atividade de Aprendizagem

Certifique-se de ter concluído as atividades de aprendizagem desta semana antes de iniciar esta tarefa.

Se ainda não concluiu as atividades de aprendizagem, conclua-as antes de prosseguir, ou perderá conceitos importantes necessários para concluir esta tarefa corretamente e passar na auditoria de página.

HTML: Adicione Elementos meta <head>

Abra sua página inicial do curso, index.html, para editá-la.

Adicione duas novas tags meta à sua seção head, ou seja, depois de title e antes do elemento link do arquivo externo CSS. Elas serão meta description e meta author.

<meta name="description" content="Descreva sua página inicial aqui usando palavras-chave como seu nome, o curso, a finalidade da página.">
<meta name="author" content="Seu nome">

HTML: <body>

Na seção do body, adicione um elemento aside após o elemento main existente e antes do footer.

No elemento aside, adicione os seguintes elementos secundários e conteúdo do elemento:

h2 – Seu estado ou país.
img – Uma imagem que pode representar seu estado ou país.

Lembre-se de que todas as imagens devem ser otimizadas.
Esta imagem não pode ter mais de 100 kB de tamanho de arquivo.
p – Um breve parágrafo descrevendo seu estado ou país.

Avalie Seu Conhecimento – Exemplo

...
</main>
<aside>
  <h2>Brasil</h2>
  <img src="imagens/utah.jpg" alt="Paisagem de Utah">
<p>O Brasil é um país localizado na América do Sul. Faz fronteira com a Argentina e o Uruguai ao sul, Paraguai e Bolívia a sudoeste, Peru, Colômbia e Venezuela a noroeste, Guiana, Suriname e Guiana Francesa ao norte, além de possuir uma extensa costa ao longo do oceano Atlântico a leste. O país é um importante centro de agricultura, indústria, energia e tecnologia, além de um relevante destino turístico na região. Brasília é a capital do país, enquanto São Paulo é sua maior cidade. O Brasil abriga uma grande diversidade cultural, étnica e ambiental.</p>
</aside>
<footer>
  ...

CSS

Abra o arquivo estilos.css para editá-lo.
Adicione uma declaração CSS ao seletor main para limitar sua largura por enquanto.
Avalie Seu Conhecimento – Exemplo
```
main {
  max-width: 840px;
}
```
Adicione declarações CSS para as seguintes propriedades de um seletor de elemento aside.
- largura (width)
- margin
- borda (border)
- preenchimento (padding)
- cor de fundo (background color)
- cor (color)
Avalie Seu Conhecimento – Exemplo
```
aside {
  width: 20rem;
  margin: 1rem;
  border: 1px solid rgb(0 0 0 / 0.2); /* 1️⃣ */
  padding: 1rem;
  background-color: #eee;
  color: #333;
  text-align: center;
}
```
1️⃣ A cor da borda usa o método de cor rgb recomendado para aproveitar um efeito de borda sutil e transparente. O valor RGB consiste em quatro valores: vermelho, verde, azul e alfa. Os três primeiros valores (0, 0, 0) representam preto, e o último valor, de .2 (20%), representa o alfa, ou opacidade da cor. Um valor alfa de 0,2 significa que a cor é quase transparente, permitindo que o fundo apareça. Ao usar essa cor de borda, ela fica bem clara e quase imperceptível, bem como proporciona uma indicação visual sutil que ajuda a separar elementos em uma página web. Além disso, pode ajudar a adicionar uma camada de interesse visual ao design sem distrair demais o usuário ou prejudicar o layout geral.
Defina img dentro de aside para ter uma largura de 200 pixels e uma altura auto.

Esta configuração automática garante que não alteramos a proporção das imagens.
Por que isso é importante?
Avalie Seu Conhecimento
```
aside img {
  width: 200px;
  height: auto;
}
```
Alterar a proporção nativa de uma imagem distorcerá ou a deixará com um aspecto pixelado.
Por padrão, o seletor CSS geral img será aplicado às suas imagens. Altere isso para a imagem do perfil, adicionando um seletor pai main com um estilo específico.
```
main img {
  width: 150px;
  height: auto;
  ...
}
```
Altere o valor da propriedade padding do parágrafo p existente para 0 pixels.
Observe que os valores 0 não precisam da especificação das unidades.
```
p {
  padding: 0;
}
```
Aplique CSS ao elemento <footer> para 1️⃣adicionar uma margem superior para separá-lo do conteúdo do elemento main, 2️⃣adicionar uma borda superior para criar uma distinção adicional do conteúdo main e 3️⃣alinhar qualquer texto no footer ao centro da caixa de conteúdo.
Avalie Seu Conhecimento
```
footer {
  margin-top: 15px;
  border-top: 1px solid #000;
  text-align: center;
}
```
Explicação
margin-top especifica que apenas a parte superior do elemento terá uma margem de 15 pixels.
border-top usa uma lista de propriedades abreviada para definir border-width, border-style e border-color em uma declaração em vez de três.
text-align define o alinhamento do texto para o centro.
Teste sua página localmente no seu navegador, usando a extensão Live/Five Server no VS Code, que renderiza a página no seu navegador padrão como uma página web.
Não se esqueça de salvar seu trabalho.

Ajuda

Vídeo: ▶️ Melhoria da Página Inicial

Teste, Corrija e Atualize

Confirme (commit) e sincronize suas alterações no seu repositório wdd130 habilitado para o GitHub Pages.
Execute a ✔ ferramenta de Auditoria de Página desta tarefa para garantir que sua página atenda aos requisitos básicos.
Corrija quaisquer problemas com base no feedback.
Lembre-se de que você precisará confirmar (commit) e sincronizar suas alterações no seu repositório do GitHub e executar novamente a ferramenta de Auditoria de Página até que sua página passe em todas as verificações após as atualizações/alterações.

Caso encontre algum problema ou não tenha certeza de como corrigir um item indicado como incorreto, peça ajuda no Microsoft Teams, usando o canal Fórum da Semana 02.

Envio

Volte ao Canvas para enviar o URL da sua página inicial do wdd130 no GitHub Pages:
```
https://seu-nomedeusuario.github.io/wdd130
```

❌ Envio errado: https://github.com/seu-nomedeusuario/wdd130

❌ Envio errado: Tudo que começa com http://127.0.0.1