Esta tarefa utiliza os conceitos apresentados nas atividades de aprendizagem em uma página de álbum de imagens
que responde em visualizações pequenas e maiores. Esta página utilizará um menu "hambúrguer" e responderá às
solicitações dos usuários.
Objetivos Adicionais de Aprendizagem do Curso
Desenvolva páginas web responsivas que sigam as melhores práticas e usem HTML e CSS válidos. Demonstrar
proficiência na sintaxe da linguagem JavaScript. Usar JavaScript para responder a eventos e modificar HTML
de forma dinâmica.
Tarefa
Crie, desenvolva, teste e implante uma página de álbum do templo usando suas próprias seleções de fotos do
templo.
Exemplo de captura de tela na Visualização MóvelExemplo de captura de tela na Visualização MaiorDemonstração de Comportamento Responsivo
Instruções
Configuração de Arquivo e Pasta
No VS Code, abra a pasta do repositório local wdd131.
Crie um novo arquivo chamado "templos.html".
Adicione dois arquivos CSS chamados "templos.css" e "templos-grandes.css" ao
diretório "estilos".
Adicione um arquivo JavaScript chamado "templos.js" ao diretório "scripts".
HTML
No documento templos.html, inclua o documento HTML padrão e os elementos
<head>.
Adicione links aos arquivos CSS na ordem correta para dar suporte ao desenvolvimento mobile
first.
Adicione uma referência <script> adiada ao arquivo JavaScript.
Em <body>, crie um layout básico usando os elementos header,
main e footer como elementos estruturais principais.
O elemento <header> contém:
texto que diz "Álbum do Templo"
menu <nav> com os seguintes links de texto:
Página Inicial
Antigo
Novo
Grande
Pequeno
O elemento <main> contém o seguinte:
elemento de título <h1>
pelo menos 9 (nove) elementos <figure> com imagens de templos e legendas. Use os
elementos de legendas de figuras incorporados e dê um nome ao templo
Não há problema se você tiver uma única imagem de templo a esta altura do curso.
O elemento <footer> contém as mesmas informações dinâmicas e estáticas encontradas na sua
página inicial da semana passada.
Exemplo de Captura de Tela de Rodapé Comum
CSS
Use os arquivos externos templos.css e templos-grandes.css para criar o layout e
o estilo da página, conforme mostrado nos exemplos de capturas de tela. Seu design deve ser compatível com uma
visualização responsiva em dispositivos móveis e em visualizações maiores.
O arquivo templos.css é usado para a visualização móvel e o arquivo
templos-grandes.css é usado para a visualização maior. A maior parte do seu CSS deve estar
localizada no arquivo templos.css no design mobile first.
Use seu próprio esquema de cores.
Observe: Você é responsável por praticar bons princípios de design de alinhamento,
contraste de cores, proximidade, repetição e espaço em branco consistente.
Use sua própria escolha de tipografia usando o serviço Google Fonts API para escolher uma ou duas fontes para usar na página.
A navegação deve usar um efeito de hover. Consulte o CodePen acima para ver
um exemplo.
Avalie Seu Conhecimento
Considere usar a pseudoclasse hover para alterar o design do item de menu que tem o foco.
nav a:hover { ... }
O elemento main tem uma largura limitada e é centralizado na tela horizontalmente.
Avalie Seu Conhecimento
Considere usar a propriedade max-width para limitar a largura; e a propriedade
margin para centralizar o elemento principal na tela.
/* Este é apenas um exemplo a ser considerado */
main {
max-width: 800px;
margin: 0 auto;
}
Disponha os elementos figure da coluna principal usando CSS Grid. Na
visualização móvel, deve haver apenas 1 (uma) coluna.
A aplicação do CSS Grid para dar suporte a uma visualização responsiva fica por sua conta.
Algumas das opções poderiam ser:
use alterações fr específicas em grid-template-column para pesquisa de mídia
(media query)
use a propriedade grid-template-column com uma função repeat e
auto-fit e uma função minmax.
Para melhorar a organização e a manutenção, é necessário colocar todo o código JavaScript em arquivos externos.
Garanta que o ano dos direitos autorais no elemento footer e a data da última modificação sejam
exibidos por meio de uma referência JavaScript válida. Você já tem uma ou pode usar o arquivo
templos.js.
Use um efeito de hambúrguer responsivo no seu menu de navegação existente com JavaScript.
O botão de hambúrguer só deve ser exibido na visualização móvel.
Clicar no botão de hambúrguer alterna os itens do menu de navegação de visíveis para não visíveis.
Use um símbolo, como um "X", para fechar o menu de hambúrguer.
Teste
Sempre verifique seu trabalho renderizando a página localmente usando o Live/Five Server no VS Code.
Use o DevTools do navegador para verificar erros de tempo de execução do JavaScript no console ou
clique no ícone vermelho de erro no canto superior direito do DevTools.
Use CSS Overview do DevTools para verificar o contraste de cores.
Gere o relatório do DevTools Lighthouse e execute diagnósticos de
Acessibilidade, Melhores Práticas e SEO nas visualizações de
dispositivos móveis e desktop.
É melhor testar sua página em uma janela privada ou anônima do navegador.
Recarregue a página usando Empty Cache and Hard Reload (Esvaziar Cache e Recarregar) no
DevTools com a aba Network (Rede) aberta para visualizar o total de bytes
transferidos na parte inferior da aba. Verifique se a página tem menos de 500 kB.
Certifique-se de que todas as imagens estejam otimizadas.
Não use bibliotecas de terceiros que aumentam o tamanho da sua página com recursos e código não
utilizados.
Auditoria e Envio
Confirme (commit) em seu repositório local e envie (push), ou carregue, seu trabalho para seu repositório
wdd131 habilitado para GitHub Pages no GitHub.
Use esta ☑️ ferramenta de auditoria para verificar padrões e
requisitos básicos de HTML e CSS.
Compartilhe seu trabalho publicando seu URL no fórum semanal do curso no Microsoft
Teams e comente o trabalho de seus colegas dando feedback construtivo.
Volte ao Canvas e envie o URL correto habilitado para o GitHub Pages.
