aulify · Mini-Projecto
UC UC02651 · T. Multimédia
Versão · Aluno
Mini-Projecto · CSS de uma página responsiva
Flexbox/Grid, variáveis, mobile-first e BEM
Contexto
Cada aluno constrói o CSS completo de uma página web responsiva a partir de um design dado (mockup/wireframe). O HTML pode ser fornecido ou criado em conjunto; o foco da avaliação é o CSS: layout, responsividade, variáveis, organização e boas práticas.
Design dado
Uma página de uma página (one-page) com: header (logo + menu), hero (título + texto + botão + imagem), secção de cards (3-6 itens), secção alternada (texto + imagem), e footer. O design define cores, tipografia e espaçamentos.
Requisitos
Funcionais
- Mobile-first com media queries (pelo menos 2 breakpoints).
- CSS Grid para a estrutura/grelhas e Flexbox para componentes (header, botões).
- Custom properties (variáveis) para cores, espaçamentos e tipografia.
- Tipografia fluida com
clamp()em pelo menos um elemento. - Nomenclatura BEM (ou utility-first consistente) e CSS organizado por secções.
- Estados: hover em botões e links; foco visível (acessibilidade).
Não-funcionais
box-sizing: border-box, especificidade baixa, sem!importantdesnecessário.- Fiel ao design dado (cores, espaçamentos, hierarquia).
Fases
| Fase | Tempo | Entregável |
|---|---|---|
| 1. Análise do design + variáveis | 1.5h | Tokens (cores, espaços, fontes) |
| 2. Estrutura mobile (base) | 2h | Página mobile a funcionar |
| 3. Layout desktop (Grid/Flex) | 2h | Responsividade nos breakpoints |
| 4. Componentes + estados | 2h | Cards, botões, hover/focus |
| 5. Refinamento + organização | 1.5h | Código limpo, BEM, fiel ao design |
| 6. Revisão + apresentação | 1h | Demo responsiva (DevTools) |
Critérios
| Item | Peso |
|---|---|
| Fidelidade ao design | 15% |
| Layout (Grid + Flexbox) | 20% |
| Responsividade mobile-first | 20% |
| Variáveis e clamp() | 15% |
| Organização e BEM | 15% |
| Estados e acessibilidade | 10% |
| Qualidade do código (especificidade, box-sizing) | 5% |
Reflexão
Em meia página: onde usaste Grid e onde usaste Flexbox, e porquê? Como as variáveis te ajudaram? Que parte da responsividade foi mais difícil de acertar?