WDD 131: Fundamentos da Web Dinâmica

S01 – Atividade de Aprendizagem: Revisão de HTML e CSS

Visão Geral

Esta atividade de aprendizagem é uma revisão dos princípios de layout do HTML e CSS, com foco no design e desenvolvimento do layout principal. Dominar o processo de fluxo de trabalho (escrever código no VS Code, testar, confirmar e enviar seu trabalho para seu repositório GitHub) é essencial para seu êxito no curso.

Tarefa

Crie o seguinte layout.

Captura de Tela de Revisão de Layout do HTML e CSS
Revisão de Layout do HTML e CSS

Objetivos Adicionais de Aprendizagem do Curso

Desenvolver páginas web responsivas que sigam as melhores práticas e usem HTML e CSS válidos.

Preparação

Instruções da Atividade

Configuração de Arquivo e Pasta

Exemplo de Captura de Tela de Configuração de Arquivo e Pasta no VS Code
Captura de Tela da Estrutura de Arquivos
  1. No VS Code, adicione uma nova subpasta chamada "semana01" dentro da pasta do repositório local wdd131.
  2. Adicione um arquivo chamado "layout-basico.html" à pasta semana01.
  3. Adicione uma nova subpasta dentro da pasta semana01, chamada "estilos".
  4. Crie um arquivo CSS externo de suporte chamado "layout.css" e coloque-o na pasta estilos.

HTML

  1. No arquivo layout-basico.html, use HTML semântico para compatibilidade com o layout fornecido.

    Considere usar um atalho do Emmet no VS Code digitando html5 ou apenas !, e então pressionar a tecla Tab em uma tela em branco no documento HTML. Esta ação criará uma estrutura HTML básica.

  2. Certifique-se de que o elemento do contêiner de navegação esteja dentro do elemento header.
  3. Inclua o conteúdo do espaço reservado (por exemplo, "Conteúdo do Header", etc.).
  4. Vincule o arquivo CSS externo.
  5. Sempre use conteúdo de title apropriado. Nesta tarefa, inclua seu nome e WDD 131.

CSS

  1. Use CSS Grid no corpo do documento para dar suporte ao layout fornecido.

    Normalmente, você deve evitar usar Grid no elemento <body> porque seria mais difícil sobrescrever estilos para seções específicas e devido à manutenibilidade com layouts mais complexos. Se você precisar usar Grid no elemento <body>, considere usar um elemento contêiner separado para o corpo e então aplicar Grid a esse contêiner. A página desta atividade tem uma estrutura simples com seções claramente definidas, portanto, usar Grid no <body> é uma escolha eficiente.

  2. Use CSS Flex no menu de navegação.
  3. Você é quem escolhe o esquema de cores e a família de fontes.

Teste da Página

  1. Verifique seu trabalho carregando sua página no navegador usando o Live/Five Server por meio do VS Code.
  2. Valide seu HTML e CSS.
  3. Use o DevTools Lighthouse para uma análise mais detalhada do desempenho, da acessibilidade e da adesão da sua página às melhores práticas.

    "DevTools" é uma abreviação de "Ferramentas do Desenvolvedor". Refere-se a um conjunto de ferramentas ou utilitários fornecidos pelos navegadores da web para ajudar os desenvolvedores a depurar, criar perfis e analisar páginas da web durante o processo de desenvolvimento. As ferramentas podem ser acessadas pressionando a tecla de função F12 ou selecionando as ferramentas do desenvolvedor no menu do navegador.
    – O que são ferramentas do desenvolvedor do navegador? – MDN

Avalie Seu Conhecimento

  1. Confirme (commit) e envie (push) seu trabalho para o repositório do GitHub Pages.
  2. Aguarde alguns minutos para que o servidor seja atualizado e, em seguida, verifique a renderização da sua página em um navegador.
    Qual é o URL habilitado para o GitHub Pages na sua página? 
    https://seu-nome-de-usuario-do-github.github.io/wdd131/semana01/layout-basico.html
    Parece com a captura de tela de exemplo acima? Caso contrário, faça correções e faça push em suas alterações.
  3. Teste/audite o HTML e CSS básicos da sua página usando esta ferramenta de auditoria de página.
  4. Continue fazendo correções e ajustes conforme necessário e lembre-se de fazer commit e push das alterações.