Curso de Programación Web

Lección 1 • Control de versiones con fundamentos de Git

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 el 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. Facilita directamente una codificación eficiente a lo largo del curso.

Lección 3 • Sistemas de archivos y estructura de proyectos

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

Lección 4 • Uso de las herramientas de desarrollo del navegador

Presenta los paneles Elementos, Consola y Red para inspeccionar páginas en vivo. Desarrolla hábitos de depuración utilizados en cada capítulo posterior.

Lección 1 • Formularios HTML y tipos de entrada

Construye formularios con etiquetas, campos de entrada, selección, áreas de texto y botones de envío. Establece las bases para la recopilación de datos de usuario cubierta en capítulos posteriores.

Lección 2 • Enlaces, imágenes y medios

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

Lección 3 • Listas, tablas y estructuras de datos

Enseña listas ordenadas, no ordenadas y de definición, además del marcado accesible de tablas. 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

Introduce 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, relleno, borde y margen, y el comportamiento de box-sizing. Resuelve la confusión de diseño 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 orientación para todo el trabajo de estilos futuro.

Lección 3 • Fondos, bordes y sombras

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

Lección 4 • Colores, tipografía y unidades

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

Lección 1 • Posicionamiento y Z-Index

Cubre el posicionamiento absoluto, fijo 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 puntos de ruptura y unidades fluidas para adaptar diseños 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 cuadrícula, filas, columnas y propiedades de espacio para diseños bidimensionales. Permite estructuras de página complejas imposibles de lograr solo con Flexbox.

Lección 4 • Modos de visualización y flujo normal

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

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

Lección 2 • Variables, tipos de datos y operadores

Introduce 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 • Arrays y objetos

Cubre métodos de array 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 modulares y reutilizables en todo 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 la orientación precisa de 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 la representación de listas, la creación de modales y patrones de interfaz de usuario 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 legible y lineal.

Lección 2 • Representación de datos de API en el DOM

Asigna arrays JSON obtenidos a elementos HTML generados dinámicamente. Completa la canalización completa de obtención de datos a visualización en un proyecto funcional.

Lección 3 • Obtención de datos con la API Fetch

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

Lección 4 • Sintaxis de Async/Await

Reescribe cadenas de Promise 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 funcionalidades JavaScript

Añade 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 alojamiento en vivo

Publica el proyecto terminado en una plataforma de alojamiento estático mediante despliegue basado en Git. Produce una URL compartible para portafolio y solicitudes de empleo.

Lección 3 • Prueba y depuración de la aplicación

Utiliza DevTools, registro en consola y casos de prueba manuales para encontrar y corregir errores. 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 diseño responsivo para la estructura de la aplicación. Aplica todas las habilidades previas de HTML y CSS en una base de código unificada.