3ª Avaliação: Personalização de um Site Responsivo
Professor Ábner Lucas — IFPA Campus Breves
Programação Web · Técnico em Informática
Transforme o projeto-base em um site com o tema da sua dupla. Personalize, teste e publique o resultado.
🎯 O desafio
Criar, em dupla, uma nova versão do projeto-base, demonstrando os conhecimentos praticados em aula.
Escolham um dos temas e mantenham a estrutura principal da página: cabeçalho, menus, destaque inicial, três cartões e rodapé.
Lanchonete
Apresente três produtos, com imagens, preços e ingredientes.
Galeria de jogos
Apresente três jogos, com imagens, categorias e detalhes.
Cursos e oficinas
Apresente três opções, com imagens, duração e informações.
O projeto-base é o ponto de partida. A versão entregue deverá apresentar a identidade e o conteúdo escolhidos pela dupla.
Uma estrutura, diferentes temas
LanchoneteEsboço da organização
No computador, os cartões ficam lado a lado. Em telas menores, o menu muda de posição e os cartões se reorganizam.
🎨 Personalize o projeto
Comece pelo projeto-base
Baixe o arquivo ZIP com os arquivos iniciais (HTML, CSS sem responsividade, JS e imagens), extraia e abra no VS Code.
HTML — Conteúdo
Troquem o nome do site, a apresentação, os textos dos três cartões e o rodapé. Identifiquem os integrantes.
Imagens — Identidade
Substituam as três imagens. Confiram os caminhos em src e atualizem as descrições em alt.
CSS — Aparência
Escolham uma nova combinação de cores e personalizem um efeito ao passar o cursor sobre um botão ou link.
JavaScript — Interação
Personalizem o texto inicial dos botões no HTML e os textos de abrir e fechar no JavaScript. Mantenham a ação de mostrar e esconder os detalhes.
Ajuste também a responsividade
Apliquem as regras estudadas: menu lateral no computador e acima do conteúdo em telas menores; galeria com três, duas e uma coluna, conforme a largura da tela.
Utilizem os códigos e as anotações das aulas. Cada integrante deve compreender as alterações realizadas.
Como organizar os arquivos
Mantenham index.html, style.css e script.js na pasta principal. Guardem as imagens na pasta img e preservem os caminhos usados no HTML.
| Arquivo | Finalidade |
|---|---|
| index.html | Estrutura e conteúdo |
| style.css | Estilos e responsividade |
| script.js | Ações dos botões |
| img/ | Imagens e ícone do site |
✅ Teste e publique
Confira antes de entregar
0 de 6 itens conferidos (0%)
Como testar a responsividade
Reduza a janela do navegador ou use o modo de dispositivos das ferramentas de desenvolvedor. Confira o menu, os textos, as imagens e as três configurações da galeria: três, duas e uma coluna.
Como publicar no Tiiny.host
- 1Dentro da pasta do projeto, selecione index.html, style.css, script.js e a pasta img. Compacte essa seleção em um arquivo ZIP.
- 2Abra o ZIP e confira: index.html deve aparecer diretamente na raiz. A pasta img deve permanecer com as imagens dentro.
- 3Acesse o Tiiny.host, envie o ZIP e escolha um nome disponível para o endereço do site.
- 4Conclua a publicação e copie o link público. Faça login ou cadastro se a plataforma solicitar.
- 5Abra o link em outro navegador ou no celular e confira o resultado. Confirme que a publicação não está identificada como prévia temporária.
Plano gratuito: um projeto ativo, até 3 MB por projeto e três envios por dia, contando atualizações. Use imagens leves e confira os limites antes de publicar.
Para corrigir o site, gere um novo ZIP e atualize o mesmo projeto no Tiiny.host, preservando o endereço entregue.
📤 Entregue e apresente
O que entregar
- Arquivo ZIP com o projeto completo.
- Link público do site publicado no Tiiny.host.
- Identificação dos dois integrantes.
Envie o ZIP e o link na tarefa da 3ª avaliação, no ambiente indicado pelo professor, dentro do prazo informado.
Cada integrante participa
Explique uma parte do código e realize uma pequena alteração solicitada pelo professor, como trocar uma imagem, mudar uma cor ou ajustar o texto de um botão.
Momento de validação prática: cada estudante demonstra domínio sobre as linhas de código produzidas.
Pontuação da 3ª avaliação
Personalização — 2,0 pontos
Alterações em HTML e CSS verificadas durante o desenvolvimento.
Responsividade e JavaScript — 2,0 pontos
Ajustes de layout e funcionamento dos botões na prática.
Projeto final — 4,0 pontos
Página completa, organizada, funcional e publicada.
Participação individual — 2,0 pontos
Explicação do código e pequena alteração realizada por cada integrante.
A avaliação considera o desenvolvimento em aula, a entrega final e a compreensão individual do código.