astro frontend masters

Dies ist ein Begleit-Repo für den Astro-Kurs zu Frontend Masters.

Aufstellen

Der start aus diesem Repository enthält einige zusätzliche Assets und wird als Ausgangspunkt für den Kurs verwendet:

Wir empfehlen für diesen Kurs die Verwendung der Node-Version 18.

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

Was bauen wir?

Website für kleine Unternehmen, die mehrere der gängigen Arbeitsabläufe verwendet, denen viele (die meisten?) Websites letztendlich folgen.

• Marketing-Landingpage
  • Heldenbilder
    • Bildbearbeitung
  • Karten
    • Ausgewählte Produkte
  • Newsletter-Erfassung
• Geschäft
  • Erweitertes Layout (verschachtelt)
  • Geteilter Zustand
    • Solider Wagen
    • Reagieren Sie auf Artikelschaltflächen (in den Warenkorb legen)
    • Nano-Stores teilen den Staat
• Blog
  • Inhaltssammlungen
    • Abschlag
  • Dynamische Routen
  • RSS-Feed
• Um
  • Markdown-Seite
• 404 Seite

Welche Funktionen möchten wir abdecken?

• Initialisierung einer neuen Astro-Site
• Lokale Entwicklung
• Seiten
  • Unterstützte Dateitypen
    • Astro
    • Abschlag
    • HTML
  • Grundlegendes Routing
  • Links
  • Benutzerdefinierte 404-Seiten
• Astro-Komponenten
  • Frontmatter
  • Spielautomaten
• Layouts
  • Grundlegende Layouts
  • Erweiterte Layouts
• Daten abrufen
  • Verwenden von fetch in Astro und anderen Komponenten
  • API-Daten werden geladen
  • Laden von einem Headless-CMS
• Styling
  • Styling mit Astro-Komponenten
    • Stile mit Gültigkeitsbereich
    • Globale Stile
  • Astro-Goodies für CSS
    • class:list
    • define:vars
  • Stylesheets importieren
    • lokal
    • npm-Pakete
  • In Frameworks:
    • CSS-Module
• Dynamische Routen
  • Wenn Sie Seiten einmal zur Erstellungszeit rendern möchten
• Pagination
• Inhaltssammlungen
  • Grundlegende Einrichtung und Konfiguration
    • Definieren eines Schemas
    • Benutzerdefinierte Schnecken
  • Verwenden von Sammlungen zum Erstellen von Seiten
    • Auflistungsseiten
    • Vollständige Einstiegsseiten
• Endpunkte
  • RSS
  • APIs
    • Statisch
• SSR-Modus
  • Dynamisches Routing
  • Wenn Sie Seiten bei jeder Anfrage rendern möchten
  • API-Endpunkte
• Bildbearbeitung
  • Das assets -Verzeichnis
• Feuchtigkeitsspendende JS-Komponenten
  • client:* -Anweisungen
  • Verwendung mehrerer Frameworks
  • Gemeinsamer Staat zwischen Inseln
  • Zustandsfreigabe zwischen Frameworks