Curso de HTML, CSS y JavaScript

Lección 1 • Configuración de tu 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 disponga de 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 sigan 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 las canalizaciones 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, desordenadas 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 Encabezado

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

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

Inserta imágenes, audio y vídeo con los atributos correctos para la accesibilidad y el rendimiento. El texto alternativo y los pies de foto se tratan como obligatorios, no opcionales.

Lección 4 • Elementos de Maquetación Semántica

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

Lección 1 • Explicación del Modelo de Caja

Enseña el contenido, el relleno, el borde y el margen como las cuatro capas de cada elemento. El dominio de box-sizing previene errores de maquetación 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 permiten el cambio de tema 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 utilizando unidades CSS modernas. Las escalas de tipografía y color coherentes 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 de cascada en hojas de estilo más grandes.

Lección 1 • Ubicación en Grid y Áreas con Nombre

Ubica elementos usando números de línea, la palabra clave span y áreas de plantilla con nombre. Las áreas con nombre hacen que las maquetaciones complejas 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 elementos hijos a lo largo de ambos ejes.

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

Aplica puntos de ruptura y una estrategia mobile-first para adaptar maquetaciones a diferentes tamaños de pantalla. Combina Flexbox y Grid con media queries para una capacidad de respuesta lista para producción.

Lección 4 • Fundamentos de CSS Grid

Define grid-template-columns, grid-template-rows y grid-gap para maquetaciones bidimensionales. Grid resuelve problemas de maquetación que Flexbox maneja con dificultad.

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

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

Lección 2 • Funciones y Ámbito

Define funciones con declaraciones, expresiones y sintaxis arrow, explicando las cadenas de ámbito. El dominio del ámbito previene fugas de variables y errores de clausura.

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

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

Lección 4 • Arrays y Métodos de Array

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

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 IU 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 añade y elimina nodos obsoletos. La creación dinámica de nodos permite el renderizado de listas y patrones de estilo componente.

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 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 asíncrono más limpio. El encadenamiento de Promises reemplaza los callbacks anidados en operaciones asíncronas secuenciales.

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

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

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

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 la API REST.

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

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

Lección 2 • Aplicación de Estilos con CSS y Maquetación Responsiva

Aplica un sistema de diseño usando variables CSS, Flexbox y Grid con capacidad de respuesta total. Un diseño visual coherente demuestra el dominio de los capítulos 3 y 4.

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

Define historias de usuario, esquemas visuales y desglose de componentes antes de escribir código. La planificación previene la desviación del alcance y establece un flujo de trabajo de desarrollo profesional.

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

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