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 22 de 44
Se muestran actualmente 24 casos de ejemplo
0505Diseño de página y responsive

Notas de investigación de diseño de mosaico responsivo

Crea un diseño responsive de cascada para el escenario de notas de investigación: incluye contenido real, controles interactivos, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Diseño de página y responsiveDiseño de cascada adaptableHTMLCSSJavaScript
Abrir y ejecutar
0506Animación y microinteracciones

Cambio de estado con volteo para el estado del pedido

Realiza una transición de cambio de página para escenarios de estado de pedido: incluye contenido real, controles operables, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionescambio de estado de páginaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0507Formularios y entrada

Formulario de reserva de franjas horarias para eventos

Completa el formulario de reserva de franjas horarias en un escenario de reserva de eventos: incluye contenido real, controles interactivos, feedback claro de estado y diseño adaptable a distintos tamaños.

Formularios y entradaTabla de citas por franja horariaHTMLCSSJavaScript
Abrir y ejecutar
0508Tarjetas, listas y organización de contenido

Registro expandible del directorio del equipo

Completa registros desplegables en un escenario de directorio del equipo: incluye contenido real, controles accionables, comentarios de estado claros y una distribución adaptable a distintos tamaños.

Tarjetas, listas y organización de contenidoRegistro expandibleHTMLCSSJavaScript
Abrir y ejecutar
0509Diseño de página y responsive

Diseño de barra lateral fija para notas de investigación

Completa un diseño de barra lateral fija en un escenario de notas de investigación: incluye contenido real, controles accionables, feedback de estado claro y diseño adaptable a distintos tamaños.

Diseño de página y responsiveDiseño de barra lateral fijaHTMLCSS GridResponsive Design
Abrir y ejecutar
0510Animación y microinteracciones

Feedback del control elástico del estado del pedido

En el escenario de estado de pedido, completa una respuesta elástica del control: incluye contenido real, controles operables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Animación y microinteraccionesRetroalimentación de controles elásticosHTMLCSS AnimationJavaScript
Abrir y ejecutar
0511Formularios y entrada

Cuestionario condicional para reserva de evento

Completa un cuestionario condicional en el contexto de la reserva de eventos: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Formularios y entradaCuestionario condicionalHTMLCSSJavaScript
Abrir y ejecutar
0512Tarjetas, listas y organización de contenido

Notas tipo cascada del directorio del equipo

Completa un mosaico de notas en un contexto de directorio de equipo: incluye contenido real, controles operativos, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Tarjetas, listas y organización de contenidoNotas tipo cascadaHTMLCSSJavaScript
Abrir y ejecutar
0513Diseño de página y responsive

Diseño de ancho completo con inserciones para notas de investigación

Completa un diseño de ancho completo en un escenario de notas de investigación: contiene contenido real, controles interactivos, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Diseño de página y responsiveDiseño de ancho completo intercaladoHTMLCSS GridResponsive Design
Abrir y ejecutar
0514Animación y microinteracciones

Notificación emergente de estado del pedido

Completa una animación de notificación emergente en el contexto del estado del pedido: incluye contenido realista, controles accionables, retroalimentación de estado clara y una disposición adaptable a distintos tamaños.

Animación y microinteraccionesretroalimentación emergente de notificacionesHTMLCSSJavaScript
Abrir y ejecutar
0515Diseño de página y responsive

galería adaptable de notas de investigación

Completa una galería adaptativa en el contexto de notas de investigación: incluye contenido real, controles operables, feedback de estado claro y un diseño adaptable a varios tamaños.

Diseño de página y responsiveGalería adaptableHTMLCSSJavaScript
Abrir y ejecutar
0516Animación y microinteracciones

Animación de revelado del contenido del estado del pedido

Completa una animación de revelado de contenido en un escenario de estado de pedido: incluye contenido real, controles interactivos, comentarios claros de estado y diseño adaptable a distintos tamaños.

Animación y microinteraccionesAnimación de revelado de contenidoHTMLCSS AnimationJavaScript
Abrir y ejecutar
0517Diseño de página y responsive

Diseño maestro-detalle de notas de investigación

Completa un diseño de contenido principal y detalle para un escenario de notas de investigación: incluye contenido realista, controles accionables, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Diseño de página y responsivediseño de contenido principal/secundarioHTMLCSSJavaScript
Abrir y ejecutar
0518Animación y microinteracciones

Animación orbital del estado del pedido

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

Animación y microinteraccionesAnimación de estado orbitalHTMLCSS AnimationJavaScript
Abrir y ejecutar
0519Diseño de página y responsive

Diseño de cuadrícula tipo bento para documentación de producto

Completa un diseño de cuadrícula estilo bento en el escenario de documentación de producto: 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
0520Diseño de página y responsive

Diseño narrativo en pantalla dividida para documentación de producto

Completa un diseño narrativo en pantalla dividida en un escenario de documentación de producto: incluye contenido realista, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Diseño de página y responsiveDiseño narrativo a dos columnasHTMLCSS GridResponsive Design
Abrir y ejecutar
0521Controles y selectores básicos

Selección rápida de fecha para hogar inteligente

Realiza una selección rápida de fechas en un contexto de hogar inteligente: incluye contenido real, controles accionables, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Controles y selectores básicosSelección rápida de fechasHTMLCSSJavaScript
Abrir y ejecutar
0522Controles y selectores básicos

Muestra de color para el cobertizo de bicicletas

Completa la selección de muestras de color en un escenario de cobertizo para bicicletas: incluye contenido real, controles operables, feedback de estado claro y diseño adaptable a distintos tamaños.

Controles y selectores básicosSelección de muestras de colorHTMLCSSJavaScript
Abrir y ejecutar
0523Formularios y entrada

Formulario de borrador automático para registro en clínica

Complete el formulario de borrador automático en el escenario de registro ambulatorio: incluye contenido realista, controles accionables, retroalimentación clara de estado y diseño adaptable a distintos tamaños.

Formularios y entradaFormulario de borrador automáticoHTMLCSSJavaScript
Abrir y ejecutar
0524Navegación y menús

Navegación rápida inferior del centro de ayuda

Completa una navegación rápida inferior en un escenario de centro de apoyo: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Navegación y menúsNavegación rápida inferiorHTMLCSSJavaScript
Abrir y ejecutar
0525Superposición y retroalimentación de estado

Panel inferior de acciones para la seguridad de la cuenta

Completa un panel de acciones en la parte inferior para escenarios de seguridad de la cuenta: incluye contenido real, controles interactivos, estados claros y un diseño adaptable a distintos tamaños.

Superposición y retroalimentación de estadoPanel de acciones inferiorHTMLCSSJavaScript
Abrir y ejecutar
0526Tarjetas, listas y organización de contenido

Organizador de marcadores de estantería de archivo

Completa un organizador de marcadores en un escenario de estantería de archivo: incluye contenido real, controles accionables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Tarjetas, listas y organización de contenidoOrganizador de marcadoresHTMLCSS GridJavaScript
Abrir y ejecutar
0527Tablas y visualización de datos

Tabla de selección masiva de asistencia a clase

Completa una tabla de selección múltiple en el contexto de la asistencia a clase: incluye contenido real, controles accionables, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

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

Galería adaptable de lecturas de archivo

Completa una galería adaptable en un escenario de lectura de archivo: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Diseño de página y responsiveGalería adaptableHTMLCSSJavaScript
Abrir y ejecutar