WDD 130: Fundamentos da Web

S03 Atividade Guiada de Programação: Melhoria da Página Inicial

Siga o vídeo de atividade guiada de programação para atualizar o layout da sua página inicial do curso.

Instruções

1. Abra sua página inicial, index.html, para editá-la.
2. Adicione uma lista não ordenada <ul> à sua página inicial.
   • A lista deve estar localizada no elemento main, no final (antes da tag de fechamento </main>).
   • Sua lista deve ter pelo menos 3 (três) itens, listando seus templos favoritos.
   • Os templos listados devem ser links de texto para uma página com detalhes do templo usando a Lista de templos em churchofjesuschrist.org ou a Lista de templos na página de Notícias- (conteúdo em inglês) ou, não oficialmente, os Templos da Igreja de Jesus Cristo dos Santos dos Últimos Dias - (conteúdo em inglês).
   • Esses links devem abrir uma nova aba do navegador quando selecionados.

   Dicas
   Elemento Lista Não Ordenada – MDN
   Atributo HTML <a> – w3schools
   

   Avalie Seu Conhecimento

   <ul>
     <li><a href="https://www.churchofjesuschrist.org/temples/details/philadelphia-pennsylvania-temple" target="_blank">Templo de Filadélfia Pensilvânia</a></li>
     <li><a href="https://www.churchofjesuschrist.org/temples/details/paris-france-temple" target="_blank">Templo de Paris França</a></li>
     <li><a href="https://www.churchofjesuschrist.org/temples/details/lima-peru-los-olivos-temple" target="_blank">Templo de Berlim Alemanha</a></li>
   </ul>

3. Abra sua página estilos.css para editá-la.
4. Na parte superior do documento, crie uma regra CSS para o seletor universal (curinga) contendo três declarações:
   • Defina a propriedade abreviada margin como 0.
   • Defina a propriedade abreviada padding como 0.
   • Defina a propriedade box-sizing como border-box.

   Definir o seletor universal para ter margem e padding de 0 (zero) garantirá que todos os elementos na página não terão margem nem padding, independentemente dos padrões do navegador. Isso facilitará o controle do layout da página.

   Quando a propriedade border-sizing é definida como o valor não padrão de border-box, isso informa ao navegador para considerar qualquer borda e padding nos valores que você especificar para a largura e altura de um elemento. – Box-sizing – MDN

   Avalie Seu Conhecimento

             * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

5. Adicione um comentário CSS na parte inferior da sua folha de estilo que crie um cabeçalho de comentário para uma seção chamada "Seletores de Classe". Você colocará as regras dos seletores de classe abaixo desse comentário.
   Avalie Seu Conhecimento

   /* Seletores de Classe */

6. Adicione um seletor de classe ao seu CSS após o comentário. Dê a ele o nome de "caixa".
   • Estilize a classe caixa com propriedades básicas de box model para margem, borda e padding.
   • Defina o valor da margem e do padding como 1rem, ou seja, correspondendo ao tamanho da fonte raiz.
   • Adicione também decorações da cor de fundo e cores do seu próprio design.
   • Remova qualquer duplicação dessas propriedades da regra de CSS aside.
   Avalie Seu Conhecimento

   .caixa {
     margin: 1rem;
     border: 1px solid rgb(0 0 0 / 10%);
     padding: 1rem;
     background-color: #ddd;
     color: #000;
   }

   Exemplo de regra aside ajustada. (Seu comentário pode ter outras propriedades. Isto é apenas um exemplo.)

   aside {
     width: 20em;
     text-align: center;
   }

   Você esqueceu o ponto final (.) na sua sintaxe ao definir a classe caixa?
7. No seu HTML, dê ao elemento aside uma classe caixa.
   Avalie Seu Conhecimento

   <aside class="caixa">

8. No seu HTML, dada a lista de elementos ul de templos, uma classe caixa.
   Avalie Seu Conhecimento

   <ul class="caixa">

   Você está observando e anotando as mudanças executando o Live/Five Server (local) enquanto faz alterações e cria sua página?
9. Use o CSS para mudar sua imagem de perfil para a direita com float. O parágrafo deve vir logo depois da imagem. Se a sua apresentação for muito curta, talvez seja necessário adicionar mais conteúdo para garantir que o layout pareça apropriado.

   

   Avalie Seu Conhecimento

             main img {
     /* você provavelmente terá outras declarações CSS aqui */
     float: right;
   }

10. 

    Usando o posicionamento absoluto do CSS, sobreponha o elemento de título de estado/país na imagem dentro do elemento aside.
    Isso significa que você precisará colocar o recipiente aside para ter a declaração position: relative; .
    Avalie Seu Conhecimento

    Esses números para cima e para a esquerda podem não funcionar no caso da sua imagem. Isto é apenas um exemplo.

    aside h2 {
      position: absolute;
      top: 47px;
      left: 150px;
    }

11. Na barra de navegação nav HTML, adicione mais 2 (dois) links <a>:
    • um link externo para seu perfil do LinkedIn, se você tiver um.
      Caso você não tenha um perfil, adicione um link para https://linkedin.com
    • um link externo para a sua página do Facebook, se você tiver uma.
      Se você não tiver ou preferir não compartilhar sua conta, crie um link para https://facebook.com

Teste

1. Certifique-se de salvar e testar frequentemente sua página no local, usando a extensão Live/Five Server no VS Code.
2. Revise seu trabalho usando a lista de verificação de padrões de desenvolvimento do curso.
3. Confirme (commit) e sincronize sua página com seu repositório wdd130 remoto habilitado para GitHub Pages.
4. Publique perguntas de acompanhamento no Microsoft Teams, usando o canal Fórum da Semana 03.
5. Visualize seu arquivo HTML publicado em um navegador para verificar se tudo funcionou corretamente.

   Dica: O URL publicado estará localizado em
   https://seu-nomedeusuario.github.io/wdd130.

Envio

Por favor, pause e assista novamente a quaisquer partes do vídeo do instrutor necessárias até que você tenha concluído toda a atividade e sua página da mesma forma que o do instrutor. Quando tiver terminado:

• Volte ao Canvas para responder ao questionário.