Ficha 02 · Construir um layout responsivo · Ficha de trabalho

Aluno(a)

Turma

Nº

Data

Objectivos da ficha

Layout responsivo
Mobile-first
Variáveis e BEM

Parte I · Verdadeiro ou Falso (20 pts)

Indica V ou F e justifica.

Na abordagem mobile-first, usa-se min-width nas media queries para acrescentar estilos em ecrãs maiores. (5 pts)
clamp(1rem, 4vw, 2rem) cria um valor fluido entre 1rem e 2rem. (5 pts)
Na nomenclatura BEM, card__titulo representa um modificador do bloco card. (5 pts)
O gap funciona tanto em Flexbox como em Grid para espaçar os itens. (5 pts)

V — Mobile-first parte do base (mobile) e usa min-width para crescer.
V — clamp devolve o valor ideal (4vw) limitado entre o mínimo (1rem) e o máximo (2rem).
F — card__titulo é um elemento (__); o modificador usa -- (ex: card--destaque).
V — gap aplica-se a ambos para espaçar itens (substitui margens entre itens).

Parte II · Planear o layout (30 pts)

Recebes a seguinte wireframe descrita de uma página:

Desktop (≥1024px):
┌───────────────────────────────────┐
│ HEADER (logo esquerda, menu direita)│
├──────────┬────────────────────────┤
│ SIDEBAR  │ CONTEÚDO                │
│ (240px)  │ (grelha de 3 cards)     │
├──────────┴────────────────────────┤
│ FOOTER                             │
└───────────────────────────────────┘

Mobile (<768px): tudo em coluna; sidebar passa para baixo do conteúdo;
cards em 1 coluna.

Descreve a estratégia de layout (que técnica para cada zona, mobile-first) antes de escrever código. (30 pts)

Estratégia de layout (referência)

Estrutura geral (10 pts) - Mobile-first: base em coluna (tudo empilhado), depois min-width para desktop. - Página principal com CSS Grid: em mobile, uma coluna; em desktop, duas colunas (sidebar 240px + conteúdo 1fr) e linhas para header/main/footer. - Alternativa: grid-template-areas para clareza.

Header (5 pts) - Flexbox: justify-content: space-between + align-items: center (logo / menu).

Conteúdo — cards (8 pts) - Grid: em mobile 1 coluna; em desktop repeat(3, 1fr) (ou auto-fit, minmax).

Sidebar (4 pts) - Em mobile aparece depois do conteúdo (ordem natural ou order); em desktop, à esquerda (240px fixos).

Responsividade (3 pts) - Breakpoint principal a 768px (mobile→tablet) e 1024px (layout de 2 colunas). - Unidades relativas + gap para espaçamento.

(Avaliar: Grid para a página, Flex no header, grelha de cards responsiva, mobile-first, posição da sidebar por breakpoint.)

Parte III · Escrever o CSS completo (50 pts)

Implementa o CSS do layout da Parte II, cumprindo: - Mobile-first com media queries. - CSS Grid para a estrutura da página e para os cards. - Flexbox no header. - Pelo menos 3 custom properties (variáveis). - Nomenclatura BEM.

Considera o HTML:

<header class="header"> <div class="header__logo"></div> <nav class="header__nav"></nav> </header>
<div class="layout">
  <aside class="layout__sidebar"></aside>
  <main class="layout__conteudo">
    <div class="cards">
      <article class="cards__item"></article>
      <article class="cards__item"></article>
      <article class="cards__item"></article>
    </div>
  </main>
</div>
<footer class="footer"></footer>

:root {
  --cor-primaria: #4F46E5;
  --espaco: 1rem;
  --sidebar-w: 240px;
  --max-w: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; font-family: system-ui, sans-serif; }

/* HEADER — Flexbox */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--espaco) calc(var(--espaco) * 2);
  background: var(--cor-primaria);
  color: #fff;
}
.header__nav { display: flex; gap: var(--espaco); }

/* LAYOUT — mobile-first: 1 coluna */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--espaco);
}

/* Em mobile, a sidebar aparece depois do conteúdo */
.layout__sidebar { order: 2; }
.layout__conteudo { order: 1; }

/* CARDS — mobile: 1 coluna */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco);
}
.cards__item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: var(--espaco);
}

/* FOOTER */
.footer {
  padding: calc(var(--espaco) * 2);
  text-align: center;
  background: #f5f5f5;
}

/* TABLET+ : cards em 3 colunas */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* DESKTOP : sidebar + conteúdo lado a lado */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: var(--sidebar-w) 1fr;
  }
  .layout__sidebar { order: 0; }   /* volta para a esquerda */
  .layout__conteudo { order: 0; }
}

Critérios: - Mobile-first (base + min-width). - Grid na .layout (1 col → sidebar+conteúdo) e nos .cards (1 → 3 colunas). - Flexbox no header. - ≥ 3 custom properties usadas. - BEM respeitado. - box-sizing: border-box. - Bónus: ordem da sidebar a mudar por breakpoint.