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 9 / 44
Se muestran actualmente 24 casos de ejemplo
0193efectos visuales creativos

Campo de partículas interactivo del jardín nocturno

Crea una escena de partículas interactivas en el jardín nocturno: incluye contenido real, controles operables, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

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

Gráfico de barras interactivo del progreso de aprendizaje

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

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

Panel de información de viewport del espacio de demostración

Completa el panel de información del viewport en un entorno de presentación: incluye contenido real, controles interactivos, indicadores de estado claros y un diseño adaptable a distintas dimensiones.

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

Calculadora portátil para el descanso del recreo

Crea una calculadora portátil para el escenario de descanso entre clases: incluye contenido real, controles interactivos, estados claros y diseño adaptable a distintos tamaños.

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

Matriz de conmutación de preferencias del modo de lectura

Completa una matriz de interruptores de preferencias en el contexto del modo de lectura: incluye contenido real, controles accionables, estado claro y un diseño adaptable a distintos tamaños.

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

Flujo de registro por pasos del curso

Completa un flujo de relleno por pasos en el escenario de inscripción a un curso: incluye contenido real, controles accionables, comentarios de estado claros y un diseño adaptable a distintos tamaños.

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

Navegación de migas de pan de la base de conocimientos

Completa la navegación de migas de pan en el escenario de la base de conocimientos: incluye contenido real, controles accionables, feedback claro de estado y un diseño adaptable a distintos tamaños.

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

Cajón lateral del centro de tareas

Completa un cajón lateral en el escenario del centro de tareas: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños. Puedes ver el resultado en línea, editar el código fuente y ejecutarlo en el navegador.

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

Tablero de tareas de diseño

Completa un tablero kanban para el escenario de tareas de diseño: incluye contenido real, controles accionables, feedback de estado claro y un diseño adaptable a distintos tamaños.

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

Tabla de filtro combinado de calificaciones del curso

Completa una tabla de filtros combinados para el escenario de calificaciones de cursos: incluye contenido real, controles interactivos, comentarios de estado claros y un diseño adaptado a distintos tamaños.

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

Diseño narrativo de dos paneles para el portal comunitario

Completa un diseño narrativo de pantalla dividida en el escenario de portal comunitario: incluye contenido real, controles interactivos, una 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
0204Escenarios de páginas de marketing y contenido

Página de planes de precios del festival creativo

Página de plan de precios completada en el contexto de un festival creativo: incluye contenido real, controles operables, una retroalimentación de estado clara y un diseño adaptable a distintos tamaños de pantalla.

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

Panel de análisis de tendencias de programación de consultas externas

Completa un panel de análisis de tendencias para un escenario de programación ambulatoria: incluye contenido realista, controles accionables, comentarios de estado claros y un diseño adaptable a distintos tamaños.

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

Flujo de pasos de pago para alquiler de bicicletas

Completa un flujo de pasos de pago en un escenario de alquiler de bicicletas: incluye contenido real, controles interactivos, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.

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

Experimento de jerarquía de pesos tipográficos para revista urbana

Experimento de jerarquía de grosor tipográfico en el escenario de una revista urbana: incluye contenido real, controles accionables, retroalimentación clara de 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
0208Animación y microinteracciones

Transición de forma del botón de la herramienta de enfoque

Completa la transición de forma de un botón en el escenario de herramienta de enfoque: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Animación y microinteraccionesTransición morfológica de botonesHTMLCSS AnimationJavaScript
Abrir y ejecutar
0209efectos visuales creativos

Formas orgánicas fluidas del Jardín Nocturno

Formas fluidas orgánicas completadas en el escenario Jardín Nocturno: contenido real, controles accionables, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

efectos visuales creativosForma fluida orgánicaHTMLCSS AnimationJavaScript
Abrir y ejecutar
0210Dibujo y visualización de datos

Gráfico de líneas de la tendencia del progreso de aprendizaje

En un entorno de progreso de aprendizaje, realiza un gráfico de líneas de tendencia: incluye contenido real, controles interactivos, retroalimentación de estado clara y diseño adaptable a distintos tamaños.

Dibujo y visualización de datosGráfico de líneas de tendenciaHTMLCanvasJavaScript
Abrir y ejecutar
0211Capacidades de medios y dispositivos del navegador

Observador de consultas de medios para espacio de demostración

En el contexto de una sala de presentación, completa un observador de consultas de medios: incluye contenido realista, controles accionables, un estado claro y un diseño adaptable a distintos tamaños.

Capacidades de medios y dispositivos del navegadorobservador de media queriesHTMLCSSBrowser API
Abrir y ejecutar
0212Miniaplicaciones y minijuegos

Quiz rápido para el recreo

Completa un cuestionario rápido en un escenario de descanso entre clases: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Miniaplicaciones y minijuegoscuestionario rápidoHTMLCSSJavaScript
Abrir y ejecutar
0213Controles y selectores básicos

Control deslizante de rango para modo lectura

Completa un ajustador de rango en el contexto del modo de lectura: incluye contenido real, controles operables, feedback de estado claro y diseño adaptable a distintos tamaños.

Controles y selectores básicosajustador de rangoHTMLCSSJavaScript
Abrir y ejecutar
0214Formularios y entrada

Entrada de sugerencias locales para la inscripción al curso

En el escenario de inscripción a cursos, completa la entrada con sugerencias locales: incluye contenido real, controles accionables, comentarios de estado claros y diseño adaptable a distintos tamaños.

Formularios y entradaEntrada de sugerencia localHTMLCSSJavaScript
Abrir y ejecutar
0215Navegación y menús

Pestañas del espacio de trabajo de la base de conocimientos

Completa una pestaña de espacio de trabajo para escenarios de base de conocimiento: incluye contenido real, controles accionables, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.

Navegación y menúsPestañas del espacio de trabajoHTMLCSSJavaScript
Abrir y ejecutar
0216Superposición y retroalimentación de estado

Pila de notificaciones del centro de tareas

Completa un stack de notificaciones en un escenario de centro de tareas: contiene contenido real, controles interactivos, retroalimentación clara de estado y un diseño adaptable a distintos tamaños.

Superposición y retroalimentación de estadoPila de notificacionesHTMLCSSJavaScript
Abrir y ejecutar