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.

1046Page 13 of 44
Se muestran actualmente 24 casos de ejemplo
0289efectos visuales creativos

Efecto de explosión de confeti en el Jardín Nocturno

Completa un efecto de explosión de confeti en un escenario de jardín nocturno: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

efectos visuales creativosEfecto de confetiHTMLCanvasJavaScript
Abrir y ejecutar
0290Dibujo y visualización de datos

Mapa de calor en cuadrícula del progreso de aprendizaje

Completa un mapa de calor matricial en un escenario de progreso de aprendizaje: incluye contenido real, controles accionables, una clara retroalimentación de estado y un diseño adaptable a distintos tamaños.

Dibujo y visualización de datosmapa de calor matricialHTMLCanvasJavaScript
Abrir y ejecutar
0291Capacidades de medios y dispositivos del navegador

Registro de visibilidad de la página del espacio de demostración

Completa un registro de visibilidad de página en un escenario de espacio de presentación: con contenido real, controles operables, retroalimentación clara de estado y diseño adaptable a distintos tamaños.

Capacidades de medios y dispositivos del navegadorRegistro de visibilidad de páginaHTMLCSSBrowser API
Abrir y ejecutar
0292Miniaplicaciones y minijuegos

Divisor de gastos para el descanso de la clase

Completa un organizador de gastos para un escenario de descanso entre clases: incluye contenido real, controles interactivos, estados claros y una disposición adaptada a distintos tamaños.

Miniaplicaciones y minijuegosDivisor de gastosHTMLCSSJavaScript
Abrir y ejecutar
0293Controles y selectores básicos

Selección de tarjetas de opciones para el modo de lectura

Completa la selección de tarjetas de plan en el contexto del modo de lectura: incluye contenido real, controles operables, una retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Controles y selectores básicosselección de tarjetas de planHTMLCSSJavaScript
Abrir y ejecutar
0294Formularios y entrada

Cuestionario condicional de inscripción de cursos

Completa un cuestionario condicional en un escenario de inscripción a cursos: incluye contenido realista, controles accionables, feedback de estado claro y un diseño adaptado a distintos tamaños de pantalla.

Formularios y entradaCuestionario condicionalHTMLCSSJavaScript
Abrir y ejecutar
0295Navegación y menús

Navegación por secciones de la base de conocimientos

Navegación por secciones en escenarios de base de conocimientos: incluye contenido real, controles interactivos, retroalimentación clara de estado y diseño adaptable a distintos tamaños.

Navegación y menúsnavegación por seccionesHTMLCSSJavaScript
Abrir y ejecutar
0296Superposición y retroalimentación de estado

Formulario de acciones contextuales del centro de tareas

En el escenario del centro de tareas, completa la hoja de acciones contextuales: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Superposición y retroalimentación de estadoPaleta de acciones contextualesHTMLCSSJavaScript
Abrir y ejecutar
0297Tarjetas, listas y organización de contenido

Notas en cascada de tareas de diseño

Completa un panel de notas tipo masonry para tareas de diseño: incluye contenido real, controles interactivos, retroalimentación clara de estado y diseño adaptable a distintos tamaños.

Tarjetas, listas y organización de contenidoNotas tipo cascadaHTMLCSSJavaScript
Abrir y ejecutar
0298Tablas y visualización de datos

Tabla matricial de relaciones de calificaciones del curso

Completa una tabla matriz de relaciones en el escenario de las calificaciones de cursos: incluye contenido real, controles accionables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Tablas y visualización de datosTabla de matriz de relacionesHTML TableCSSJavaScript
Abrir y ejecutar
0299Diseño de página y responsive

Portal comunitario con diseño a ancho completo e intercalado

Completa un diseño de ancho completo en un contexto de portal comunitario: 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 responsiveDiseño de ancho completo intercaladoHTMLCSS GridResponsive Design
Abrir y ejecutar
0300Escenarios de páginas de marketing y contenido

Página de agenda de eventos del festival creativo

Completa la página de agenda del evento en el escenario del festival creativo: incluye contenido real, controles interactivos, comentarios de estado claros y una disposición adaptable a distintos tamaños.

Escenarios de páginas de marketing y contenidoPágina de agenda de actividadesHTMLCSSJavaScript
Abrir y ejecutar
0301Interfaces de panel y administración

Tablero de gestión de incidencias del turno de clínica

Completa el tablero de gestión de incidencias en el contexto de la programación de consultas: incluye contenido real, controles utilizables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Interfaces de panel y administraciónTablero de gestión de incidenciasHTMLCSS GridJavaScript
Abrir y ejecutar
0302Procesos comerciales y de servicio

Configurador de presupuestos para alquiler de bicicletas

Completa el configurador de presupuesto en un escenario de alquiler de bicicletas: incluye contenido realista, controles interactivos, feedback de estado claro y una disposición adaptable a distintos tamaños.

Procesos comerciales y de servicioConfigurador de presupuestoHTMLCSSJavaScript
Abrir y ejecutar
0303Tipografía y efectos de texto

Diseño de título delineado para revista urbana

Completa un diseño de título contorneado en un escenario de revista urbana: incluye contenido real, controles interactivos, comentarios de estado claros y una disposición adaptable a distintos tamaños.

Tipografía y efectos de textoDiseño de título con contornoHTMLCSS TypographyJavaScript
Abrir y ejecutar
0304Animación y microinteracciones

Retroalimentación emergente de notificación de la herramienta de enfoque

En un escenario de herramienta de enfoque, se completa una notificación emergente de feedback: incluye contenido real, controles accionables, feedback de estado claro y diseño adaptable a distintos tamaños.

Animación y microinteraccionesretroalimentación emergente de notificacionesHTMLCSSJavaScript
Abrir y ejecutar
0305efectos visuales creativos

patrón de caleidoscopio del jardín nocturno

Completa un patrón de caleidoscopio en un contexto de jardín nocturno: incluye contenido real, controles interactivos, estados claros y un diseño adaptable a distintos tamaños.

efectos visuales creativospatrón de caleidoscopioHTMLCanvasJavaScript
Abrir y ejecutar
0306Dibujo y visualización de datos

Gráfica de línea temporal del progreso del aprendizaje

Completa un gráfico de cronología para el contexto de progreso de aprendizaje: incluye contenido real, controles interactivos, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

Dibujo y visualización de datosgráfica de cronologíaHTMLCanvasJavaScript
Abrir y ejecutar
0307Capacidades de medios y dispositivos del navegador

Detección de capacidades de puntero en espacio de demostración

Completa la detección de capacidades del puntero en un entorno de presentación: incluye contenido real, controles accionables, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Capacidades de medios y dispositivos del navegadorDetección de capacidad del punteroHTMLCSSBrowser API
Abrir y ejecutar
0308Miniaplicaciones y minijuegos

Reloj pomodoro para el descanso entre clases

Completa un temporizador Pomodoro durante un descanso entre clases: incluye contenido realista, controles accionables, estados claros y un diseño adaptable a distintos tamaños.

Miniaplicaciones y minijuegosReloj PomodoroHTMLCSSJavaScript
Abrir y ejecutar
0309Controles y selectores básicos

Control de intervalo doble para modo de lectura

Completa el control de rango de dos valores en un escenario de modo de lectura: incluye contenido real, controles interactivos, comentarios de estado claros y un diseño adaptable a distintos tamaños.

Controles y selectores básicosControl de rango de dos valoresHTMLCSSJavaScript
Abrir y ejecutar
0310Formularios y entrada

Formulario de registro automático de borrador de curso

Completa un formulario de borrador automático para el escenario de matrícula de cursos: contenido real, controles interactivos, feedback de estado claro y un diseño adaptable a distintos tamaños.

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

Navegación por páginas numeradas de la base de conocimientos

Completa la navegación por paginación en un escenario de base de conocimientos: incluye contenido real, controles accionables, estados claros y un diseño adaptable a distintos tamaños.

Navegación y menúsNavegación por páginasHTMLCSSJavaScript
Abrir y ejecutar
0312Superposición y retroalimentación de estado

Panel de acciones inferior del centro de tareas

Completa un panel inferior de acciones para el escenario del centro de tareas: incluye contenido real, controles utilizables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Superposición y retroalimentación de estadoPanel de acciones inferiorHTMLCSSJavaScript
Abrir y ejecutar