HTML / CSS / JavaScript

Colección de casos

Elija un caso completo para ver directamente el resultado, modificar el código fuente y ejecutarlo en el navegador.

1046Página 2 de 44
Se muestran actualmente 24 casos de ejemplo
0025Tarjetas, listas y organización de contenido

muro de tarjetas filtrable de lista de lectura

Completa una pared de tarjetas filtrables para el escenario de lista de lectura: incluye contenido real, controles accionables, retroalimentación clara de estado y diseño adaptable a distintos tamaños.

Tarjetas, listas y organización de contenidoMuro de tarjetas filtrablesHTMLCSSJavaScript
Abrir y ejecutar
0026Tablas y visualización de datos

Tabla de varios campos ordenable del inventario

Completa una tabla ordenable de varias columnas en un contexto de inventario: incluye contenido real, controles interactivos, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Tablas y visualización de datosTabla de ordenación por múltiples columnasHTML TableCSSJavaScript
Abrir y ejecutar
0027Diseño de página y responsive

Diseño de cuadrícula tipo bento para crónicas arquitectónicas

Completa un diseño de cuadrícula tipo bento en el escenario del diario de arquitectura: incluye contenido real, controles interactivos, estado claro y diseño adaptable a distintos tamaños.

Diseño de página y responsiveDiseño de cuadrícula tipo bentoHTMLCSS GridResponsive Design
Abrir y ejecutar
0028Escenarios de páginas de marketing y contenido

Hero narrativo de marca de té

Completa una narrativa de pantalla inicial en un contexto de marca de té: incluye contenido real, controles interactivos, estados claros y un diseño adaptable a distintos tamaños.

Escenarios de páginas de marketing y contenidoHero narrativoHTMLCSSJavaScript
Abrir y ejecutar
0029Interfaces de panel y administración

Resumen de indicadores clave de la operación de biblioteca

En el escenario de operaciones de biblioteca, completa la vista general de indicadores clave: incluye contenido real, controles interactivos, feedback de estado claro y un diseño adaptable a distintos tamaños.

Interfaces de panel y administraciónResumen de métricas claveHTMLCSS GridJavaScript
Abrir y ejecutar
0030Procesos comerciales y de servicio

Calculadora del carrito de la floristería

Completa la calculadora del carrito en un escenario de floristería: incluye contenido real, controles operables, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Procesos comerciales y de servicioCalculadora de carrito de comprasHTMLCSSJavaScript
Abrir y ejecutar
0031Tipografía y efectos de texto

Escala tipográfica de poesía de montaña responsiva

Completa una escala tipográfica responsiva en el escenario de poemario de montaña: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Tipografía y efectos de textoEscala tipográfica adaptableHTMLCSS TypographyJavaScript
Abrir y ejecutar
0032Animación y microinteracciones

Cargador multietapa para subida de archivos

Completa un cargador de varias fases en un escenario de subida de archivos: incluye contenido realista, controles interactivos, estado claro y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescargador de varias etapasHTMLCSS AnimationJavaScript
Abrir y ejecutar
0033efectos visuales creativos

Campo de partículas interactivo de aguas profundas

Completa un campo de partículas interactivo en un escenario de mar profundo: incluye contenido real, controles accionables, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

efectos visuales creativosCampo de partículas interactivoHTMLCanvasJavaScript
Abrir y ejecutar
0034Dibujo y visualización de datos

Gráfico de barras interactivo de la calidad del aire

Completa un gráfico de barras interactivo en el escenario de calidad del aire: incluye contenido real, controles accionables, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Dibujo y visualización de datosGráfico de barras interactivoHTMLCanvasJavaScript
Abrir y ejecutar
0035Capacidades de medios y dispositivos del navegador

Panel de información del viewport del laboratorio de dispositivos

Completa un panel de información de la ventana gráfica para un escenario de laboratorio de dispositivos: incluye contenido real, controles interactivos, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Capacidades de medios y dispositivos del navegadorPanel de información del viewportHTMLCSSBrowser API
Abrir y ejecutar
0036Miniaplicaciones y minijuegos

Calculadora portátil para la noche en familia

Completa una calculadora portátil para el escenario de una noche en familia: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Miniaplicaciones y minijuegosCalculadora portátilHTMLCSSJavaScript
Abrir y ejecutar
0037Controles y selectores básicos

Matriz de interruptores de preferencias de la sala de reuniones

Completa una matriz de interruptores de preferencias en un escenario de sala de reuniones: incluye contenido real, controles interactivos, retroalimentación clara del estado y diseño adaptable a distintos tamaños.

Controles y selectores básicosMatriz de interruptores de preferenciasHTMLCSSJavaScript
Abrir y ejecutar
0038Formularios y entrada

Proceso de inscripción de voluntarios en varios pasos

Completa un flujo de formulario por pasos en el escenario de inscripción de voluntarios: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Formularios y entradaProceso de rellenado por pasosHTMLCSSJavaScript
Abrir y ejecutar
0039Navegación y menús

Navegación de migas de pan para guía del museo

Completa la navegación de migas de pan en el escenario de visita al museo: incluye contenido real, controles interactivos, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Navegación y menúsmigas de panHTMLCSSJavaScript
Abrir y ejecutar
0040Superposición y retroalimentación de estado

Panel lateral de revisión de documentos

Completa un cajón lateral en el escenario de revisión de documentos: incluye contenido real, controles accionables, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Superposición y retroalimentación de estadoCajón lateralHTMLCSSJavaScript
Abrir y ejecutar
0041Tarjetas, listas y organización de contenido

Tablero kanban de lista de lectura

Completa tareas en una lista de lectura: contenido real, controles accionables, estados claros y diseño adaptable a distintos tamaños.

Tarjetas, listas y organización de contenidoTablero de tareasHTMLCSS GridJavaScript
Abrir y ejecutar
0042Tablas y visualización de datos

Tabla combinada de filtrado de inventario

Completa la tabla de filtros combinados en un escenario de registro de inventario: incluye contenido real, controles operativos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Tablas y visualización de datostabla de filtrado combinadoHTML TableCSSJavaScript
Abrir y ejecutar
0043Diseño de página y responsive

Diseño narrativo en pantalla dividida para diario de arquitectura

Completa un diseño narrativo de pantalla dividida para escenarios de revistas de arquitectura: incluye contenido real, controles operables, comentarios de estado claros y diseño adaptable a distintos tamaños.

Diseño de página y responsiveDiseño narrativo a dos columnasHTMLCSS GridResponsive Design
Abrir y ejecutar
0044Escenarios de páginas de marketing y contenido

Página de propuestas de precios de la marca de té

Completa una página de plan de precios para el escenario de una marca de té: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Escenarios de páginas de marketing y contenidoPágina de plan de preciosHTMLCSSJavaScript
Abrir y ejecutar
0045Interfaces de panel y administración

Panel de tendencias de operaciones de la biblioteca

Completa un panel de análisis de tendencias para un escenario de operaciones bibliotecarias: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Interfaces de panel y administraciónTrend Analysis DashboardHTMLCanvasJavaScript
Abrir y ejecutar
0046Procesos comerciales y de servicio

Flujo de pasos de pago de la floristería

Completa un flujo de pasos de pago para el escenario de la floristería: incluye contenido real, controles interactivos, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Procesos comerciales y de servicioFlujo de pasos de pagoHTMLCSSJavaScript
Abrir y ejecutar
0047Tipografía y efectos de texto

Experimento de jerarquía de grosor de la colección de poemas de montaña

Experimento de jerarquía de pesos tipográficos en un contexto de poesía de montaña: incluye contenido real, controles interactivos, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Tipografía y efectos de textoExperimento de jerarquía de grosor tipográficoHTMLCSS TypographyJavaScript
Abrir y ejecutar
0048Animación y microinteracciones

Transición de forma del botón de carga de archivos

Completa la transición de forma del botón en escenarios de carga de archivos: incluye contenido real, controles operables, estados claros de retroalimentación y diseños adaptados a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar