Emmet: Projeto 2

Nas aulas 1–16 você aprendeu atalhos HTML (8 operadores) + atalhos CSS (3 aulas: fundamentos, correspondência difusa, gradientes) + Ações (5 aceleradores de edição). Esta aula é o fechamento de todo o tutorial Emmet: combinando todo o conhecimento de atalhos CSS para escrever uma landing page SaaS responsiva de 110 linhas. Alice usa atalhos HTML + atalhos CSS para ir de arquivo vazio a página completa em 30 minutos.

1. O Que Você Vai Aprender

• Decomposição de seções HTML: Dividir a landing page em 5 seções (cabeçalho / hero / funcionalidades / preços / rodapé), mapeando cada uma para um fragmento de atalho Emmet
• Atalhos CSS na prática: Usando m10-20 p10-0 bgc#fff bdrs8 fz16 fw700 e atalhos semelhantes para escrever propriedades CSS em uma linha
• Grade responsiva: Usando grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) para grades de cartões auto-responsivas
• Navegação fixa: Usando position:sticky + top:0 para fixar a barra de navegação durante a rolagem
• Fundos com gradiente CSS: Usando linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) para fundos da seção Hero

2. A História Real de Uma Desenvolvedora Full-Stack

(1) Ponto de Dor: 5 Seções + Responsivo + 3 Breakpoints — 200 Linhas HTML + 100 Linhas CSS à Mão

Alice é desenvolvedora full-stack em uma empresa SaaS. É agosto de 2026 e ela precisa de uma landing page para um novo recurso, com o objetivo de converter 100 usuários de teste gratuito no dia do lançamento. O design tem 5 seções:

Total: 1 cabeçalho + 1 hero + 4 cartões + 3 planos + 1 rodapé = 10 elementos de seção. Alice estima HTML escrito à mão: 200 linhas (incluindo detalhes de aninhamento) + CSS 100 linhas (responsivo + 3 breakpoints). Total 300 linhas, 4–5 horas.

Ainda pior: é fácil perder detalhes CSS ao codificar à mão (border-radius: 8px faltando = cartões sem cantos arredondados; direção de box-shadow errada). Alice pensa: a parte HTML pode ser acelerada com tudo das aulas Emmet 1–13; mas e a parte CSS? Escrever 100 linhas de CSS à mão é trabalho braçal — existe uma maneira de acelerar isso também?

(2) A Solução de Atalho Duplo HTML + CSS do Emmet

Alice abre o VSCode, pressiona ! para expandir o esqueleto HTML, depois usa atalhos HTML do Emmet para escrever o body:

header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{Funcionalidades})+(li>a{Preços})+(li>a{Contato})+a.btn.btn-sm{Teste Grátis}
section.hero>(span.badge{v3.0 Lançado})+h1{Automatize Seu Fluxo de Trabalho}+p.lead{Conecte mais de 200 apps, construtor visual sem código}+.cta-row>(a.btn-primary{Comece Grátis})+(a.btn-outline{Ver Demo})+ul.badges>(li{Sem cartão de crédito})+(li{Configuração em 5 minutos})+(li{+10000 equipes})
section.features>h2{Funcionalidades Principais}+p.section-lead{Recursos poderosos}+.grid>.card*4>(h3{Funcionalidade})+p{Descrição})
section.pricing>h2{Preços}+p.section-lead{Escolha o plano certo para sua equipe}+.grid>.card.plan*3>(h3{Plano}+p.price{R$99}+ul>li*3{Funcionalidade}+a.btn{Selecionar})
footer.footer>p{© 2026 CloudFlow}

Depois, no bloco <style>, ela usa atalhos CSS do Emmet:

* { m0 p0 }
body { ff:system-ui lh1.6 }
.nav { d:f jc:sb ai:c p16-24 }
.btn { p12-24 bdrs6 fw600 td:n }
.card { bgc#fff bdrs12 p32 box-shadow:0 2px 8px #0001 }
.btn-primary { bgc#3498db c#fff }
.btn-outline { bgc:transparent c#3498db bd2s #3498db }
.hero { p80-24 bg:lg(135deg, #f5f7fa, #c3cfe2) }

Alice escreve 110 linhas de HTML + 40 linhas de CSS em 30 minutos — 8–10x mais rápido que codificar à mão. A parte CSS comprime 100 linhas escritas à mão em 40 com atalhos Emmet (aceleração CSS de 1,5x também).

(3) Benefícios

Alice completou o "Projeto 2" em 30 minutos para a landing page — 8–10x mais rápido que codificar à mão — com zero atributos faltantes em HTML e zero erros de digitação em CSS. O maior benefício são os atalhos CSS — escrever 100 linhas de CSS à mão costumava levar 1,5 horas (digitação manual + copiar e colar), agora são 30 minutos (abreviações CSS do Emmet + Tab). Esta aula é o fechamento de todo o tutorial Emmet — domine o atalho duplo HTML + CSS e aumente a eficiência diária de codificação front-end em 3–5x.

3. Estrutura da Landing Page: Mapeando 5 Seções para Operadores Emmet

A tabela abaixo mapeia todas as 5 seções para operadores Emmet — esta é a etapa crítica de "decomposição de requisitos".

4. Atalhos Emmet da Parte HTML

Os 3 exemplos a seguir constroem da menor unidade à composição completa — demonstrando a mentalidade "de uma vez" da landing page.

▶ Exemplo: Barra de Navegação header>nav>a.logo{CF}+ul.menu>(li>a)*3 (Dificuldade: ★)

A seção mais comum: header envolvendo nav, nav contendo logo + lista de menu + CTA.

Abreviação:

header>nav>a.logo{CF}+ul.menu>(li>a)*3

Expansão:

<header>
  <nav>
    <a class="logo" href="">CF</a>
    <ul class="menu">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

Saída: Renderiza como uma estrutura header + nav padrão com 1 logo + 3 itens de menu vazios. <a> usa href="" por padrão (placeholder padrão do Emmet).

TEXT 📖 Somente leitura

📋 Copy

Explicação: 3 pontos de sintaxe principais —
- `header>nav`: Aula 04 filho
- `a.logo{CF}`: Aula 07 classe + Aula 09 texto
- `(li>a)*3`: Aula 06 agrupamento + Aula 05 multiplicação (repete todo o bloco li>a 3 vezes)
6 linhas de HTML, atalho de 28 caracteres — taxa de compressão 1:4,7.

▶ Exemplo: Seção Hero section.hero>(span.badge+h1+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline)) (Dificuldade: ★★)

O visual principal da landing page: emblema + título + descrição + dois botões CTA.

Abreviação:

section.hero>(span.badge{Novo Lançamento}+h1{Automatize Seu Fluxo de Trabalho}+p.lead{Conecte Mais de 200 Apps}+.cta-row>(a.btn-primary{Comece Grátis})+(a.btn-outline{Ver Demo}))

Expansão:

<section class="hero">
  <span class="badge">Novo Lançamento</span>
  <h1>Automatize Seu Fluxo de Trabalho</h1>
  <p class="lead">Conecte Mais de 200 Apps</p>
  <div class="cta-row">
    <a class="btn-primary" href="">Comece Grátis</a>
    <a class="btn-outline" href="">Ver Demo</a>
  </div>
</section>

Saída: Renderiza como a seção Hero da landing page: emblema de versão + título grande + descrição + dois botões CTA.

TEXT 📖 Somente leitura

📋 Copy

Explicação: O segmento Hero é um caso clássico de agrupamento + aninhamento de múltiplos níveis —
- `(span.badge+h1+p.lead+.cta-row>...)`: Aula 06 agrupamento + Aula 04 irmãos + filho
- `.cta-row>(a.btn-primary)+(a.btn-outline)`: agrupamento aninhado dentro de agrupamento (uso avançado da Aula 06)
- Tag implícita `.cta-row` expande para `<div class="cta-row">` (Aula 03 tags implícitas)
8 linhas de HTML, atalho de 85 caracteres — taxa de compressão 1:10,6.

▶ Exemplo: Landing Page Completa (5 Fragmentos de Atalho → 110 Linhas HTML) (Dificuldade: ★★★)

Encadeie os atalhos das 5 seções (cabeçalho / hero / funcionalidades / preços / rodapé) para obter o esqueleto completo da landing page:

Abreviação:

header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{Funcionalidades})+(li>a{Preços})+(li>a{Contato})+a.btn{Teste Grátis}+section.hero>(span.badge{v3.0 Lançado})+h1{Automatize Seu Fluxo de Trabalho}+p.lead{Conecte Mais de 200 Apps}+.cta-row>(a.btn-primary{Comece Grátis})+(a.btn-outline{Ver Demo})+section.features>h2{Funcionalidades Principais}+p.section-lead{Recursos Poderosos}+.grid>(.card*4>(h3{Funcionalidade})+p{Descrição}))+section.pricing>h2{Preços}+p.section-lead{Escolha o plano certo}+.grid>(.card.plan*3>(h3{Plano}+p.price{R$99}+ul>li*3{Funcionalidade}+a.btn{Selecionar}))+footer.footer>p{© 2026 CloudFlow}

Pressione Tab e expanda para 110 linhas de HTML (veja §6. Exemplo Completo para a saída completa).

Saída: Renderiza como uma landing page SaaS completa — cabeçalho com logo + 3 itens de menu + CTA; hero com emblema + h1 + lead + dois botões; funcionalidades com 4 cartões; preços com 3 planos; rodapé com direitos autorais.

TEXT 📖 Somente leitura

📋 Copy

Explicação: O exemplo principal desta aula — 5 fragmentos de atalho Emmet encadeados em 110 linhas de HTML.
- 5 operadores `+`: 4 conexões de irmão (Aula 04)
- Múltiplos `>`: aninhamento filho
- `*3` / `*4`: Aula 05 multiplicação
- `()`: Aula 06 agrupamento
- `.card.plan` / `.btn-primary`: Aula 07 múltiplas classes
- `{texto}`: Aula 09 preenchimento de texto
Combina toda a sintaxe de atalho HTML das aulas 1–16. **Insight chave**: 95% do HTML da landing page pode ser Emmet-izado; a digitação manual representa apenas 5% (pequenos ajustes no conteúdo real, como símbolos e direitos autorais).

5. Atalhos Emmet da Parte CSS

Atalhos CSS são novos nesta aula — atalhos HTML (aulas 1–10) + atalhos CSS (aulas 11–13) + Ações (aulas 14–16): todos os três juntos formam a cadeia de ferramentas completa do Emmet.

▶ Exemplo: Navegação Responsiva nav{display:flex} (Dificuldade: ★)

O atalho CSS transforma display:flex de 18 caracteres em 2 caracteres.

Abreviação:

nav{display:flex}

Expansão:

nav { display: flex; }

Saída: O seletor CSS nav recebe display: flex; — filhos do nav dispostos horizontalmente.

TEXT 📖 Somente leitura

📋 Copy

Explicação: Regras de análise de atalho CSS do Emmet —
- `nav` é o seletor CSS
- `{display:flex}` é o bloco de regra CSS
- `display:flex` usa `:` como limite de valor (suportado pelo Emmet)
- O analisador do Emmet encontra o atalho `display` `d` → `display: |;`, insere o valor `flex` em `|`
- Também pode ser escrito na forma abreviada: `nav{d:f}` (`d` → display, `:` limite de valor, `f` → valor flex)

▶ Exemplo: Cartão de Funcionalidade bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001 (Dificuldade: ★★)

5 propriedades CSS em uma linha — combinação principal de atalho CSS.

Abreviação:

.card{bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001}

Expansão:

.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 30px;
  margin: 10px 0;
  box-shadow: 0 2px 8px #0001;
}

Saída: A classe .card recebe 5 estilos: fundo branco, border-radius de 8px, padding de 20px superior/inferior + 30px esquerda/direita, margin de 10px superior/inferior + 0 esquerda/direita, sombra sutil (preto semitransparente a 0,4%).

TEXT 📖 Somente leitura

📋 Copy

Explicação: 5 combinações de atalho CSS —
- `bgc#fff` → `background-color: #fff;` (`#` é o limite de valor, Aula 11 fundamentos CSS)
- `bdrs8` → `border-radius: 8px;` (o número 8 é o limite de valor)
- `p20-30` → `padding: 20px 30px;` (`-` é o separador de múltiplos valores)
- `m10-0` → `margin: 10px 0;`
- `box-shadow:0 2px 8px #0001` → `box-shadow: 0 2px 8px #0001;` (nome completo da propriedade + `:` limite de valor + múltiplos valores separados por espaço)
5 linhas de CSS, atalho de 56 caracteres — taxa de compressão 1:11,2.

▶ Exemplo: Botão CTA bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700 (Dificuldade: ★★)

Combinação comum de estilo de botão — 6 propriedades CSS em uma linha.

Abreviação:

.btn{bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700}

Expansão:

.btn {
  background-color: #2c3e50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}

Saída: A classe .btn recebe 6 estilos: fundo azul-acinzentado escuro, texto branco, padding de 10px superior/inferior + 20px esquerda/direita, border-radius de 4px, font-size de 16px, font-weight 700 (negrito).

TEXT 📖 Somente leitura

📋 Copy

Explicação: 6 atalhos CSS —
- `bgc#2c3e50`: cor hex (sem espaços, aspas após `#` podem ser omitidas)
- `c#fff`: abreviação de `color` + valor de cor
- `p10-20`: abreviação de `padding` + valores duplos
- `bdrs4`: abreviação de `border-radius` (Aula 12 correspondência difusa: `bdr` é insuficiente, `bdrs` corresponde a `border-radius`)
- `fz16`: abreviação de `font-size` (Aula 11)
- `fw700`: abreviação de `font-weight` (sem unidade, Aula 11 valores sem unidade)
6 linhas de CSS, atalho de 47 caracteres — taxa de compressão 1:7,8.

6. Exemplo Completo: Landing Page Responsiva — 110 Linhas HTML + 40 Linhas CSS

Expanda os 5 fragmentos de atalho HTML + 12 fragmentos de atalho CSS para obter uma landing page responsiva completa de 110 linhas. Este exemplo é o fechamento desta aula — sem botão "Experimente" (conforme especificação v2.5 gate #26, exemplos abrangentes não são pré-visualizados no editor).

Parte HTML (aulas Emmet 1–13 combinadas):

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - Plataforma de Automação de Fluxo de Trabalho</title>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a class="logo" href="/">CF</a>
      <ul class="menu">
        <li><a href="#features">Funcionalidades</a></li>
        <li><a href="#pricing">Preços</a></li>
        <li><a href="#contact">Contato</a></li>
      </ul>
      <a class="btn btn-sm" href="/signup">Teste Grátis</a>
    </nav>
  </header>
  <section class="hero">
    <span class="badge">v3.0 Lançado</span>
    <h1>Automatize Seu Fluxo de Trabalho</h1>
    <p class="lead">Conecte mais de 200 apps, construtor visual de fluxo de trabalho sem código</p>
    <div class="cta-row">
      <a class="btn-primary" href="/signup">Comece Grátis</a>
      <a class="btn-outline" href="#demo">Ver Demo</a>
    </div>
    <ul class="badges">
      <li>Sem cartão de crédito</li>
      <li>Configuração em 5 minutos</li>
      <li>Confiável por mais de 10000 equipes</li>
    </ul>
  </section>
  <section id="features" class="features">
    <h2>Funcionalidades Principais</h2>
    <p class="section-lead">Recursos poderosos para tornar seus fluxos de trabalho mais eficientes</p>
    <div class="grid">
      <div class="card">
        <h3>Construtor Visual</h3>
        <p>Interface de arrastar e soltar — construa fluxos de trabalho complexos sem escrever código</p>
      </div>
      <div class="card">
        <h3>Mais de 200 Integrações</h3>
        <p>Conecte-se com Slack, GitHub, Salesforce e mais de 200 apps populares</p>
      </div>
      <div class="card">
        <h3>Colaboração em Equipe</h3>
        <p>Edição colaborativa em tempo real, gerenciamento de permissões — equipes mantêm fluxos de trabalho juntos</p>
      </div>
      <div class="card">
        <h3>Segurança Empresarial</h3>
        <p>Certificado SOC 2, criptografia de ponta a ponta — atende aos requisitos de conformidade empresarial</p>
      </div>
    </div>
  </section>
  <section id="pricing" class="pricing">
    <h2>Preços Simples e Transparentes</h2>
    <p class="section-lead">Escolha o plano ideal para sua equipe</p>
    <div class="grid grid-pricing">
      <div class="card plan">
        <h3>Grátis</h3>
        <p class="price">R$0<span>/mês</span></p>
        <ul>
          <li>5 fluxos de trabalho</li>
          <li>1.000 execuções/mês</li>
          <li>Suporte da comunidade</li>
        </ul>
        <a class="btn btn-outline" href="/signup">Comece Agora</a>
      </div>
      <div class="card plan highlight">
        <h3>Pro</h3>
        <p class="price">R$12<span>/mês</span></p>
        <ul>
          <li>Fluxos de trabalho ilimitados</li>
          <li>50.000 execuções/mês</li>
          <li>Suporte prioritário por email</li>
        </ul>
        <a class="btn btn-primary" href="/signup">Atualizar Agora</a>
      </div>
      <div class="card plan">
        <h3>Empresarial</h3>
        <p class="price">R$35<span>/mês</span></p>
        <ul>
          <li>Tudo do Pro</li>
          <li>Execuções ilimitadas</li>
          <li>Gerente de conta dedicado</li>
        </ul>
        <a class="btn btn-outline" href="/contact">Fale com Vendas</a>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="footer-grid">
      <div>
        <h4>Produto</h4>
        <ul>
          <li><a href="#features">Funcionalidades</a></li>
          <li><a href="#pricing">Preços</a></li>
        </ul>
      </div>
      <div>
        <h4>Recursos</h4>
        <ul>
          <li><a href="#">Documentação</a></li>
          <li><a href="#">API</a></li>
        </ul>
      </div>
      <div>
        <h4>Empresa</h4>
        <ul>
          <li><a href="#">Sobre Nós</a></li>
          <li><a href="#">Fale Conosco</a></li>
        </ul>
      </div>
    </div>
    <p class="copyright">&copy; 2026 CloudFlow. Todos os direitos reservados.</p>
  </footer>
</body>
</html>

Parte CSS (aulas Emmet 11–13 combinadas):

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; color: #2c3e50; line-height: 1.6; }
.header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; }
.nav { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.menu { display: flex; gap: 24px; list-style: none; }
.menu a { color: #34495e; text-decoration: none; font-weight: 500; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s; }
.btn-primary { background: #3498db; color: #fff; }
.btn-outline { background: transparent; color: #3498db; border: 2px solid #3498db; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.hero { padding: 80px 24px; text-align: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.hero h1 { font-size: 48px; margin-bottom: 16px; }
.hero h1 .accent { color: #3498db; }
.lead { font-size: 20px; color: #7f8c8d; max-width: 720px; margin: 0 auto 32px; }
.cta-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 32px; }
.badges { display: flex; gap: 24px; justify-content: center; list-style: none; color: #7f8c8d; }
.features { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.section-lead { text-align: center; color: #7f8c8d; max-width: 600px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.card { background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.pricing { padding: 80px 24px; background: #f8f9fa; }
.grid-pricing { max-width: 1100px; margin: 32px auto 0; }
.plan { text-align: center; }
.plan.highlight { border: 2px solid #3498db; transform: scale(1.05); }
.price { font-size: 36px; font-weight: 700; color: #2c3e50; margin: 16px 0; }
.price span { font-size: 16px; color: #7f8c8d; font-weight: 400; }
.footer { background: #2c3e50; color: #ecf0f1; padding: 40px 24px; text-align: center; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 800px; margin: 0 auto 24px; }
.copyright { color: #95a5a6; font-size: 14px; }
@media (max-width: 640px) { .nav { flex-direction: column; gap: 12px; } .grid { grid-template-columns: 1fr; } }

Saída: O navegador renderiza uma landing page SaaS completa: cabeçalho fixo (fixa no topo ao rolar) + seção Hero (fundo gradiente + título grande + CTAs duplos) + Funcionalidades (4 cartões responsivos, empilham automaticamente no mobile) + Preços (3 planos, o do meio destacado) + Rodapé (links escuros em 3 colunas + direitos autorais). Responsivo: mobile (< 640px) cartões em coluna única, desktop (> 640px) grade de 4 colunas.

TEXT 📖 Somente leitura

📋 Copy

Explicação: O exemplo abrangente desta aula reúne todo o conhecimento Emmet das aulas 1–13 —
- **Parte HTML**: 95% gerado por atalhos Emmet (5 fragmentos do §4): cabeçalho + hero + funcionalidades + preços + rodapé — 5 seções
- **Parte CSS**: 12 blocos de atalho Emmet cobrindo estilos principais: `nav{display:flex}`, `card{bgc#fff bdrs12 box-shadow:0 2px 8px #0001}`, `hero{bg:lg(135deg, #f5f7fa, #c3cfe2)}`, etc.
- **Responsivo**: alcançado com `grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))` — sem necessidade de media query
- **Navegação fixa**: usando `position:sticky + top:0`
- **Fundo gradiente Hero**: usando `linear-gradient(135deg, ...)`
Comparação de contagem de linhas: escrever 200 linhas HTML + 100 linhas CSS à mão leva 4–5 horas; Emmet 110 linhas HTML + 40 linhas CSS leva 30 minutos. **Tempo total reduzido em 80%**.

❓ Perguntas Frequentes

P: Nos atalhos CSS, existe diferença entre m10-20 e m10 20? R: Sim. m10-20 é sintaxe de atalho Emmet (- separa múltiplos valores), expandindo para margin: 10px 20px;. m10 20 (com um espaço) — a análise do Emmet para no primeiro espaço (espaço é um símbolo de parada), então apenas m10 expande para margin: 10px;, deixando o 20 como está. Atalhos CSS devem usar - ou # e outros limites de valor para separar múltiplos valores.

P: Como o atalho CSS box-shadow:0 2px 8px #0001 é analisado? R: Atalhos CSS do Emmet suportam : como limite de valor. box-shadow:0 2px 8px #0001 é analisado como: propriedade box-shadow (grafia completa) + valor 0 2px 8px #0001 (separado por :). Espaços dentro do valor são preservados como estão (o Emmet não expande atalhos dentro de valores). Se você está acostumado com correspondência difusa do Emmet, também pode escrever bxsh:0 2px 8px #0001 (bxsh é a abreviação difusa para box-shadow, Aula 12).

P: Qual a diferença entre auto-fit e auto-fill em grades responsivas? R: auto-fit permite que colunas existentes expandam para preencher o espaço restante (bom para cartões que devem preencher o contêiner); auto-fill preserva o espaço de trilha vazio (bom para um número fixo de colunas). O exemplo desta aula usa auto-fit + minmax(240px, 1fr): quando o contêiner é largo o suficiente, 4 colunas são mostradas; quando não é, as colunas reduzem automaticamente (1 coluna em telas pequenas, 2 em médias, 3–4 em grandes). Esta é a solução responsiva mais concisa do CSS Grid — sem necessidade de media queries.

P: Qual a diferença entre position:sticky e position:fixed para navegação fixa? R: fixed é relativo à viewport (removido do fluxo do documento, requer reserva manual de espaço); sticky é posicionamento híbrido — rola relativo ao seu contêiner e depois "gruda" quando o contêiner atinge o topo da viewport. O exemplo desta aula usa position:sticky; top:0 para fixar o <header> no topo da viewport ao rolar — mas quando o contêiner pai do <header> rola para fora da vista, sticky rola junto. fixed não tem restrição de contêiner pai (sempre fixo), mas cobre o conteúdo abaixo (precisa de padding-top para reservar espaço). Esta aula usa sticky porque o header é um filho direto do body sem contêineres de rolagem aninhados.

📖 Resumo

• Cadeia mental de 5 seções: cabeçalho + hero + funcionalidades + preços + rodapé — decomponha em 5 fragmentos de atalho Emmet, encadeie em 110 linhas de HTML
• 12 atalhos CSS comuns: * { m0 p0 } body { ff:system-ui lh1.6 } .nav { d:f jc:sb ai:c } .card { bgc#fff bdrs12 box-shadow:0 2px 8px #0001 }, etc.
• Fórmula de grade responsiva: grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) (sem necessidade de media queries)
• Navegação fixa: position:sticky; top:0; z-index:100 (fixa o cabeçalho no topo durante a rolagem)
• Fundos com gradiente CSS: bgc:lg(135deg, #f5f7fa, #c3cfe2) (efeito comum de seção Hero)
• Esta aula é o fechamento: Aulas 1–13 atalho duplo HTML + CSS combinados — aumente a eficiência diária de codificação front-end em 3–5x

📝 Exercícios

1. Básico (Dificuldade: ★): Use atalhos HTML do Emmet + atalhos CSS para escrever uma landing page simples — 5 seções (cabeçalho + hero + funcionalidades + preços + rodapé), pelo menos 30 linhas de HTML + 20 linhas de CSS. Requisitos: (a) parte HTML usa > + * () — pelo menos 3 operadores; (b) parte CSS usa m10-20 bgc#fff bdrs8 — pelo menos 3 atalhos; (c) seção Hero usa fundo linear-gradient.

2. Intermediário (Dificuldade: ★★): Adapte a landing page completa de 110 linhas desta aula para sua própria landing page de produto SaaS — substitua o nome do produto "CloudFlow" pelo seu produto, substitua as 4 funcionalidades pelas suas funcionalidades principais e substitua os nomes e preços dos 3 planos. Requisitos: (a) mantenha a estrutura HTML de 5 seções inalterada; (b) mantenha os estilos CSS de grade responsiva + nav fixa + fundo gradiente; (c) contabilize a contagem final de linhas HTML + CSS vs. quantas linhas levaria escrever a mesma página à mão (tipicamente compressão de 5x para HTML, 3x para CSS).

3. Desafio (Dificuldade: ★★★): Estenda a landing page desta aula em uma página de marketing SaaS completa — adicione uma seção de depoimentos após funcionalidades (3 avaliações de clientes, cada uma com avatar + 5 estrelas + texto + autor) e uma seção de FAQ após preços (5 painéis colapsáveis de Pergunta/Resposta). Requisitos: (a) Página HTML completa de uma vez (uma linha de atalho Emmet para a parte do body); (b) atalhos CSS cobrem 90% das propriedades (não mais que 10 linhas de CSS escritas à mão); (c) Responsivo: mobile — funcionalidades coluna única, depoimentos coluna única; desktop — funcionalidades 4 colunas, depoimentos 3 colunas; (d) FAQ usa <details> + <summary> para painéis colapsáveis nativos (sem JS necessário). Finalmente, escreva um "Relatório de Fechamento Emmet": todo o conhecimento Emmet adquirido nas 18 aulas + seus 3 atalhos mais valiosos + como você planeja usar o Emmet no seu trabalho.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós