Carregando

do primeiro conceito à prática com confiança

CSS

Molde a sensação de uma página, uma regra de estilo por vez.

Começar a aprender 9 aulas · primeira aula com cerca de 12 min · grátis · sem cadastro
Sobre esta trilha

CSS torna páginas legíveis, expressivas e responsivas. Aprenda seletores, tipografia, modelo de caixa, cascata, layout moderno e fluxos práticos de tema para componentes reais.

Antes de começar
  • Não é necessária experiência em programação.
  • Um navegador moderno.
  • Conhecimento básico de HTML ajuda, mas os exemplos já trazem a marcação.
Carregando progresso…
  1. Unidade 1 · 0/2 aulas

    Noções básicas de estilo

    Escreva suas primeiras regras e melhore legibilidade. Medalha: Iniciador de estilo

    1. 0x001Dê os primeiros estilos à páginaConecte CSS e escreva seu primeiro seletor e declaração. 12 min 0/1 exercícios resolvidos 12 min 0/1 exercícios resolvidos
    2. 0x102Defina texto legível e corEscolha tipografia, alinhamento e contraste. 13 min 0/1 exercícios resolvidos 13 min 0/1 exercícios resolvidos
  2. Unidade 2 · 0/3 aulas

    Regras e layout

    Controle caixas e construa layouts lineares. Medalha: Construtor de layout

    1. 0x203Entenda o modelo de caixaControle espaço interno/externo com padding, border e margin. 14 min 0/1 exercícios resolvidos 14 min 0/1 exercícios resolvidos
    2. 0x304Siga a cascataEntenda como o navegador escolhe entre regras concorrentes. 13 min 0/1 exercícios resolvidos 13 min 0/1 exercícios resolvidos
    3. 0x405Organize itens com FlexboxAlinhe itens e distribua espaço em layouts lineares. 15 min 0/1 exercícios resolvidos 15 min 0/1 exercícios resolvidos
  3. Unidade 3 · 0/1 aulas

    Páginas responsivas

    Adapte layout para diferentes larguras de tela. Medalha: Modelador de telas

    1. 0x506Adapte layouts para qualquer telaUse Grid e media queries para layout responsivo. 16 min 0/1 exercícios resolvidos 16 min 0/1 exercícios resolvidos
  4. Unidade 4 · 0/3 aulas

    Fluxos práticos em CSS

    Aplique tokens e padrões de estado em componentes reais. Medalha: Estilista de sistemas

    1. 0x607Reutilize estilos com variáveis CSSCrie tokens de design com custom properties. 15 min 0/1 exercícios resolvidos 15 min 0/1 exercícios resolvidos
    2. 0x708Estilize estados interativosUse pseudo-classes e transições para feedback claro. 15 min 0/1 exercícios resolvidos 15 min 0/1 exercícios resolvidos
    3. 0x809Laboratório prático: monte um mini sistema de temaCombine tokens, layout e padrões de interação em um fluxo real. 18 min 0/1 exercícios resolvidos 18 min 0/1 exercícios resolvidos