Curso de Programación Web

Lección 1 • Control de Versiones con Git Básico

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

Lección 2 • Configuración de Tu Editor de Código

Instala y configura un editor de código moderno con extensiones esenciales. Permite directamente una codificación eficiente durante todo el curso.

Lección 3 • Sistemas de Archivos y Estructura de Proyectos

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

Lección 4 • Uso de las Herramientas de Desarrollo del Navegador

Presenta los paneles Elements, Console y Network para inspeccionar páginas activas. Desarrolla hábitos de depuración que se usarán en cada capítulo posterior.

Lección 1 • Formularios HTML y Tipos de Input

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

Lección 2 • Enlaces, Imágenes y Medios

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

Lección 3 • Listas, Tablas y Estructuras de Datos

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

Lección 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 en el curso.

Lección 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.

Lección 1 • El Modelo de Caja CSS

Explica las capas de contenido, padding, border y margin, y el comportamiento de box-sizing. Resuelve la confusión de layout más común que encuentran los principiantes.

Lección 2 • Sintaxis y Selectores CSS

Cubre conjuntos de reglas, declaraciones, selectores de clase, ID y elemento. Establece el mecanismo de direccionamiento para todo el trabajo de estilizado posterior.

Lección 3 • Fondos, Bordes y Sombras

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

Lección 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.

Lección 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.

Lección 2 • Diseño Responsivo y Media Queries

Aplica breakpoints y unidades fluidas para adaptar layouts a diferentes tamaños de pantalla. Produce diseños mobile-first que funcionan en cualquier dispositivo.

Lección 3 • Fundamentos de CSS Grid

Define plantillas de grid, filas, columnas y propiedades de gap para layouts bidimensionales. Permite estructuras de página complejas inalcanzables solo con Flexbox.

Lección 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.

Lección 1 • Bucles e Iteración

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

Lección 2 • Variables, Tipos de Datos y Operadores

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

Lección 3 • Arreglos y Objetos

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

Lección 4 • Funciones y Ámbito

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

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

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

Lección 2 • Selección y Recorrido del DOM

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

Lección 3 • Creación y Eliminación de Nodos del DOM

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

Lección 4 • Modificación de Elementos y Contenido

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

Lección 1 • Promises y Encadenamiento

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

Lección 2 • Renderizado de Datos de API en el DOM

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

Lección 3 • Obtención de 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.

Lección 4 • Sintaxis Async/Await

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

Lección 1 • Implementación de Características de JavaScript

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

Lección 2 • Despliegue en 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 aplicaciones de empleo.

Lección 3 • Pruebas y Depuración de la Aplicación

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

Lección 4 • Construcción de la Base HTML y CSS

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