Curso de HTML, CSS y Javascript

Clase 1 • Configuración de tu entorno de desarrollo

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

Clase 2 • Control de versiones con nociones básicas 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 aumente la complejidad del código.

Clase 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.

Clase 1 • Listas, enlaces y navegación

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

Clase 2 • Elementos de texto y encabezados

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

Clase 3 • Imágenes, medios y figuras

Inserta 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.

Clase 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 para máquinas y los puntajes de accesibilidad.

Clase 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.

Clase 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.

Clase 3 • Tipografía y color

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

Clase 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.

Clase 1 • Colocación en Grid y áreas con nombre

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

Clase 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.

Clase 3 • Diseño responsivo con media queries

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

Clase 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 con dificultad.

Clase 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 errores comunes.

Clase 2 • Funciones y ámbito

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

Clase 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.

Clase 4 • Arrays y métodos de arrays

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

Clase 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.

Clase 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 el renderizado de listas y patrones de estilo de componentes.

Clase 3 • Delegación de eventos y bubbling

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

Clase 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.

Clase 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.

Clase 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.

Clase 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 asincrónica de datos con la manipulación del DOM del capítulo anterior.

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

Clase 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 entre pares estructurada. El despliegue y la revisión simulan estándares de entrega profesionales reales.

Clase 2 • Estilizado con CSS y layout 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.

Clase 3 • Planificación del proyecto y arquitectura

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.

Clase 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 JS vanilla. Integra todas las habilidades de JS de los capítulos 5, 6 y 7 en una sola base de código.