Programación de Medios Interactivos
Aprende a construir aplicaciones web modernas desde cero: HTML, CSS y JavaScript con ejemplos prácticos en cada sesión.
¿Qué aprenderás?
-
HTML semántico
Estructura documentos web con etiquetas estándar y accesibles.
-
CSS moderno
Maqueta con Flexbox, Grid y diseño responsive (mobile-first).
-
JavaScript
Añade interactividad, manipula el DOM y consume APIs.
-
Herramientas reales
VS Code, Git, Live Server y flujos de trabajo profesionales.
-
Proyectos prácticos
Aplica los conocimientos en ejercicios y proyectos de cada sesión.
-
Fundamentos sólidos
Base para frameworks modernos como React, Vue o Astro.
¿Cómo usar este curso?
-
Sigue el índice
Las sesiones están ordenadas de forma progresiva. Avanza a tu ritmo.
-
Lee y practica
Cada sesión tiene teoría, ejemplos interactivos y recursos adicionales.
-
Navega con facilidad
Usa los botones "Anterior" y "Siguiente" para moverte entre sesiones.
¿Listo para empezar?
Comienza desde la primera sesión o explora el índice completo.
Índice de sesiones
HTML
Sesión 01 - Introducción a Web
Introducción a la asignatura, HTML básico y herramientas
Sesión 02 - HTML Avanzado
Imágenes, listas, tablas, multimedia y enlaces
Sesión 03 - HTML5 Semántico
Elementos semánticos, atributos id/class, block vs inline
Sesión 05 - Formularios HTML
Formularios, inputs, validación y elementos de formulario
CSS
Sesión 04 - Introducción a CSS
Selectores, propiedades y formas de incluir CSS
Sesión 06 - CSS Box Model y Reset CSS
CSS Reset, box-sizing y el modelo de caja
Sesión 07 - CSS: border-radius, box-shadow y height
Esquinas redondeadas, sombras y unidades de altura
Sesión 08 - CSS Flexbox
Modelo de diseño flexible para layouts modernos
Sesión 09 - Actividad de Maquetación con Flexbox
Práctica de maquetación: flex-grow, flex-basis, flex-shrink y :hover
Sesión 10 - Corrección de la Actividad MWC
position: fixed, variables CSS, pseudo-clases y backdrop-filter
Sesión 11 - Introducción a CSS Grid
Sistema de maquetación bidimensional con CSS Grid Layout
Sesión 12 - CSS Grid Declarativo: grid-template-areas
Enfoque declarativo de CSS Grid con grid-template-areas y grid-area
Sesión 13 - CSS Positioning
Posicionamiento CSS: static, relative, absolute, fixed y sticky
Sesión 14 - CSS Transitions, Transforms y Animations
Animaciones y transformaciones en CSS
Sesión 15 - Responsividad en Diseño Web
Diseño web responsivo: media queries, mobile-first y desktop-first
JavaScript
Sesión 17 - Introducción a JavaScript
Introducción al lenguaje de programación JavaScript, tipos de datos, operadores, variables, estructuras de control y funciones
Sesión 18 - JavaScript: DOM, Arrays y forEach
Manipulación del DOM, eventos, colecciones y arrays con forEach
Sesión 19 - JavaScript: Contenido del DOM y Temporizadores
Manipulación de contenido del DOM y temporizadores con setTimeout
Sesión 20 - JavaScript: El objeto Date y Librerías de Terceros
Objeto Date, timestamps, conversión de unidades de tiempo y librerías de terceros
Sesión 21 - Corrección de la Cuenta Atrás y Presentación de la Práctica
Revisión de errores comunes en proyectos de cuenta atrás y presentación de la práctica TripPlanner+
Sesión 22 - JavaScript: Promesas, `fetch` y `async/await`
Programación asíncrona: promesas, fetch API, .then()/.catch() y async/await
Sesión 23 - Chat con Gemini desde Frontend
Construir un chat interactivo en el navegador consumiendo la API de Gemini
Sesión 24 - Propagación de Eventos: bubbling, `stopPropagation` y `stopImmediatePropagation`
Propagación de eventos en el DOM: bubbling, stopPropagation y stopImmediatePropagation