Ir al contenido
wannacode

Interfaces web: Vue

El curso es el mismo para React y Vue, y los ejemplos aquí usan Vue. La primera parte (HTML, CSS, el DOM) es común; la segunda son los componentes. Cada ejemplo se ejecuta y se cambia directamente en la página.

Módulo 0

Bienvenida

1 lección · cómo el navegador muestra una página, el sandbox, React o Vue

  1. Bienvenida

Módulo 1

HTML: la estructura de la página

4 lecciones · elementos, texto, formularios, accesibilidad

  1. El documento HTML
  2. Texto, enlaces, imágenes, tablas
  3. Formularios
  4. Accesibilidad

Módulo 2

CSS: el aspecto de la página

5 lecciones · la cascada, cajas, flexbox, grid, para el celular

  1. Selectores y la cascada
  2. El modelo de caja
  3. Flexbox: fila y columna
  4. Grid: filas y columnas
  5. Diseño responsive

Módulo 3

JavaScript en la página

4 lecciones · el DOM, eventos, una lista a partir de datos, fetch

  1. El DOM: la página desde JavaScript
  2. Eventos
  3. Una lista a partir de datos
  4. Datos desde una API

Módulo 4

Componentes

4 lecciones · JSX y plantillas, props, listas, condiciones

  1. El primer componente
  2. Props: datos desde arriba
  3. Listas y claves
  4. Condiciones: vacío, error, cargando

Módulo 5

Estado

4 lecciones · useState y ref, actualizaciones, valores derivados, estado compartido

  1. Estado
  2. Actualizar objetos y arrays
  3. Estado derivado
  4. Estado compartido: hacia arriba

Módulo 6

Efectos, datos y formularios

4 lecciones · efectos, datos de una API, formularios, estado compartido

  1. Efectos
  2. Datos de una API en un componente
  3. Formularios en un componente
  4. Estado compartido

Módulo 7

Una aplicación completa

4 lecciones · enrutamiento, velocidad, pruebas, un proyecto real

  1. Enrutamiento
  2. Velocidad: cuándo se vuelve a renderizar un componente
  3. Probar componentes
  4. Del sandbox al proyecto

Módulo 8

Proyecto: el escaparate de la tienda

1 lección · catálogo, carrito, pedido y API en uno

  1. El escaparate de la tienda

Práctica

Ejercicios

Todos los ejercicios de las lecciones en un solo lugar, por módulo.

Creado por Ivo Gergov como parte de la campaña de Evo Tech por una educación accesible en programación ·