Interfaces web

Todos los programas de los otros cursos imprimen en la consola. Pero las personas ven un programa a través de una pantalla: una lista de productos, un botón «Comprar», un formulario que dice qué está mal, una página que carga sin congelarse. Este curso enseña a hacer una pantalla así: primero la plataforma del navegador, luego los componentes con los que se construye una interfaz grande.

Qué aprendes

El curso tiene dos partes.

Parte 1: la plataforma

La estructura de la página: los elementos y el árbol que el navegador construye con ellos, texto, enlaces y tablas, formularios, accesibilidad.
Cómo se ve: la cascada y la especificidad, las cajas, flexbox, grid y una página que funciona en el celular.
JavaScript en la página: el DOM, eventos, una lista a partir de datos y datos de una API, con cargando, error y vacío.

Parte 2: componentes con React o Vue

Componentes: la interfaz como función de los datos, props, listas y claves, condiciones.
Estado: volver a dibujar, actualizaciones inmutables, estado derivado y compartido.
Efectos, datos y formularios: efectos y limpieza, peticiones que compiten, formularios con validaciones, estado compartido.
Una aplicación completa: enrutamiento, velocidad, pruebas de componentes y cómo es un proyecto real.
Proyecto: el escaparate de la tienda: un catálogo, un carrito, un pedido y una API en una sola aplicación.

Cómo se aprende aquí

Cada lección parte de un problema en una tienda en línea: un precio que de repente es un enlace, un botón fuera de la pantalla del celular, una lista que muestra datos viejos. Luego una escena muestra la idea: el árbol que construye el navegador, la regla que gana la cascada, el evento que sube en burbuja, el componente que se vuelve a dibujar.

El código se ejecuta dentro de la propia página, en un sandbox sin red y con una API de la tienda simulada. Los ejercicios se comprueban por su comportamiento: la comprobación pulsa los botones y encuentra los elementos por rol y nombre, como los encuentra un lector de pantalla. La primera parte es la misma para React y Vue, y en la segunda eliges la biblioteca y puedes cambiarla cuando quieras.

Qué necesitas saber

JavaScript hasta «JavaScript moderno»: funciones, objetos, arreglos con map y filter, módulos y async/await. En el navegador no necesitas instalar nada.