/astro-demo

Primary LanguageCSS

Frontend Masters

This is a companion repo for the Astro course on Frontend Masters.

Setup

The start branch from this repository contains some additional assets and is used as a starting point for the course:

We recommend using Node version 18 for this course.

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

What are we building?

Small business site that uses several of the common workflows that many (most?) websites end up following.

  • Marketing landing page
    • Hero images
      • Image handling
    • Cards
      • Featured Products
    • Newsletter capture
  • Shop
    • Advanced layout (nested)
    • Shared state
      • Solid cart
      • React item buttons (add to cart)
      • Nano stores to share state
  • Blog
    • Content Collections
      • Markdown
    • Dynamic routes
    • RSS feed
  • About
    • Markdown page
  • 404 page

What features do we want to cover?

  • Initializing a new Astro site
  • Local development
  • Pages
    • Supported file types
      • Astro
      • Markdown
      • HTML
    • Basic routing
    • Links
    • Custom 404 pages
  • Astro components
    • Frontmatter
    • Slots
  • Layouts
    • Basic layouts
    • Advanced layouts
  • Fetching data
    • Using fetch in Astro and other components
    • Loading API data
    • Loading from a headless CMS
  • Styling
    • Styling in Astro components
      • Scoped styles
      • Global styles
    • Astro goodies for CSS
      • class:list
      • define:vars
    • Importing stylesheets
      • local
      • npm packages
    • In frameworks:
      • CSS modules
  • Dynamic routes
    • When you want to render pages once at build time
  • Pagination
  • Content Collections
    • Basic setup and config
      • Defining a schema
      • Custom slugs
    • Using collections to build pages
      • Listing pages
      • Full entry pages
  • Endpoints
    • RSS
    • APIs
      • Static
  • SSR Mode
    • Dynamic routing
    • When you want to render pages on every request
    • API endpoints
  • Image handling
    • The assets directory
  • Hydrating JS components
    • client:* directives
    • Using multiple frameworks
    • Sharing state between islands
    • Sharing state between frameworks