Rullst AcademyRullst Academy/Trilhas de aprendizado
← Voltar ao catálogo
Fundamentos · TRILHA COMPLETA DISPONÍVEL

CSS e desenho de interfaces

Transforme uma página em uma interface legível: seletores, caixas, cores, Flexbox, Grid e adaptação com evidências.

12 lições~162 min600 XP
Começar esta trilha

Experimente a primeira lição sem conta. Entre para guardar suas conquistas.

O que você vai descobrir

  • Explicar seletores, cascata, unidades e modelo de caixa.
  • Construir layouts flexíveis com Flexbox, Grid e media queries.
  • Revisar contraste, foco e movimento com testes e limites claros.

Esta trilha é para você?

Para quem conhece a estrutura básica de HTML. Recomendamos HTML semântico e acessibilidade antes desta trilha, sem bloqueio obrigatório. Use a prévia no celular e teste o arquivo local no computador.

O tempo é uma estimativa, não um prazo. Faça pausas, use as pistas e tente outra vez quando precisar.

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.

No seu ritmo

Seu caminho, passo a passo

Uma ideia de cada vez: entenda, experimente e confira sua previsão.

0 / 12
  1. 01Dar forma sem perder significado10 min · 50 XPSua próxima descoberta
  2. 02Escolher sem atingir tudo12 min · 50 XPMais adiante
  3. 03Quando duas regras discordam14 min · 50 XPMais adiante
  4. 04Cada elemento ocupa uma caixa14 min · 50 XPMais adiante
  5. 05Medidas que acompanham a leitura14 min · 50 XPMais adiante
  6. 06Cor que comunica e permite ler14 min · 50 XPMais adiante
  7. 07Flexbox: distribuir em uma direção14 min · 50 XPMais adiante
  8. 08Grid: relações em duas dimensões14 min · 50 XPMais adiante
  9. 09Responsividade guiada pelo conteúdo14 min · 50 XPMais adiante
  10. 10Mostrar onde a interação está12 min · 50 XPMais adiante
  11. 11Movimento com escolha12 min · 50 XPMais adiante
  12. 12Missão: uma interface que se adapta18 min · 50 XPMais adiante

Rullstpetbot

A IA pode errar. Confira no material da lição.