Curso de Programación Web

Clase 1 • Control de Versiones con Git Básico

Enseña los flujos de trabajo de init, add, commit y push para rastrear cambios en el código. Asegura que los estudiantes puedan guardar y recuperar el trabajo desde el principio.

Clase 2 • Configurando tu Editor de Código

Instala y configura un editor de código moderno con extensiones esenciales. Habilita directamente la codificación eficiente a lo largo del curso.

Clase 3 • Sistemas de Archivos y Estructura de Proyectos

Explica las jerarquías de carpetas, las convenciones de nombres de archivos y las rutas relativas vs. absolutas. Evita enlaces rotos y proyectos desorganizados.

Clase 4 • Usando las Herramientas de Desarrollo del Navegador

Presenta los paneles Elements, Console y Network para inspeccionar páginas en vivo. Construye hábitos de depuración utilizados en cada capítulo posterior.

Clase 1 • Formularios HTML y Tipos de Entrada

Construye formularios con etiquetas, inputs, selects, textareas y botones de envío. Sienta las bases para la recolección de datos del usuario que se cubre en capítulos posteriores.

Clase 2 • Enlaces, Imágenes y Medios

Explica las etiquetas anchor, los atributos de imagen y los elementos de medios incrustados. Conecta páginas y activos en un documento navegable cohesivo.

Clase 3 • Listas, Tablas y Estructuras de Datos

Enseña listas ordenadas, desordenadas y de definición, además del marcado accesible de tablas. Prepara a los estudiantes para presentar datos estructurados correctamente.

Clase 4 • Anatomía del Documento HTML

Desglosa las secciones DOCTYPE, head y body y sus metadatos requeridos. Establece el esqueleto que seguirá cada archivo HTML del curso.

Clase 5 • Elementos Semánticos de HTML5

Presenta los elementos header, nav, main, article, section, aside y footer. Mejora la accesibilidad y la interpretación del contenido de la página por parte de los motores de búsqueda.

Clase 1 • El Modelo de Caja en CSS

Explica las capas de contenido, relleno, borde y margen, y el comportamiento de box-sizing. Resuelve la confusión de diseño más común que enfrentan los principiantes.

Clase 2 • Sintaxis y Selectores CSS

Cubre conjuntos de reglas, declaraciones y selectores de clase, ID y elemento. Establece el mecanismo de focalización para todo el trabajo de estilizado futuro.

Clase 3 • Fondos, Bordes y Sombras

Aplica imágenes de fondo, degradados, estilos de borde y sombras de caja. Agrega profundidad visual y pulido a los componentes de la página.

Clase 4 • Colores, Tipografía y Unidades

Enseña valores de color hex, RGB y HSL, además de propiedades de fuente y unidades CSS. Permite decisiones de diseño visual consistentes en todo un proyecto.

Clase 1 • Posicionamiento y Z-Index

Cubre el posicionamiento absolute, fixed y sticky, además del contexto de apilamiento. Permite superposiciones, encabezados fijos y diálogos modales.

Clase 2 • Diseño Responsivo y Media Queries

Aplica puntos de quiebre y unidades fluidas para adaptar diseños a distintos tamaños de pantalla. Produce diseños mobile-first que funcionan en cualquier dispositivo.

Clase 3 • Fundamentos de CSS Grid

Define plantillas de cuadrícula, filas, columnas y propiedades de espacio para diseños bidimensionales. Permite estructuras de página complejas que no se pueden lograr solo con Flexbox.

Clase 4 • Modos de Visualización y Flujo Normal

Revisa los valores de display block, inline e inline-block y el flujo del documento. Proporciona la base necesaria para entender cuándo se requiere Flexbox o Grid.

Clase 1 • Bucles e Iteración

Enseña los bucles for, while y for...of para repetir operaciones sobre datos. Prepara a los estudiantes para procesar arrays y colecciones de manera eficiente.

Clase 2 • Variables, Tipos de Datos y Operadores

Presenta let, const, los tipos primitivos y los operadores aritméticos y de comparación. Establece la base de manejo de datos para todo el código JavaScript.

Clase 3 • Arrays y Objetos

Cubre métodos de array y objetos literales para almacenar y manipular datos estructurados. Apoya directamente la manipulación del DOM y el manejo de datos de API en capítulos posteriores.

Clase 4 • Funciones y Alcance

Define declaraciones de funciones, expresiones, funciones flecha y alcance de variables. Permite bloques de código reutilizables y modulares a lo largo de un proyecto.

Clase 1 • Delegación y Propagación de Eventos

Explica los patrones de burbujeo, captura y delegación para un manejo eficiente de eventos. Evita pérdidas de memoria y simplifica las interacciones con listas dinámicas.

Clase 2 • Seleccionando y Recorriendo el DOM

Utiliza querySelector, getElementById y métodos de recorrido de padres/hijos. Permite apuntar con precisión a cualquier elemento en una página en vivo.

Clase 3 • Creando y Eliminando Nodos del DOM

Construye nuevos elementos con createElement y los inserta o elimina dinámicamente. Permite el renderizado de listas, la creación de modales y patrones de UI dinámicos.

Clase 4 • Modificando Elementos y Contenido

Cambia el texto, el HTML, los atributos y las clases CSS de los elementos seleccionados. Produce actualizaciones visibles de la página sin recargar el navegador.

Clase 1 • Promises y Encadenamiento

Crea y encadena Promises usando .then() y .catch() para tareas asíncronas secuenciales. Reemplaza los callbacks anidados con código legible y lineal.

Clase 2 • Renderizando Datos de API en el DOM

Mapea arrays JSON obtenidos a elementos HTML generados dinámicamente. Completa el pipeline completo de obtención de datos a visualización en un proyecto funcional.

Clase 3 • Obteniendo Datos con la Fetch API

Envía solicitudes GET y POST a APIs REST y analiza las respuestas JSON. Permite la visualización de datos en tiempo real desde servicios externos.

Clase 4 • Sintaxis Async/Await

Reescribe cadenas de Promises usando funciones async y expresiones await. Produce código más limpio y de aspecto sincrónico para flujos de trabajo asíncronos complejos.

Clase 1 • Implementando Funcionalidades de JavaScript

Agrega manipulación del DOM, manejo de eventos e integración de API al proyecto. Transforma la carcasa estática en una aplicación completamente interactiva.

Clase 2 • Desplegando a un Hosting en Vivo

Publica el proyecto terminado en una plataforma de hosting estático usando despliegue basado en Git. Produce una URL compartible para el portafolio y postulaciones laborales.

Clase 3 • Probando y Depurando la Aplicación

Utiliza DevTools, registro en consola y casos de prueba manuales para encontrar y corregir bugs. Asegura que la aplicación funcione correctamente antes del despliegue.

Clase 4 • Construyendo la Base de HTML y CSS

Construye el marcado semántico y el diseño responsivo para la carcasa de la aplicación. Aplica todas las habilidades previas de HTML y CSS en una base de código unificada.