</>Codding
Tailwind CSS0/10 lições

Módulo 1 • Fundamentos

Responsividade

Ferramentas e leitura
Leitura100%
Aula guiada50–75 min5 etapas práticas

Nesta aula, você vai compreender Responsividade com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Antes de começar: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar.

Ao terminar, você vai conseguir

  • Explicar Responsividade com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática
1

Estrutura

Defina o conteúdo e sua hierarquia.

2

Apresentação

Aplique regras visuais sem perder significado.

3

Verificação

Confira em tamanhos de tela e formas de navegação diferentes.

0/6 atividades
1

Entenda o problema

O que é Responsividade

Grid organiza em duas dimensões (linhas e colunas) ao mesmo tempo. Junto com media queries e unidades relativas, é o que faz a mesma página funcionar no celular e no monitor grande.

Cheque seu entendimento

O que repeat(auto-fit, minmax(240px, 1fr)) faz?

1 de 5

O que você aprendeu

  • Grid organiza em duas dimensões (linhas e colunas) ao mesmo tempo. Junto com media queries e unidades relativas, é o que faz a mesma página funcionar no celular e no monitor grande.
  • O auto-fit com minmax resolve a maior parte dos casos sozinho; a media query entra só para mudar a estrutura em telas grandes.
  • Evite: Largura fixa em px em containers — quebra no celular.
  • Evite: Escrever desktop first e depois brigar com sobrescritas.

Videoaulas sobre este tema

Se você aprende melhor assistindo, abrimos uma seleção de aulas em vídeo em português sobre exatamente este assunto.

Aula em vídeo sobre este temaVídeos em português explicando "Responsividade" passo a passo.Vendo alguém programar issoExemplos práticos, com o código sendo escrito na tela.Playlist completa de Tailwind CSSCurso em vídeo do começo ao fim, para acompanhar junto com o módulo "Fundamentos".

Quiz rápido

0/2 • 0 certas

1. O que repeat(auto-fit, minmax(240px, 1fr)) faz?

2. O que significa 'mobile first'?

Laboratório

1/4

1. Monte a primeira versão

Prática guiada: edite o exemplo abaixo aplicando "Responsividade" e clique em Rodar para ver o resultado ao vivo.

Abrir no playground
  • Checkpoints da prática (1/4)
  • Escreva sua versão a partir do modeloO texto do editor ainda é igual ao modelo inicial. Altere pelo menos uma linha para que a prática conte como sua.
  • Nenhuma lacuna deixada em branco
  • Execute seu códigoClique em “Verificar resposta” para rodar seu código e comparar a saída com o esperado.
  • Resultado ainda não confereEsperado: o programa rodar sem erro. Se aparecer uma mensagem de erro, leia a última linha: ela indica a linha e o tipo do problema.

Tire sua dúvida

Cada resposta é conferida contra o material desta lição antes de aparecer. Sem IA por trás e sem inventar nada.

Responsividade

Tailwind CSS • Módulo 1: Fundamentos • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Responsividade com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Responsividade com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática

Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min

Explicação passo a passo

1. O que é Responsividade

Grid organiza em duas dimensões (linhas e colunas) ao mesmo tempo. Junto com media queries e unidades relativas, é o que faz a mesma página funcionar no celular e no monitor grande.

Checkpoint: O que repeat(auto-fit, minmax(240px, 1fr)) faz? — Resposta: Cria quantas colunas couberem, com largura mínima de 240px

2. Como pensar antes de fazer

grid-template-columns define as colunas. repeat(auto-fit, minmax(240px, 1fr)) cria quantas colunas couberem, com no mínimo 240px cada — layout responsivo sem escrever nenhuma media query.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Responsividade” resolve.

3. Exemplo completo, do início ao resultado

Mobile first: escreva o estilo do celular primeiro e use media query só para telas maiores (min-width). Isso evita cascata de sobrescritas e deixa o caso mais restrito como base.

.cards {
  display: grid;
  gap: 1rem;
  /* quantas colunas couberem, mínimo 240px */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.titulo {
  /* cresce com a tela, mas nunca sai do intervalo */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {
  .conteudo { grid-template-columns: 2fr 1fr; }
}
TrechoO que faz
.cards {Contribui para a transformação principal mostrada neste exemplo.
display: grid;Contribui para a transformação principal mostrada neste exemplo.
gap: 1rem;Contribui para a transformação principal mostrada neste exemplo.
/* quantas colunas couberem, mínimo 240px */Contribui para a transformação principal mostrada neste exemplo.
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));Contribui para a transformação principal mostrada neste exemplo.
}Contribui para a transformação principal mostrada neste exemplo.
.titulo {Contribui para a transformação principal mostrada neste exemplo.
/* cresce com a tela, mas nunca sai do intervalo */Contribui para a transformação principal mostrada neste exemplo.

Dica: O auto-fit com minmax resolve a maior parte dos casos sozinho; a media query entra só para mudar a estrutura em telas grandes.

Checkpoint: O que significa 'mobile first'? — Resposta: Escrever o estilo base para telas pequenas e ampliar com min-width

4. Do detalhe para o todo

Prefira unidades relativas: rem para espaçamento e fonte, % e fr para largura, clamp() para tamanhos que crescem dentro de um limite. Largura fixa em px é a causa número um de rolagem horizontal.

5. Erros comuns e como corrigi-los

1. Largura fixa em px em containers — quebra no celular. 2. Escrever desktop first e depois brigar com sobrescritas. 3. Esquecer a meta viewport, o que faz o celular renderizar como se fosse desktop.

Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.

Prática guiada

1. 1. Monte a primeira versão

Prática guiada: edite o exemplo abaixo aplicando "Responsividade" e clique em Rodar para ver o resultado ao vivo.

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8" /></head>
  <body style="font-family:system-ui;padding:2rem">
    <h1>Responsividade</h1>
  </body>
</html>

Dica: Volte ao exemplo resolvido e compare a estrutura. Largura fixa em px em containers — quebra no celular.

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Responsividade deve produzir e qual parte é responsável por ele.

Minha previsão:

A parte responsável pelo resultado:

Como vou conferir:

Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.

3. 3. Encontre e corrija o erro

Use o exemplo de Responsividade, identifique um risco citado na aula e registre ou implemente a correção.

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8" /></head>
  <body style="font-family:system-ui;padding:2rem">
    <h1>Responsividade</h1>
  </body>
</html>

Dica: Largura fixa em px em containers — quebra no celular.

4. 4. Aplique em um caso novo

Crie uma variação própria usando Responsividade. Mude os dados ou o cenário e demonstre que o resultado continua correto.

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8" /></head>
  <body style="font-family:system-ui;padding:2rem">
    <h1>Responsividade</h1>
  </body>
</html>

Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.

Revisão

  • Grid organiza em duas dimensões (linhas e colunas) ao mesmo tempo. Junto com media queries e unidades relativas, é o que faz a mesma página funcionar no celular e no monitor grande.
  • O auto-fit com minmax resolve a maior parte dos casos sozinho; a media query entra só para mudar a estrutura em telas grandes.
  • Evite: Largura fixa em px em containers — quebra no celular.
  • Evite: Escrever desktop first e depois brigar com sobrescritas.

Exemplo comentado

.cards {
  display: grid;
  gap: 1rem;
  /* quantas colunas couberem, mínimo 240px */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.titulo {
  /* cresce com a tela, mas nunca sai do intervalo */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 768px) {
  .conteudo { grid-template-columns: 2fr 1fr; }
}

O auto-fit com minmax resolve a maior parte dos casos sozinho; a media query entra só para mudar a estrutura em telas grandes.

Erros comuns

  • Largura fixa em px em containers — quebra no celular.
  • Escrever desktop first e depois brigar com sobrescritas.
  • Esquecer a meta viewport, o que faz o celular renderizar como se fosse desktop.

Quiz e gabarito completo

  1. 1. O que repeat(auto-fit, minmax(240px, 1fr)) faz?

    • a) Cria sempre 3 colunas
    • b) Cria quantas colunas couberem, com largura mínima de 240px
    • c) Deixa tudo em uma coluna
    • d) Define a altura das linhas

    Gabarito: b) Cria quantas colunas couberem, com largura mínima de 240px — É layout responsivo automático, sem media query.

  2. 2. O que significa 'mobile first'?

    • a) Fazer um app antes do site
    • b) Escrever o estilo base para telas pequenas e ampliar com min-width
    • c) Testar só no celular
    • d) Usar apenas px

    Gabarito: b) Escrever o estilo base para telas pequenas e ampliar com min-width — A base é o caso mais restrito; as media queries adicionam o que sobra de espaço.

Codding • Tailwind CSS • Responsividade • Prova final e certificado em codding.lovable.app/cursos/tailwind-css/prova