WDD 131: Fundamentos da Web Dinâmica

S06 — Descrição de Projeto

Visão Geral

O projeto final do site é uma avaliação abrangente que lhe dá a oportunidade de demonstrar seu domínio dos resultados de aprendizagem do curso em HTML, CSS e JavaScript. Para o projeto, você criará um site dinâmico e responsivo que segue os padrões de desenvolvimento.

Requisitos do Projeto

Este projeto será criado e desenvolvido por você. É proibido consultar e trabalhar com outras pessoas ou grupos no projeto. O conteúdo e o assunto vêm da sua proposta de tópico, e o site deve estar completo, sem espaços reservados. As imagens e o breve texto podem ser referenciados de outras fontes, e você precisará citá-las em uma página separada. Coloque um link para esta página de referência (que não precisa de estilo) no rodapé (footer) do seu site.

Seu projeto deve atender às seguintes especificações funcionais e de desenvolvimento.

Estas são as especificações mínimas para o projeto. Recomendamos que você vá além desses requisitos para demonstrar seu domínio dos resultados de aprendizagem do curso.

  1. Seu projeto de site deve ser hospedado no GitHub e renderizado pelo GitHub Pages.
  2. O site deve ser composto por pelo menos 3 (três) páginas com navegação e tema comuns que atraiam o público-alvo.
  3. O site deve ter conteúdo significativo e relevante que dê suporte ao propósito do site, conforme descrito no seu planejamento do site.
  4. O design deve oferecer suporte à acessibilidade, usabilidade, apelo visual e princípios de design.
  5. Estruture as páginas com marcação HTML válida e baseada em padrões.
  6. Estilize o site com CSS válido que não contenha declarações e regras não utilizadas e desnecessárias (duplicadas).
  7. Crie um estilo de site que seja responsivo a dispositivos móveis (retrato e paisagem) e a telas maiores sem violar os princípios de design PARC (Proximidade, Alinhamento, Repetição e Contraste).
  8. Todas as imagens devem ser otimizadas.
  9. Use uma técnica de carregamento lento para dar suporte ao design progressivo.
  10. Utilize um formulário HTML que atenda aos padrões apresentados no curso.
  11. O site deve ter elementos dinâmicos com tecnologia Javascript, incluindo os seguintes:
    • ✔ Ter mais de uma função;
    • ✔ Incluir interação DOM, inclusive selecionar um elemento, modificá-lo e ouvir e reagir a eventos;
    • ✔ Usar branch condicional;
    • ✔ Usar objetos, arrays e métodos de array;
    • ✔ Usar exclusivamente template literal ao construir strings para saída;
    • ✔ Usar localStorage.
  12. Certifique-se de que não haja erros ortográficos ou gramaticais.
  13. Conclua o projeto até o prazo final.

Este curso online tem como objetivo ajudar você a aprender como construir sites dinâmicos e responsivos usando as principais tecnologias web contemporâneas de HTML, CSS e JavaScript. Modelos de terceiros NÃO são permitidos. Páginas criadas a partir de software de criação de sites ou ferramentas de arrastar e soltar ou que sejam baseadas em sites existentes não são permitidas e não levarão a nenhum crédito neste projeto.

Teste

  1. 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.
  2. Use CSS Overview do DevTools para verificar o contraste de cores.
  3. Gere o relatório do DevTools Lighthouse e execute diagnósticos de Desempenho, Acessibilidade, Melhores Práticas e SEO nas visualizações de dispositivos móveis e desktop.

Envio

  1. Seu projeto deve ser armazenado em sua própria subpasta dentro do seu repositório wdd131.
  2. Volte ao Canvas e envie o URL do projeto.