Programación Básica Web
Aprende a programar desde cero sin conocimientos previos. Domina HTML, CSS y JavaScript construyendo proyectos web interactivos desde el primer día.
Módulo 1: Lógica & Entorno de Desarrollo
Crea las bases de tu pensamiento computacional y configura tu entorno de programación profesional.
Sesión 1.1: El Mundo Web y Arquitectura
Arquitectura cliente-servidor, herramientas fundamentales y uso de la consola del desarrollador.
- →¿Cómo funciona Internet? Protocolos HTTP/HTTPS y DNS.
- →Instalación y personalización de Visual Studio Code.
- →Extensiones esenciales y control de versiones con Git.
- →Uso e inspección con Developer Tools del navegador.
Configurar un entorno de desarrollo profesional y crear el primer repositorio.
Sesión 1.2: Lógica Computacional y Algoritmos
Algoritmos, diagramas de flujo y tus primeras líneas de código real con JavaScript.
- →Pensamiento algorítmico y resolución de problemas por pasos.
- →Variables, constantes y tipos de datos primitivos.
- →Operadores matemáticos, relacionales y de asignación.
- →Ejecución de scripts en Node.js y en el navegador.
Construir una calculadora de consola para resolución de fórmulas matemáticas.
Módulo 2: Estructura Semántica HTML5
Domina el lenguaje que estructura la web. Crea contenidos semánticos, accesibles y optimizados para SEO.
Sesión 2.1: Arquitectura y Etiquetas Semánticas
Etiquetas estructurales, enlaces inteligentes, rutas relativas y manejo de imágenes.
- →Estructura base de un documento HTML5: head, body, meta.
- →Semántica moderna: header, nav, main, section, article, footer.
- →Jerarquía de encabezados (h1-h6) y optimización SEO básica.
- →Inserción y optimización de imágenes, audio y video.
Maquetar la estructura completa de un blog informativo semántico.
Sesión 2.2: Formularios, Tablas y Captura de Datos
Captura de datos de usuarios, tipos de inputs, validaciones nativas y tablas estructuradas.
- →Elementos de formulario: input, select, textarea, button.
- →Tipos de inputs modernos: email, number, date, password.
- →Validaciones HTML5 nativas (required, pattern, min/max).
- →Creación de tablas de datos accesibles con thead, tbody y tfoot.
Desarrollar un formulario de registro y cotización con validaciones.
Módulo 3: Diseño Visual & CSS3 Moderno
De páginas estáticas a interfaces prémium. Controla el diseño visual, colores y la adaptabilidad a dispositivos móviles.
Sesión 3.1: Estilo Visual, Box Model y Tipografía
Modelo de caja (Box Model), selectores, variables CSS y tipografías personalizadas.
- →Selectores CSS: clases, IDs, pseudo-clases y especificidad.
- →El Modelo de Caja: margin, border, padding y content.
- →Tipografías con Google Fonts y diseño tipográfico armónico.
- →Paletas de color, degradados y sombras suaves (box-shadow).
Estilizar una tarjeta de producto prémium con efectos hover y sombras.
Sesión 3.2: Responsive Design & Layouts con Flexbox
Layouts modernos, alineaciones flexibles y adaptación a pantallas de smartphones y tablets.
- →Conceptos clave de Flexbox: flex-direction, justify-content, align-items.
- →Diseño adaptable con Media Queries (mobile-first).
- →Navegaciones responsivas y menús colapsables.
- →Buenas prácticas de UI/UX en dispositivos móviles.
Construir una página de aterrizaje (Landing Page) 100% adaptable.
Módulo 4: Interactividad con JavaScript & Proyecto Final
Dale vida a tus proyectos. Manipulación del DOM, eventos de usuario y construcción de una aplicación web completa.
Sesión 4.1: Control de Flujo, Funciones y Colecciones
Condicionales, bucles, funciones reutilizables y gestión de colecciones de datos.
- →Estructuras condicionales (if/else, switch) y operadores ternarios.
- →Bucles e iteradores: for, while, forEach.
- →Funciones declarativas y funciones flecha (arrow functions).
- →Manejo de Arreglos (Arrays) y Objetos literales.
Crear un gestor de lista de tareas (To-Do List) interactivo en memoria.
Sesión 4.2: Manipulación del DOM & Proyecto Integrador
Captura de eventos de usuario, renderizado dinámico y despliegue a producción.
- →Selección y modificación de elementos con querySelector y addEventListener.
- →Creación y eliminación dinámica de nodos en el DOM.
- →Persistencia local con LocalStorage.
- →Despliegue y publicación gratuita en GitHub Pages o Vercel.
Completar, refinar y publicar el proyecto web integrador en la nube.