Desenvolvimento de Página Web
com HTML, CSS e JavaScript
Criar uma interface web interativa que simule a construção de um Currículo Vitae (CV). O estudante
deverá aplicar os conhecimentos de HTML, CSS e JavaScript.
• Estruturar páginas web com navegação via menu.
• Criar uma página estilizada com o seu CV Completo utilizando elementos de HTML e CSS.
• Criar um Formulário Completo utilizando os principais elementos de formulários como caixa
de texto, caixa de selecção como checkbox, combobox, radio button, textarea entre outros
da linguagem HTML.
• O formulário deve validar os dados com JavaScript antes do envio.
• Exibir os dados preenchidos em uma nova página dinâmica, gerada via JavaScript.
Estrutura do Projecto:
1. Página inicia com o Menu de Navegação (em todas as páginas)
o O site deverá ter um menu fixo no topo com pelo menos 2 itens:
▪ CV Individual → Página inicial simples, apresentando o CV fictício de um
estudante (exemplo de currículo já preenchido).
▪ Formulário → Página com o formulário de preenchimento do CV.
2. Página de CV Individual
o A página incluir os seguintes elementos:
▪ Fotografia: Imagem tipo passe, exibida em formato circular.
▪ Deve estar centralizada e com borda decorativa (opcional).
▪ Dados Pessoais: Nome, Data de Nascimento, Endereço, E-mail, Telefone (e
outros)
▪ Formação Acadêmica: Lista de cursos ou níveis de escolaridade já
concluídos ou em andamento.
▪ Competências / Habilidades: Lista com ícones ou marcadores destacando
habilidades técnicas ou interpessoais.
▪ Idiomas: Indicação dos idiomas que o estudante domina, com níveis de
fluência.
▪ Links no rodapé para Redes Sociais ou Portfólio: Ícones clicáveis para
Facebook, LinkedIn, GitHub, ou outras plataformas.
3. Página do Formulário ([Link])
o O formulário deve incluir os seguintes elementos:
▪ Fotografia: campo para upload de imagem tipo passe.
▪ Dados Pessoais: Nome, Data de Nascimento, Endereço, E-mail, Telefone
(inputs de texto).
▪ Gênero: opções em radio button.
▪ Áreas de Interesse: opções em checkbox.
▪ Nível Acadêmico: select/combobox.
▪ Experiência Profissional: textarea.
▪ Idiomas: select com múltipla seleção.
▪ Upload de Arquivo: anexar CV em PDF.
o Botões de Ação:
▪ Enviar:
▪ Deve validar os campos obrigatórios com JavaScript.
▪ Caso haja erro, exibir mensagens de alerta e retornar ao
formulários;
▪ Se estiver tudo correcto, os dados devem ser enviados para uma
nova página ([Link]).
▪ A exibição será feita dinamicamente com JavaScript (armazenar os
dados em localStorage ou passar via URL/query string).
▪ Limpar: deve apagar todos os campos do formulário.
4. Página de Resultado ([Link])
o Deve recuperar os dados enviados pelo formulário via JavaScript (usando
localStorage ou parâmetros da URL).
o Apresentar os dados formatados como se fossem um Currículo Vitae pronto.
o Incluir a fotografia carregada (se possível) ou um avatar padrão.
Instruções Técnicas:
• O projecto deve ser entregue em uma única pasta compactada (ZIP), contendo pelo menos:
o [Link] → Página inicial com o CV individual (exemplo pronto).
o [Link] → Página do formulário.
o [Link] → Página que exibe os dados preenchidos.
o [Link] → Ficheiro CSS externo para estilização.
o [Link] → Ficheiro JS externo para validação e manipulação de dados.
• O menu deve estar presente em todas as páginas, garantindo navegação entre elas.
• O CSS deve ser utilizado para: layout, fontes, cores, espaçamento, bordas e responsividade
básica.
• O JavaScript deve ser utilizado para:
o Validar o formulário antes do envio.
o Exibir mensagens de erro ao utilizador.
o Transferir os dados do formulário para a página de resultado.
Resultado Esperado:
No final da actividade, o estudante terá construído uma mini-aplicação web com:
1. Menu de navegação entre páginas.
2. Um formulário interativo e validado em JavaScript.
3. Um CV exibido dinamicamente com os dados fornecidos pelo utilizador.
4. Utilização conjunta e organizada de HTML, CSS e JavaScript externos.
