astro frontend masters

Este es un repositorio complementario para el curso Astro en Frontend Masters.

Configuración

La rama start de este repositorio contiene algunos recursos adicionales y se utiliza como punto de partida para el curso:

Recomendamos utilizar la versión 18 de Node para este curso.

git clone https://github.com/learnwithjason/astro-frontend-masters.git
cd astro-frontend-masters
git checkout start
npm install

¿Qué estamos construyendo?

Sitio para pequeñas empresas que utiliza varios de los flujos de trabajo comunes que muchos (¿la mayoría?) sitios web terminan siguiendo.

• Página de inicio de marketing
  • Imágenes de héroe
    • Manejo de imágenes
  • Tarjetas
    • Productos destacados
  • Captura de boletines
• Comercio
  • Diseño avanzado (anidado)
  • Estado compartido
    • Carro sólido
    • Botones de artículo de reacción (añadir al carrito)
    • Nano tiendas para compartir estado
• Blog
  • Colecciones de contenido
    • Reducción
  • Rutas dinámicas
  • canal RSS
• Acerca de
  • página de rebajas
• 404 página

¿Qué características queremos cubrir?

• Inicializando un nuevo sitio Astro
• Desarrollo local
• paginas
  • Tipos de archivos admitidos
    • Astro
    • Reducción
    • HTML
  • Enrutamiento básico
  • Campo de golf
  • Páginas 404 personalizadas
• Componentes astronómicos
  • Frontasunto
  • Tragamonedas
• Diseños
  • Diseños básicos
  • Diseños avanzados
• Obteniendo datos
  • Usando fetch en Astro y otros componentes
  • Cargando datos API
  • Cargando desde un CMS sin cabeza
• Estilo
  • Estilo en componentes Astro
    • Estilos con alcance
    • Estilos globales
  • Regalos astro para CSS
    • class:list
    • define:vars
  • Importar hojas de estilo
    • local
    • paquetes npm
  • En marcos:
    • módulos CSS
• Rutas dinámicas
  • Cuando desea renderizar páginas una vez en el momento de la compilación
• Paginación
• Colecciones de contenido
  • Configuración y configuración básica
    • Definiendo un esquema
    • Babosas personalizadas
  • Usar colecciones para crear páginas
    • Listado de páginas
    • Páginas de entrada completas
• Puntos finales
  • RSS
  • API
    • Estático
• Modo SSR
  • Enrutamiento dinámico
  • Cuando desea representar páginas en cada solicitud
  • Puntos finales API
• Manejo de imágenes
  • El directorio assets
• Componentes hidratantes de JS
  • client:* directivas
  • Usando múltiples marcos
  • Estado compartido entre islas
  • Compartir estado entre marcos