Seletores básicos
Elemento, classe, ID e seletor combinado para estilizar com precisão.
Exemplos vivos
Edite HTML, CSS, JavaScript, React/TSX e Web Components com CodeMirror e veja o resultado imediatamente. Filtre por trilha ou tema.
Trilha
Tags
Box model na prática
Content, padding, border e margin — o modelo de caixa do CSS.
Centralizar com Flexbox
Alinhe horizontal e verticalmente com poucos utilitários de flex.
Galeria com CSS Grid
Grade responsiva automática com repeat e minmax.
Tipografia fluida com clamp()
Tamanhos de fonte que escalam entre mínimo e máximo sem media queries.
Animação fade + slide
@keyframes simples para entrada suave de elementos.
Dark mode com variáveis CSS
Troque o tema só com custom properties e preferência do sistema.
Cards responsivos
Lista de cards que se rearranja com grid e tipografia legível.
Formulário acessível básico
Labels, foco visível e estados de campo sem JavaScript.
Header sticky
Barra superior que acompanha o scroll com position: sticky.
Botão com hover e transição
Microinteração com transition e estados :hover / :active.
Layout com media queries
Duas colunas no desktop, uma coluna no mobile.
Position absolute e relative
Entenda o containing block: relative no pai, absolute no filho.
Empilhamento com z-index
Camadas, stacking context e quem fica na frente.
Carrossel com scroll-snap
Slides que “encaixam” no scroll horizontal só com CSS.
Seletor :has() no pai
Estilize o container com base no que tem dentro — CSS moderno.
Layout com container queries
O card muda de layout conforme a largura do container, não da viewport.
Card com filter e backdrop-blur
Vidro fosco e profundidade com backdrop-filter + filter.
Colunas e grid estilo masonry
Texto em múltiplas colunas e um mural com grid denso.
Toggle de tema com custom properties
Claro/escuro com classe no root e botão — complementar ao prefers-color-scheme.
Artigo semântico
article com header, headings e rodapé de metadados.
Formulário acessível
Labels associados, required e botões com type correto.
Figure e figcaption
Imagem com legenda semântica agrupada.
Navegação e landmarks
header, nav, main e footer formando a estrutura da página.
Tabela de dados
caption, thead, th com scope — tabela acessível.
Lista de definições
dl/dt/dd para glossário de termos HTML.
Página de perfil
Projeto: perfil com landmarks, figure e formulário de contato.
Contador interativo
Estado simples, botões e atualização do DOM.
Abas (tabs)
Troca de painéis com aria-selected e hidden.
Accordion
Abrir/fechar seções com botão e aria-expanded.
Validação de formulário
Checagem extra no submit com mensagem amigável.
Tema com localStorage
Stub de dark/light persistido no navegador.
Lista com fetch mock
Simula fetch com Promise e renderiza uma lista.
To-do básico
Lista de tarefas com adicionar e remover no DOM.
Hello JSX
Primeiro componente React renderizado no playground.
Card com props
Componente reutilizável recebendo title e children.
Contador com useState
Estado local, eventos e re-render.
useEffect no document.title
Sincronizar o título da aba com o estado.
Lista filtrável com keys
map + filter + keys estáveis.
React Query: lista remota
useQuery + cache com JSONPlaceholder.
React Query: mutation local
useMutation + invalidateQueries em lista mock.
Zustand: tema global
Store compartilhado entre componentes.
Hello Custom Element
Primeiro custom element com label e Shadow DOM.
Shadow DOM e estilos
CSS encapsulado: o host não vaza para dentro do componente.
Galeria vanilla (Custom Element)
image-gallery com Shadow DOM, grid e evento gallery-select.
Galeria no React (host CE)
O mesmo image-gallery usado dentro de um App React via esm.sh.
Galeria no Vue (host CE)
Custom Element hospedado por Vue 3 (build global via CDN).
Atributos e columns
observedAttributes atualiza o grid quando columns muda.
Árvore Vite lib (conceitual)
Mapa mental do pacote em library mode — entry, dist e HTML de preview.
Export dual (classe + register)
Padrão register() com guarda + auto-register no entry.
Consumir no app (import + tag)
Como o app Vite usaria a lib: registrar e montar a galeria.