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.
Cinco trilhas, um hub
Escolha por onde começar — ou combine as cinco.
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.
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
DOM + classes CSS: o combo do front-end
Como JavaScript e CSS conversam via classList — sem misturar estilo inline.
Acessibilidade com CSS: checklist rápido
Foco visível, contraste, motion e formulários — o que o CSS resolve (e o que não).
Progressive enhancement: HTML, depois CSS, depois JS
Por que a ordem importa — e como o hub CSS4HTML reflete isso nas trilhas.