Selectores básicos
Selectores de elemento, clase, descendiente y pseudo-clase.
Ejemplos vivos
Edita HTML, CSS, JavaScript, React y Web Components/TSX con CodeMirror y ve el resultado de inmediato. Filtra por ruta o tema.
Ruta
Etiquetas
Box model en la práctica
Content, padding, border y margin — el modelo de caja de CSS.
Centrar con Flexbox
Alinea horizontal y verticalmente con pocas utilidades de flex.
Galería con CSS Grid
Cuadrícula responsiva automática con repeat y minmax.
Tipografía fluida con clamp()
Tamaño de fuente que escala entre min y max sin breakpoints.
Animación fade + slide
Simple @keyframes para entrada suave de elementos.
Dark mode con variables CSS
Cambia el tema solo con custom properties y preferencia del sistema.
Cards responsivos
Lista de cards que se reorganiza con grid y tipografía legible.
Formulario accesible básico
Labels, foco visible y estados de campo sin JavaScript.
Header sticky
Barra que se fija al hacer scroll con position: sticky.
Botón con hover y transición
Microinteracción con transition y estados :hover / :active.
Media queries
Adapta layout y tipografía según el ancho del viewport.
position absolute y relative
Entiende containing blocks y superposiciones.
z-index y apilamiento
Contextos de apilamiento y cuándo z-index realmente funciona.
Carrusel con scroll-snap
Scroll horizontal con puntos de ajuste — sin librería.
Selector :has() en el padre
Estiliza el contenedor según lo que tiene dentro — CSS moderno.
Layout con container queries
El card cambia de layout según el ancho del container, no del viewport.
Card con filter y backdrop-blur
Vidrio esmerilado y profundidad con backdrop-filter + filter.
Multi-column tipo masonry
column-count para un flujo tipo revista sin JS.
Toggle de tema con custom properties
Cambio claro/oscuro impulsado solo por variables CSS.
Artículo semántico
article con header, headings y pie de metadatos.
Formulario accesible
Labels asociados, required y botones con type correcto.
Figure y figcaption
Imagen con leyenda semántica agrupada.
Navegación y landmarks
header, nav, main y footer formando la estructura de la página.
Tabla de datos
caption, thead, th con scope — tabla accesible.
Lista de definiciones
dl/dt/dd para glosario de términos HTML.
Página de perfil
Proyecto: perfil con landmarks, figure y formulario de contacto.
Contador interactivo
Estado simple, botones y actualización del DOM.
Pestañas (tabs)
Cambio de paneles accesible con roles y teclado.
Acordeón
Abrir/cerrar secciones con botón y aria-expanded.
Validación de formulario
Comprueba campos al enviar y muestra mensajes amigables.
Tema con localStorage
Persiste la preferencia claro/oscuro en el navegador.
Lista con fetch mock
Simula fetch con Promise y renderiza una lista.
Lista de tareas básica
Añade y quita ítems con DOM y un array simple.
Hello JSX
Primer componente React renderizado en el playground.
Card con props
Componente reutilizable que recibe title y children.
Contador con useState
Estado local, eventos y re-render.
useEffect en document.title
Sincronizar el título de la pestaña con el estado.
Lista filtrable con keys
map + filter + keys estables.
React Query: lista remota
useQuery + caché con JSONPlaceholder.
React Query: mutation local
useMutation + invalidateQueries en lista mock.
Zustand: tema global
Store compartido entre componentes.
Hello Custom Element
Primer custom element con label y Shadow DOM.
Shadow DOM y estilos
CSS encapsulado: el host no se filtra dentro del componente.
Galería vanilla (Custom Element)
image-gallery con Shadow DOM, grid y evento gallery-select.
Galería en React (host CE)
El mismo image-gallery usado dentro de un App React vía esm.sh.
Galería en Vue (host CE)
Custom Element hospedado por Vue 3 (build global vía CDN).
Atributos y columns
observedAttributes actualiza el grid cuando cambia columns.
Árbol Vite lib (conceptual)
Mapa mental del paquete en library mode — entry, dist y HTML de preview.
Export dual (clase + register)
register() con guarda + auto-register en el entry.
Consumir en la app (import + tag)
Cómo la app Vite usaría la lib: registrar y montar la galería.