Build Fast Websites with Astro Course

Lesson 1 • Running and Previewing Your First Site

Teaches dev-server commands, hot reload behavior, and the production build preview. Students ship a live local page by the end of this section.

Lesson 2 • Astro Project Structure Overview

Maps every folder and file in a freshly scaffolded project. Students gain the mental model needed to navigate and extend any Astro codebase.

Lesson 3 • Setting Up Your Development Environment

Guides installation of Node.js, a package manager, and the Astro CLI. Ensures every student has a runnable local environment before proceeding.

Lesson 1 • Scoped Styles and Global CSS

Explains Astro's automatic CSS scoping and how to opt into global styles. Students control styling without class-name collisions.

Lesson 2 • Expressions and Dynamic Content

Teaches JSX-like expressions, conditional rendering, and list iteration inside templates. Students render dynamic data without shipping JavaScript to the browser.

Lesson 3 • Anatomy of an .astro File

Breaks down the frontmatter fence, template body, and scoped styles in one file. Establishes the component model used throughout the rest of the course.

Lesson 4 • Props and Component Composition

Covers typed props, default values, and slot-based composition. Students build flexible, reusable UI blocks that accept external data.

Lesson 1 • Navigation Components and Active States

Builds reusable nav components that highlight the current page. Students apply Astro.url to drive active-link logic without client JavaScript.

Lesson 2 • File-Based Routing Fundamentals

Maps file paths in src/pages/ to browser URLs automatically. Students understand how Astro converts folder structure into navigable routes.

Lesson 3 • Dynamic Routes with getStaticPaths

Teaches bracket-syntax route files and the getStaticPaths function for pre-rendering parameterized pages. Students generate hundreds of pages from a single template.

Lesson 1 • Content-Driven Dynamic Routes

Combines getStaticPaths with getCollection to generate one page per content entry. Students build a fully automated blog or docs route system.

Lesson 2 • Markdown Basics in Astro

Renders Markdown files as pages and explains frontmatter parsing. Students convert plain text content into styled HTML pages immediately.

Lesson 3 • Querying and Rendering Collections

Covers getCollection(), getEntry(), and rendering entry bodies. Students pull collection data into pages and dynamic routes efficiently.

Lesson 4 • MDX for Rich Interactive Content

Adds the MDX integration to embed components inside Markdown. Students author content that mixes prose with interactive UI elements.

Lesson 1 • Server-Side Rendering and Hybrid Mode

Enables SSR output mode and per-page prerender overrides. Students choose static or dynamic rendering at the route level.

Lesson 2 • Build-Time Data Fetching

Uses top-level await in frontmatter to call APIs during the build. Students embed live external data into fully static HTML output.

Lesson 3 • API Routes and Endpoints

Creates .ts endpoint files in src/pages/ that return JSON or other responses. Students build lightweight backend endpoints without a separate server.

Lesson 4 • Environment Variables and Secrets

Manages API keys with .env files and Astro's import.meta.env. Students keep credentials out of source control and client bundles.

Lesson 1 • Understanding the Islands Architecture

Explains how Astro isolates interactive components from static HTML. Students grasp why selective hydration outperforms full-page JavaScript bundles.

Lesson 2 • Performance Profiling of Islands

Measures JavaScript bundle size and hydration timing using browser DevTools. Students validate that island usage meets performance budgets.

Lesson 3 • Client Hydration Directives

Covers client:load, client:idle, client:visible, and client:only directives. Students pick the right hydration strategy for each interactive component.

Lesson 4 • Sharing State Between Islands

Uses nano stores or context patterns to synchronize state across isolated islands. Students build cohesive UIs without a global framework runtime.

Lesson 1 • Astro Image Component and Optimization

Uses the built-in Image and Picture components to automate format conversion and resizing. Students eliminate render-blocking images without manual tooling.

Lesson 2 • Static Asset Handling

Explains the difference between src/assets/ and public/ for asset management. Students choose the correct location for each asset type.

Lesson 3 • Build Output Analysis and Optimization

Audits the dist/ folder and Lighthouse report to find optimization opportunities. Students reduce total page weight and improve Core Web Vitals scores.

Lesson 4 • CSS Frameworks and Preprocessors

Integrates Tailwind CSS or a CSS preprocessor via Astro integrations. Students apply utility-first or preprocessed styles without build-tool friction.

Lesson 1 • Automating Builds with CI/CD

Sets up automated build and deploy pipelines triggered by Git pushes. Students eliminate manual deployments and catch errors before they reach production.

Lesson 2 • Static Deployment to CDN Platforms

Deploys the dist/ output to edge CDN platforms with zero-config adapters. Students go from local build to live URL in minutes.

Lesson 3 • SSR Deployment with Adapters

Installs platform-specific Astro adapters for Node.js, edge, or serverless targets. Students deploy SSR-enabled sites to the correct runtime.

Lesson 4 • Monitoring and Rollback Strategies

Integrates uptime monitoring and uses platform rollback features to recover from bad deploys. Students maintain site reliability after launch.