Curso de HTML, CSS y JavaScript

Lección 1 • Configuración de su Entorno de Desarrollo

Instala y configura un editor de código, las herramientas de desarrollo del navegador y una estructura de archivos local. Garantiza que cada estudiante tenga un espacio de trabajo idéntico y funcional.

Lección 2 • Control de Versiones con Conceptos Básicos de Git

Enseña los flujos de trabajo de init, commit y push para que los estudiantes hagan seguimiento de cada proyecto desde el primer día. Establece hábitos profesionales antes de que aumente la complejidad del código.

Lección 3 • Cómo Funciona la Web

Cubre la comunicación cliente-servidor, las solicitudes HTTP y los pipelines de renderizado del navegador. Fundamenta todas las decisiones de codificación posteriores en el comportamiento real del navegador.

Lección 1 • Listas, Enlaces y Navegación

Construye listas ordenadas, no ordenadas y de descripción, además de elementos de anclaje con atributos. Estos patrones forman la columna vertebral de la estructura de navegación de cada sitio.

Lección 2 • Elementos de Texto y Encabezados

Cubre h1–h6, p, strong, em y blockquote para la jerarquía del contenido. El orden correcto de los encabezados impacta directamente el SEO y la navegación por lectores de pantalla.

Lección 3 • Imágenes, Medios y Figuras

Incrusta imágenes, audio y video con atributos correctos para accesibilidad y rendimiento. El texto alternativo y los pies de foto se tratan como obligatorios, no opcionales.

Lección 4 • Elementos de Diseño Semántico

Reemplaza los divs genéricos por header, main, section, article, aside y footer. El marcado semántico mejora la legibilidad de las máquinas y las puntuaciones de accesibilidad.

Lección 1 • El Modelo de Caja Explicado

Enseña content, padding, border y margin como las cuatro capas de cada elemento. El dominio de box-sizing previene errores de diseño a lo largo del curso.

Lección 2 • Variables CSS y Propiedades Personalizadas

Define y reutiliza tokens de diseño mediante propiedades personalizadas de CSS para hojas de estilo mantenibles. Las variables reducen la repetición y posibilitan el cambio de temas en proyectos posteriores.

Lección 3 • Tipografía y Color

Establece familias tipográficas, tamaños, pesos, alturas de línea y valores de color usando unidades CSS modernas. Las escalas consistentes de tipo y color son la base de los sistemas de diseño visual.

Lección 4 • Selectores CSS y Especificidad

Cubre selectores de elemento, clase, ID, atributo y pseudoclase con cálculo de especificidad. Comprender la especificidad previene conflictos en cascada en hojas de estilo más grandes.

Lección 1 • Ubicación en Grid y Áreas Nombradas

Ubica elementos usando números de línea, la palabra clave span y áreas de plantilla nombradas. Las áreas nombradas hacen que los layouts complejos sean legibles y fáciles de reestructurar.

Lección 2 • Propiedades del Contenedor Flexbox

Controla flex-direction, justify-content, align-items y flex-wrap en el elemento padre. Estas propiedades gobiernan cómo se distribuyen los hijos a lo largo de ambos ejes.

Lección 3 • Diseño Responsivo con Media Queries

Aplica puntos de ruptura y estrategia mobile-first para adaptar layouts a través de tamaños de pantalla. Combina Flexbox y Grid con media queries para una responsividad lista para producción.

Lección 4 • Fundamentos de CSS Grid

Define grid-template-columns, grid-template-rows y grid-gap para layouts bidimensionales. Grid resuelve problemas de diseño que Flexbox maneja de forma incómoda.

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

Declara variables con let, const y var e identifica tipos de datos primitivos. Se abordan la precedencia de operadores y la coerción de tipos para prevenir bugs comunes.

Lección 2 • Funciones y Ámbito

Define funciones con declaraciones, expresiones y sintaxis de flecha mientras explica las cadenas de ámbito. El dominio del ámbito previene la fuga de variables y errores de closure.

Lección 3 • Objetos y Métodos de Objetos

Construye objetos con propiedades y métodos, y accede a ellos mediante notación de punto y corchetes. Los objetos modelan estructuras de datos del mundo real usadas en toda aplicación JS.

Lección 4 • Arreglos y Métodos de Arreglos

Crea y manipula arreglos usando push, pop, map, filter y reduce. Los métodos funcionales de arreglos se utilizan en toda la manipulación del DOM y el trabajo con APIs.

Lección 1 • Modificación de Elementos y Estilos

Cambia textContent, innerHTML, atributos y classList para actualizar la página sin recargar. Estas técnicas potencian las actualizaciones de UI en vivo en aplicaciones de una sola página.

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

Construye nuevos elementos con createElement, los anexa y elimina nodos obsoletos. La creación dinámica de nodos permite la renderización de listas y patrones de estilo de componentes.

Lección 3 • Delegación de Eventos y Burbujeo

Aprovecha el burbujeo de eventos para adjuntar escuchadores únicos a contenedores padres para hijos dinámicos. La delegación reduce el uso de memoria y maneja elementos generados en tiempo de ejecución.

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

Usa querySelector, getElementById y propiedades de recorrido para apuntar a elementos con precisión. La selección precisa es la base de todo comportamiento dinámico de la página.

Lección 1 • Sintaxis de Async/Await

Reescribe cadenas de Promise usando funciones async y expresiones await para un código legible. Async/await es el estándar moderno para todos los flujos de trabajo basados en fetch.

Lección 2 • Promises y Encadenamiento de Promises

Crea y consume Promises con .then(), .catch() y .finally() para un código asincrónico más limpio. El encadenamiento de Promises reemplaza los callbacks anidados en operaciones asincrónicas secuenciales.

Lección 3 • Renderización de Datos de API en el DOM

Mapea arreglos JSON obtenidos a elementos HTML y maneja visualmente los estados de carga y error. Conecta la obtención de datos asincrónicos con la manipulación del DOM del capítulo anterior.

Lección 4 • Obtención de Datos con la Fetch API

Envía solicitudes GET y POST usando fetch(), analiza respuestas JSON y maneja errores. Fetch es la herramienta nativa del navegador para toda comunicación con APIs REST.

Lección 1 • Despliegue y Revisión de Código

Despliega el proyecto en una plataforma de hosting estático y realiza una revisión de código estructurada entre pares. El despliegue y la revisión simulan los estándares reales de entrega profesional.

Lección 2 • Estilización con CSS y Layout Responsivo

Aplica un sistema de diseño usando variables CSS, Flexbox y Grid con total responsividad. El diseño visual consistente demuestra el dominio de los capítulos 3 y 4.

Lección 3 • Planificación y Arquitectura del Proyecto

Define historias de usuario, wireframes y desglose de componentes antes de escribir código. La planificación previene el aumento descontrolado del alcance y establece un flujo de trabajo de desarrollo profesional.

Lección 4 • Lógica de JavaScript e Integración con API

Implementa llamadas fetch, renderización en el DOM, manejo de eventos y gestión de estado en JS vanilla. Integra todas las habilidades de JS de los capítulos 5, 6 y 7 en una sola base de código.