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 8 de 44
Se muestran actualmente 24 casos de ejemplo
0169Tarjetas, listas y organización de contenido

Índice de contactos de la lista de lectura

Completa el índice de contactos en un escenario de lista de lectura: incluye contenido real, controles accionables, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Tarjetas, listas y organización de contenidoÍndice de contactosHTMLCSSJavaScript
Abrir y ejecutar
0170Tablas y visualización de datos

Tabla de selección múltiple del inventario

Completa una tabla de selección múltiple en un contexto de registro de inventario: incluye contenido realista, controles interactivos, estados claros y un diseño adaptable a distintos tamaños.

Tablas y visualización de datosSelección por lotesHTML TableCSSJavaScript
Abrir y ejecutar
0171Diseño de página y responsive

Diseño de contenido maestro-detalle del registro arquitectónico

Completa un diseño de contenido principal y secundario en un escenario de diario de arquitectura: incluye contenido real, controles accionables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Diseño de página y responsivediseño de contenido principal/secundarioHTMLCSSJavaScript
Abrir y ejecutar
0172Escenarios de páginas de marketing y contenido

Página de comparación de productos de una marca de té

Completa una página de comparación de productos para un contexto de marca de té: incluye contenido realista, controles accionables, retroalimentación clara de estados y un diseño adaptable a distintos tamaños.

Escenarios de páginas de marketing y contenidoPágina de comparación de productosHTML TableCSSJavaScript
Abrir y ejecutar
0173Interfaces de panel y administración

Panel de flujo de procesos de operaciones de biblioteca

Completa el panel de flujo en el contexto de operaciones de biblioteca: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintas dimensiones.

Interfaces de panel y administraciónPanel de flujo de procesosHTMLCSS GridJavaScript
Abrir y ejecutar
0174Procesos comerciales y de servicio

Flujo de solicitud de devolución y cambio de la floristería

Completa un flujo de solicitud de devolución o cambio en un entorno de floristería: incluye contenido realista, controles accionables, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Procesos comerciales y de servicioflujo de solicitud de devoluciónHTMLCSSJavaScript
Abrir y ejecutar
0175Tipografía y efectos de texto

Ajuste del ancho de línea para lectura de poesía de montaña

Completa el ajuste de longitud de línea de lectura en la escena del poemario de montaña: incluye contenido real, controles operables, feedback de estado claro y una disposición adaptable a distintos tamaños.

Tipografía y efectos de textoAjuste del interlineadoHTMLCSS TypographyJavaScript
Abrir y ejecutar
0176Animación y microinteracciones

Animación de estado de carga orbital de archivos

Completa una animación de estado orbital en un escenario de carga de archivos: incluye contenido real, controles utilizables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de estado orbitalHTMLCSS AnimationJavaScript
Abrir y ejecutar
0177efectos visuales creativos

Efecto de rastro de puntero en aguas profundas

Completa un efecto de estela del puntero en un escenario de mar profundo: incluye contenido real, controles accionables, retroalimentación de estado clara y una maquetación adaptable a distintos tamaños.

efectos visuales creativosEfecto de estela del punteroHTMLCanvasJavaScript
Abrir y ejecutar
0178Dibujo y visualización de datos

Dibujador de ondas de calidad del aire

Completa un trazador de formas de onda en un escenario de calidad del aire: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Dibujo y visualización de datosDibujador de formas de ondaHTMLCanvasJavaScript
Abrir y ejecutar
0179Capacidades de medios y dispositivos del navegador

Panel de idioma y zona horaria del laboratorio de dispositivos

Completa el panel de idioma y zona horaria en el escenario del laboratorio de dispositivos: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Capacidades de medios y dispositivos del navegadorPanel de zona horaria e idiomaHTMLCSSBrowser API
Abrir y ejecutar
0180Miniaplicaciones y minijuegos

Selector aleatorio para la noche en familia

Completa un selector aleatorio para escenarios de noche en familia: incluye contenido real, controles interactivos, retroalimentación de estado clara y una disposición adaptable a distintos tamaños.

Miniaplicaciones y minijuegosSelector aleatorioHTMLCSSJavaScript
Abrir y ejecutar
0181Controles y selectores básicos

Selector segmentado de modo de lectura

Completa el selector segmentado en un escenario de modo de lectura: incluye contenido real, controles interactivos, una respuesta de estado clara y un diseño adaptable a distintos tamaños.

Controles y selectores básicosselector segmentadoHTMLCSSJavaScript
Abrir y ejecutar
0182Formularios y entrada

Formulario de validación en tiempo real para inscripción al curso

Completa un formulario de validación en tiempo real en un contexto de inscripción a un curso: incluye contenido real, controles operables, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Formularios y entradaFormulario de validación en tiempo realHTMLCSSJavaScript
Abrir y ejecutar
0183Navegación y menús

Menú principal adaptativo de la base de conocimiento

Completa un menú principal adaptable en un entorno de base de conocimientos: incluye contenido real, controles accionables, comentarios de estado claros y un diseño que se adapta a distintos tamaños de pantalla.

Navegación y menúsMenú principal adaptableHTMLCSSJavaScript
Abrir y ejecutar
0184Superposición y retroalimentación de estado

Cuadro de diálogo de confirmación del centro de tareas

Completa un diálogo de confirmación en un escenario de centro de tareas: incluye contenido real, controles interactivos, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Superposición y retroalimentación de estadoCuadro de diálogo de confirmaciónHTMLCSSJavaScript
Abrir y ejecutar
0185Tarjetas, listas y organización de contenido

Muro de tarjetas filtrables para tareas de diseño

Completa un muro de tarjetas filtrable en el entorno de tareas de diseño: incluye contenido real, controles interactivos, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

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

Tabla de ordenación multicolumna de calificaciones del curso

Completa una tabla ordenable de varias columnas en un contexto de calificaciones de cursos: incluye contenido real, controles interactivos, comentarios de estado claros 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
0187Diseño de página y responsive

Diseño de cuadrícula tipo bento para el portal de la comunidad

En el escenario del portal comunitario, completa un diseño de cuadrícula tipo bento: incluye contenido real, controles accionables, comentarios de estado claros y un 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
0188Escenarios de páginas de marketing y contenido

Encabezado narrativo de la portada del festival creativo

Completa una hero narrative en un contexto de festival creativo: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

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

Resumen de indicadores clave de la programación de la consulta

Completa una vista general de indicadores clave en escenarios de programación ambulatoria: incluye contenido real, controles accionables, retroalimentación de estado clara y diseños adaptables a distintos tamaños.

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

Calculadora de carrito para alquiler de bicicletas

Completa una calculadora de carrito de compras para el escenario de alquiler de bicicletas: incluye contenido real, controles interactivos, comentarios de estado claros y un diseño adaptado a distintos tamaños.

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

Tipografía responsiva de revista urbana

En una escena de revista urbana, completa una escala tipográfica adaptable: incluye contenido real, controles interactivos, una retroalimentación de estado clara y un diseño que se adapta a distintos tamaños.

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

Cargador multifase para herramienta de concentración

Completa el cargador de varias etapas en el escenario de la herramienta de concentración: incluye contenido real, controles operables, feedback de estado claro y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescargador de varias etapasHTMLCSS AnimationJavaScript
Abrir y ejecutar