Curso de HTML, CSS y Javascript

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

Instala y configura un editor de código, herramientas de desarrollo del navegador y estructura local de archivos. 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 rastreen cada proyecto desde el primer día. Establece hábitos profesionales antes de que la complejidad del código aumente.

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 Encabezado

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, Multimedia y Figuras

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

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

Reemplaza los divs genéricos con 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 • 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 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 tipo y color consistentes son la base de los sistemas de diseño visual.

Lección 4 • Selectores y Especificidad CSS

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 • Colocación en Grid y Áreas Nombradas

Coloca 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 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 breakpoints y una estrategia mobile-first para adaptar layouts a diferentes 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 los 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 de flecha mientras explica las cadenas de ámbito. El dominio del ámbito previene fugas de variables y errores de closures.

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 utilizadas en cada aplicación JS.

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

Crea y manipula arreglos utilizando 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 impulsan 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 adjunta y elimina nodos obsoletos. La creación dinámica de nodos permite la representación de listas y patrones de estilo de componentes.

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

Aprovecha la propagación 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

Utiliza 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 Promises utilizando funciones async y expresiones await para un código más 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 • Representación de Datos de API en el DOM

Mapea arreglos JSON obtenidos a elementos HTML y maneja los estados de carga y error visualmente. Conecta la recuperación de datos asíncrona 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 estándares reales de entrega profesional.

Lección 2 • Estilizado con CSS y Diseño Responsivo

Aplica un sistema de diseño usando variables CSS, Flexbox y Grid con total responsividad. Un 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 descontrol 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 del DOM, manejo de eventos y gestión de estado en vanilla JS. Integra todas las habilidades de JS de los capítulos 5, 6 y 7 en una sola base de código.