🧩 Exercícios Práticos: Cap 07 — Estilização com Scoped CSS, Seletores Globais e Tailwind

Especialização Frontend com Svelte • Trilha de Exercícios Progressivos em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 07.1 — Fixação Conceitual e Sintaxe Inicial

Implemente os conceitos básicos de Estilização com Scoped CSS, Seletores Globais e Tailwind utilizando Svelte 5 e TypeScript.

Resultado Esperado

Componente de Estilização com Scoped CSS, Seletores Globais e Tailwind renderizado e verificado com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_1_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Estilização com Scoped CSS, Seletores Globais e Tailwind
🔑 Gabarito de Código & Solução Comentada 
<!-- 07_estilizacao_scoped_css_e_tailwind_n1.svelte -->
<script lang="ts">
  const titulo = 'Estilização com Scoped CSS, Seletores Globais e Tailwind';
</script>
<div><h2>{titulo}</h2></div>

🔍 Nível 2: Prática

Problema 07.2 — Aplicação com Regras de Negócio

Refatore uma solução simples para aplicar regras de negócio no contexto de Estilização com Scoped CSS, Seletores Globais e Tailwind.

Resultado Esperado

Execução com validação estrita de dados concluída.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_2_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Estilização com Scoped CSS, Seletores Globais e Tailwind
🔑 Gabarito de Código & Solução Comentada 
<!-- 07_estilizacao_scoped_css_e_tailwind_n2.svelte -->
<script lang="ts">
  let statusOk = $state(true);
</script>
<p>Validação: {statusOk ? 'Aprovada' : 'Reprovada'}</p>

🚀 Nível 3: Integração

Problema 07.3 — Cenário Integrado e Tratamento de Erros

Crie um pipeline de integração combinando Estilização com Scoped CSS, Seletores Globais e Tailwind com tratamento de erros e tipagem.

Resultado Esperado

Módulo integrado com sucesso e assertions validadas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_3_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Estilização com Scoped CSS, Seletores Globais e Tailwind
🔑 Gabarito de Código & Solução Comentada 
// 07_estilizacao_scoped_css_e_tailwind_service.ts
export async function executarOperacao(): Promise<boolean> {
  return true;
}

🏆 Nível 4: Desafio Corporativo

Problema 07.4 — Sistema Robusto com Testes e Auditoria

Construa uma solução corporativa completa de alta resiliência aplicando Estilização com Scoped CSS, Seletores Globais e Tailwind.

Resultado Esperado

Sistema corporativo homologado com 100% dos testes e auditoria JSON concluídos.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_4_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Estilização com Scoped CSS, Seletores Globais e Tailwind
🔑 Gabarito de Código & Solução Comentada 
// 07_estilizacao_scoped_css_e_tailwind_enterprise.ts
export class GerenciadorCorporativo {
  executarAuditoria(): { status: string; timestamp: number } {
    return { status: 'OK', timestamp: Date.now() };
  }
}