WDD 130: Fundamentos da Web

S04 Atividade Guiada de Programação: Melhorias no Layout da Página Inicial

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

Instruções

1. Abra sua página inicial do curso, index.html e a folha de estilo, estilos.css, para editá-las.
2. Refatore o CSS das regras combinadas de header e footer para definir uma largura máxima de 840 pixels e centralizar o conteúdo na página. Você adicionará a seção main posteriormente.
   Avalie Seu Conhecimento

   header, footer {
     max-width: 840px;
     margin: 0 auto;
   }

   Isso significa que você deve excluir a propriedade max-width dos seletores header, main e footer, se necessário.

3. Use CSS Flex para fazer com que os links de navegação sejam exibidos horizontalmente na tela. O menu deve ser justificado com espaçamento uniforme e centralizado na barra de navegação. Lembre-se de aplicar a declaração CSS Flex ao contêiner.
   Avalie Seu Conhecimento

   nav {
     background-color: steelblue;
     padding: 1rem;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
   }

4. Se você ainda não adicionou um link para o seu perfil do LinkedIn (ou para o LinkedIn em geral) e para o seu perfil do Facebook (ou para o Facebook em geral), adicione esses links ao menu de navegação nav.
5. Altere as tags de âncora para que sejam elementos de bloco com padding e sem decoração de texto. Você também pode aplicar outros estilos relevantes.
   Avalie Seu Conhecimento

   nav a {
     display: block;
     padding: 0.5rem;
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: 700;
     color: #fff; /* abreviação para branco */
   }

6. Adicione uma borda inferior ao elemento h1 do título.
7. No seu arquivo HTML, coloque os elementos main e aside em um elemento div com um atributo class chamado "grid".
8. No seu arquivo CSS, adicione o seletor .grid ao seletor CSS header, footer para também torná-lo parte de max-width e margin.

   header, footer, .grid {

9. Transforme o novo div em uma exibição de CSS grid com o elemento aside à esquerda e o elemento main à direita.

   Há pelo menos duas maneiras de fazer isso. Escolha uma. Não ambas.

   • Use grid-template-columns para definir as colunas e suas larguras.
   • Use grid-column e grid-row para definir a posição dos itens da grade (main e aside).
   Avalie Seu Conhecimento

   .grid {
     display: grid;
     align-items: center;
   }
       
   main {
     grid-column: 2/3;
     margin: 1rem;
   }
       
   aside {
     width: 20rem;
     position: relative;
     grid-column: 1/2;
     grid-row: 1/2;
   }

   Observe que o seletor aside precisa aplicar grid-row, enquanto o seletor main não. Isso ocorre devido à ordem na estrutura HTML.

Teste

• Compare sua página com a lista de verificação de padrões de desenvolvimento.
• Verifique se há violações de contraste de cores no nível AA usando a ferramenta DevTools CSS Overview.

• Confirme (commit) e sincronize suas alterações no seu repositório wdd130 habilitado para o GitHub Pages.

• 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

• Valide o HTML e o CSS da sua página renderizada.
• Publique suas perguntas no Microsoft Teams, usando o canal da Semana 04.

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.