Para desenvolver Aula Prática Desenvolvimento Responsivo, comece identificando os objetivos e as entregas solicitadas no roteiro. A seguir, veja os pontos presentes na descrição desta atividade e organize teu relatório de acordo com as orientações do curso.
O que é esta aula prática?
Antes de começar, leia a apresentação e identifique o tema, a unidade e o formato pedido.
Disciplina: Desenvolvimento Responsivo (aula prática)
Ambiente/Software: Replit (template HTML, CSS, JS; licença freeware conforme roteiro)
Equipamento: computador (1 por aluno) e editor web online
Procedimento prático: criar página com 6 blocos dentro de uma div e implementar responsividade via media queries
Breakpoints e comportamento esperado: 1280px (6 colunas), 768px (3 colunas), 480px (2 colunas), menor que 480px (1 coluna)
Entregável: arquivo PDF com códigos (index.html, style.css), descrição dos procedimentos e imagens da página implementada
O seu trabalho é disponibilizado pronto, respondido e nas normas já na mesma hora aqui em nosso site na sua área de downloads e também no seu e-mail.
Portfólio em Word, respondido, completo e já nas normas
Se estiver acessando pelo computador, escaneie o QR Code abaixo com a câmera do celular para abrir nosso atendimento no WhatsApp.
Como desenvolver a atividade passo a passo
Execute cada etapa na ordem indicada e registre o que foi feito para depois explicar o processo no relatório.
Esta aula prática de Desenvolvimento Responsivo orienta a construção e teste de uma página web simples visando adaptar o layout a diferentes larguras de tela. A atividade é conduzida em um ambiente de edição online (replit.com), usando um template com HTML, CSS e JavaScript, e foca especificamente na implementação de regras de CSS (media queries) para alterar a apresentação conforme breakpoints definidos.
O exercício propõe que o aluno monte uma página HTML contendo seis blocos organizados dentro de uma única div, e que, por meio do arquivo CSS, configure pontos de interrupção para reorganizar as colunas conforme a largura do dispositivo. O trabalho inclui testar a responsividade no editor (botão Run) e gerar um relatório final em PDF com os códigos (index.html e style.css), imagens da página e descrição dos procedimentos realizados.
O que é desenvolvido nesta atividade — Implementar a responsividade prática de uma página web: montar a estrutura HTML com 6 blocos, aplicar estilos base em CSS e usar media queries para criar breakpoints que reorganizam os blocos em 6, 3, 2 e 1 coluna conforme as larguras mínimas configuradas. Realizar os testes no Replit (template "HTML, CSS, JS") e entregar um documento em PDF contendo o código-fonte, passos realizados e capturas da página em diferentes tamanhos de tela.
Como estruturar o relatório
Organize a entrega em identificação da atividade, objetivos, recursos utilizados, descrição dos procedimentos, registros dos resultados e conclusão. Ajuste essa sequência ao modelo exigido pela instituição e inclua apenas observações e evidências obtidas durante a tua própria execução.
Checklist antes de entregar
- Conferir se todos os objetivos do roteiro foram contemplados.
- Descrever os procedimentos na ordem em que foram realizados.
- Inserir registros, imagens ou arquivos quando a atividade solicitar.
- Relacionar os resultados com as tarefas e revisar o formato de entrega exigido.
