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.

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