aulify · Mini-Projecto
UC UC02833 · T. Desenv. Software
Versão · Aluno
Mini-Projecto · Landing page responsiva e acessível
Construir um site real do zero, mobile-first
Contexto
Cada par/trio constrói uma landing page completa para um produto/serviço fictício (app, evento, restaurante, portfólio). Foco em HTML semântico, CSS moderno, responsivo mobile-first e acessibilidade. Sem JavaScript obrigatório (HTML/CSS puro; JS opcional para extras).
Requisitos
Funcionais
- 5+ secções: hero, features, testemunhos, preços, contacto/footer.
- Navbar responsiva (hamburger em mobile).
- Formulário de contacto com validação HTML5.
- Galeria/grid de pelo menos 6 cards.
- 3 breakpoints (mobile, tablet, desktop).
Não-funcionais
- HTML semântico (zero
<div>onde há tag semântica). - CSS com variáveis (design system).
- Lighthouse: Acessibilidade ≥ 90, Best Practices ≥ 90.
- Validação W3C sem erros.
- Deploy público (Netlify / GitHub Pages / Vercel) + Git.
Fases
Fase 1 · 1.5h
Planeamento e wireframe
- Escolher tema/produto.
- Wireframe mobile + desktop (papel ou Figma).
- Definir paleta e tipografia.
Wireframes + moodboard (1 página).
Fase 2 · 2h
Estrutura HTML
- Markup semântico de todas as secções.
- Formulário com tipos e validação correctos.
- Sem CSS ainda (estrutura pura).
index.html válido (W3C).
Fase 3 · 2h
CSS base e design system
- Variáveis CSS (cores, espaços, tipografia).
- Reset/normalize + box-sizing.
- Estilizar componentes base (botões, cards).
style.css com design system.
Fase 4 · 2h
Layout (Flexbox + Grid)
- Navbar com Flexbox.
- Galeria com Grid responsivo.
- Layout de página completo.
Página com layout desktop completo.
Fase 5 · 1.5h
Responsivo
- Media queries mobile/tablet/desktop.
- Hamburger menu (CSS-only via checkbox, ou JS).
- Testar em DevTools (vários tamanhos).
Site funcional em mobile, tablet e desktop.
Fase 6 · 1h
A11y, polish e deploy
- Auditoria Lighthouse + axe.
- Corrigir contraste, alt, labels, foco.
- Deploy + README.
URL público + repositório Git + relatório Lighthouse.
Critérios de avaliação
| Item | Peso |
|---|---|
| HTML semântico e válido | 15% |
| CSS organizado (variáveis, sem !important) | 15% |
| Flexbox + Grid bem usados | 15% |
| Responsivo (3 breakpoints) | 20% |
| Acessibilidade (Lighthouse ≥ 90) | 20% |
| Deploy funcional | 5% |
| Design e coerência visual | 5% |
| Git + README | 5% |
Reflexão
Em meia página: o que foi mais difícil — layout, responsivo ou acessibilidade? Que parte do site terias feito diferente? Como esta página se ligaria a um backend (UC seguinte)?