HTML do zero à página
Estrutura, semântica, formulários, mídia e acessibilidade básica até uma página completa.
Aprendizado prático
Aprenda HTML, CSS, JavaScript, React e Web Components com exemplos vivos
O CSS4HTML é um hub unificado: edite código no playground, copie padrões prontos e siga trilhas claras — do HTML ao React e Web Components, passando por CSS e JavaScript.
Seis trilhas, um hub
Escolha por onde começar — ou combine as seis.
CSS do zero ao layout
Da cascata ao layout responsivo, tipografia fluida e acessibilidade CSS.
JavaScript do zero ao DOM
Variáveis, funções, eventos, arrays e um primeiro contato com fetch e o DOM.
React do básico ao estado
Componentes, hooks, React Query e Zustand — com playground TSX.
Web Components com Vite
Custom Elements agnósticos, Shadow DOM, empacote com Vite e consuma em React ou Vue.
Git na prática
Do primeiro commit ao pull request e uma página no GitHub Pages — sem rebase.
Como estudar
Vários caminhos, o mesmo objetivo: entender a web na prática.
- Siga uma trilha — lições curtas ligadas a exemplos e snippets.
- Quebre coisas no playground — HTML + CSS (+ JS/TSX) editáveis com pré-visualização ao vivo.
- Monte seu kit — filtre snippets por trilha e tags.
Exemplos em destaque
Abra, edite e veja o resultado na hora.
Seletores básicos
Elemento, classe, ID e seletor combinado para estilizar com precisão.
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.
Snippets rápidos
Padrões curtos para colar e adaptar.
addEventListener
Escutar clique de forma idiomática.
Anel de foco visível
Estado :focus-visible sem remover acessibilidade.
attachShadow
Abrir Shadow DOM e injetar markup + CSS.
Badge em formato pill
Etiqueta arredondada para status e tags.
Botão primário
Estilo base de CTA com hover.
Card com sombra suave
Elevação leve para blocos de conteúdo.
Do blog
Web Components do zero
Guia completo da trilha CSS4HTML: do primeiro Custom Element até publicar e consumir sua própria lib com Vite, em vanilla, React e Vue.
Web Components, lição 1: Por que Web Components?
Componentes nativos do browser, agnósticos a framework: o problema que os Web Components resolvem.
Web Components, lição 2: Custom Element + Shadow DOM
class extends HTMLElement, customElements.define(), attachShadow e estilos encapsulados.