astro frontend masters

Este é um repositório complementar para o curso Astro em Frontend Masters.

Configurar

O branch start deste repositório contém alguns recursos adicionais e é usado como ponto de partida para o curso:

Recomendamos usar o Node versão 18 para este curso.

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

O que estamos construindo?

Site de pequenas empresas que usa vários fluxos de trabalho comuns que muitos (a maioria?) Sites acabam seguindo.

• Página de destino de marketing
  • Imagens de herói
    • Tratamento de imagens
  • Cartões
    • Produtos em destaque
  • Captura de boletim informativo
• Comprar
  • Layout avançado (aninhado)
  • Estado compartilhado
    • Carrinho sólido
    • Botões de item React (adicionar ao carrinho)
    • Lojas Nano para compartilhar estado
• Blogue
  • Coleções de conteúdo
    • Remarcação
  • Rotas dinâmicas
  • Feed RSS
• Sobre
  • Página de redução
• página 404

Quais recursos queremos cobrir?

• Inicializando um novo site Astro
• Desenvolvimento local
• Páginas
  • Tipos de arquivos suportados
    • Astro
    • Remarcação
    • HTML
  • Roteamento básico
  • Ligações
  • Páginas 404 personalizadas
• Componentes astronômicos
  • Matéria inicial
  • Caça-níqueis
• Layouts
  • Layouts básicos
  • Layouts avançados
• Buscando dados
  • Usando fetch no Astro e outros componentes
  • Carregando dados da API
  • Carregando de um CMS sem cabeça
• Estilo
  • Estilo em componentes Astro
    • Estilos com escopo
    • Estilos globais
  • Brindes Astro para CSS
    • class:list
    • define:vars
  • Importando folhas de estilo
    • local
    • pacotes npm
  • Em estruturas:
    • Módulos CSS
• Rotas dinâmicas
  • Quando você deseja renderizar páginas uma vez no momento da construção
• Paginação
• Coleções de conteúdo
  • Configuração básica e configuração
    • Definindo um esquema
    • Lesmas personalizadas
  • Usando coleções para construir páginas
    • Listando páginas
    • Páginas de entrada completas
• Pontos finais
  • RSS
  • APIs
    • Estático
• Modo SSR
  • Roteamento dinâmico
  • Quando você deseja renderizar páginas em cada solicitação
  • Pontos de extremidade da API
• Tratamento de imagens
  • O diretório assets
• Componentes JS hidratantes
  • client:* diretivas
  • Usando vários frameworks
  • Compartilhando estado entre ilhas
  • Compartilhando estado entre estruturas