Ficha 02 · Construir um layout responsivo

Parte I · Verdadeiro ou Falso (20 pts)

Indica V ou F e justifica.

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

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)

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>