CSS e desenho de interfaces · Lição 12 / 12

Missão: uma interface que se adapta

Agora suas escolhas de estilo precisam vir acompanhadas de evidências de leitura e uso.

Vamos descobrir juntos

1
O kit contém um index.html completo, README e REVIEW.md. Personalize o bloco CSS: uma paleta, espaçamento dos cartões e um ponto de mudança. Preserve títulos, navegação e conteúdo. As edições de HTML podem ser feitas e testadas no arquivo local.
2
Faça uma previsão e altere apenas uma variável de cada vez. Se uma regra falhar, confira seletor, sintaxe, condição e cascata. Por exemplo, color:red funciona, mas colr:red é uma propriedade desconhecida ignorada; a oficina não é um validador completo de sintaxe.
3
Registre larguras estreita, intermediária e larga, texto longo, teclado, foco, contraste e movimento reduzido. A prévia oferece medições específicas; nenhuma delas certifica acessibilidade completa. Registre o que não foi testado, inclusive leitores de tela.
4
Baixe o HTML editado separadamente e substitua index.html no kit. O ZIP continua sendo o modelo inicial. GitHub envia um arquivo por operação após revisão e confirmação; não ativa Pages. A trilha JavaScript e interação já está disponível como próximo passo.

Oficina: uma interface, diferentes espaços

Edite o bloco <style id="lesson-css"> em “Meus arquivos e GitHub”. A prévia aplica esse CSS à estrutura HTML fornecida; confira alterações de HTML no arquivo baixado. Recursos externos e CSS fora do conjunto de estudo não são aceitos aqui.

Ir ao meu códigoLargura do documento de prévia

As medidas descrevem esta prévia, não garantem todos os tamanhos ou a acessibilidade completa. Teste conteúdo longo, zoom, teclado e tecnologias assistivas no projeto local.

Laboratório de contraste entre duas cores

Cor do textoCor do fundo

Razão aproximada ·

Cálculo apenas para duas cores sRGB opacas escolhidas aqui; não lê sua página. O limiar usa a razão sem arredondar. Não avalia transparência, gradientes, imagens, estados ou conformidade completa.

O código mudou. Aplique novamente para observar esta versão.CSS aplicado. Compare as medidas e teste o teclado dentro da prévia.Não foi possível aplicar. Mantenha um único style com id lesson-css, até 65.536 caracteres no documento e use o CSS ensinado, sem URLs, imports, escapes ou regras externas. Propriedades inválidas podem ser ignoradas pelo navegador; isto não é um validador completo.Página de estudo com seu CSSSimNãoMovimento reduzidoSem preferência por reduçãoO par atinge 4,5:1 para texto comum.O par fica abaixo de 4,5:1 para texto comum.<a href="#conteudo">Pular para o conteúdo</a> <header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p> <nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header> <main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards"> <article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article> <article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article> <article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section> <section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section> <section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main> <footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>

Links oficiais e próximo passo

✦

SUA MISSÃO

Entregar uma página responsiva e uma revisão de decisões, testes e limites.

Como perceber o que aprendi?

Use os objetivos e o desafio abaixo como uma conversa com você mesmo ou com alguém que possa ajudar. É uma autoavaliação orientada: não envia respostas, não concede XP e não verifica automaticamente sua autonomia.

Em Fundamentos, altere um exemplo, preveja o resultado, confira um caso comum e um caso de erro, e explique suas escolhas. Se precisar de ajuda, identifique o trecho que quer praticar novamente.

Seu desafio de transferência

Entregue três mudanças justificadas e um teste antes/depois que detecte um problema real. Preencha REVIEW.md com evidências e pendências.

Guarde uma evidência: previsão, tentativa, resultado, uma mudança sua e o que ainda não consegue explicar. Quando possível, peça feedback a alguém; se estudar sozinho, retome depois sem copiar e compare suas tentativas.

Tente de novo em outro momento

Depois de uma pausa, explique a ideia sem abrir a solução e tente um exemplo diferente. Compare com sua primeira tentativa: o que consegue fazer sozinho e onde precisa de uma pista? Você pode escrever, falar ou desenhar; escolha uma forma que permita conferir a mesma ideia. Registre ajuda recebida, inclusive de IA, e volte ao trecho necessário. Não há prazo universal nem XP extra por esse registro.

Conclusões e XP registram as avaliações da Rullst Academy. Uma trilha introdutória pode ajudar na vida cotidiana e preparar próximos estudos; sozinha não comprova domínio completo ou preparo profissional. O nível indica profundidade, não idade.

Leve com você

Entregue três mudanças justificadas e um teste antes/depois que detecte um problema real. Preencha REVIEW.md com evidências e pendências.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'">
<title>Oficina de ideias: uma interface que se adapta</title>
<style id="lesson-css">
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #15364c; background-color: #eef4f7; }
main, header, footer { max-width: 64rem; margin: 0 auto 1.25rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; }
a { color: #07598a; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c00; outline-offset: 4px; }
.hero, .card, .lab { background-color: #ffffff; border: 1px solid #a4bac8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.card { min-width: 0; margin-bottom: 0; }
.nav a { display: inline-block; padding: .5rem; }
.sample { color: #15364c; background-color: #ffffff; }
.measure { width: 200px; padding: 20px; border: 2px solid #15364c; box-sizing: border-box; background-color: #e1f4ed; }
button { font: inherit; padding: .75rem 1rem; border: 2px solid #15364c; border-radius: .5rem; background-color: #15364c; color: #ffffff; cursor: pointer; }
p, li, a { overflow-wrap: anywhere; }
:root { --ink: #15364c; --surface: #ffffff; }
.sample { color: var(--ink); background-color: var(--surface); font-size: 1.25rem; line-height: 1.6; max-width: 60ch; }
.nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(3,minmax(0,1fr)); } }
a:hover { background-color: #dceef8; }
@media (prefers-reduced-motion: no-preference) { button { transition: transform .15s ease; } button:hover { transform: translateY(-2px); } }
</style></head><body>
<a href="#conteudo">Pular para o conteúdo</a>
<header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p>
<nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header>
<main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards">
<article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article>
<article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article>
<article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section>
<section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section>
<section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main>
<footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>
</body></html>

Formato do arquivo

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.