Astro icon for course
Project-based course

Learn Astro

A premium interactive course for building modern websites using the Astro web framework

Coding in Public head for course

by Chris Pennington

Coding in Public on YouTube

When learning Astro, you need a guide.

Astro is deceptively complex

In a world of overly-engineered web frameworks, Astro promises a crafted simplicity with excellent developer experience and even better performance.

Yet there’s a sneaky amount of complexity available to you when building with Astro. Start simple—by all means! But as soon as you need it, Astro can:

  • Optimize images
  • Render dynamic routes
  • Build dynamic server APIs
  • Render type-safe content
  • Integrate any UI framework
  • Client-side route page transitions
  • Route navigations through middleware

…and much, much more…

Know your tools

Astro started with a laser focus on content. While still the best option for content-heavy sites, Astro has grown to support a wide range of use cases. The question is: Do you know everything Astro can do?

Astro moves fast…like FAST, FAST! In just over a year, Astro has dropped three major versions. And even between versions, they’ve silently added massive features—like middleware!

Keeping up with all the tools and features is half the battle. I want to help! I’m currently using Astro for nearly a dozen production sites ranging from simple landing pages to near full-stack apps with middlewear, auth-protected routes, real-time databases, and more!

What’s the best way to learn?

Everyone learns differently, but something as fast-moving and exciting as Astro requires a similar approach. You can spend hours reading the Astro docs, track every RFC to production and read the discussed proposals, attend the weekly Community Call to hear the latest updates, build new features into real production sites each week, and more!

That’s what I do! It’s an incredibly effective and worthwhile approach, but it takes a lot of time and isn’t for everyone.

👋 I want to help!

Let’s speed up that process for you. I’ve been coding Astro sites since the early betas and have put together what I know into this self-paced, project-based online course.

What’s In the Course?

The course will focus on using Astro’s built-in tooling and features instead of implementing third-party libraries, tools, and products. Here is an overview of the planned modules.

Section 1: Core Astro


Module 1: Astro Basics

An overview of the basic concepts of Astro websites.
  • Lesson 1: Introduction
  • Lesson 2: Installation and Setup
  • Lesson 3: Structure/Routing Basics
  • Lesson 4: Astro File Structure
  • Lesson 5: Layouts and Slots
  • Lesson 6: First Astro Component
  • Lesson 7: CSS and Styling
  • Lesson 8: Client-side JavaScript
  • Lesson 9: Exercise Card Component

Module 2: Astro Components

Building components using Astro’s custom syntax.
  • Lesson 10: Button Component
  • Lesson 11: Heading Component
  • Lesson 12: Adding TypeScript
  • Lesson 13: Using UI Framework
  • Lesson 14: Exercise Overview
  • Lesson 15: Component Structure
  • Lesson 16: Button Component
  • Lesson 17: Adding CSS
  • Lesson 18: Adding TypeScript

Module 3: Markdown and MDX

Render markdown and MDX components and routes in Astro with page-based routing.
  • Lesson 19: Markdown components
  • Lesson 20: Importing Markdown files
  • Lesson 21: MDX basics
  • Lesson 22: Import components in MDX

Module 4: Content Collections

Write type-safe Markdown or MDX with Astro's content collections.
  • Lesson 23: Content Collections Overview
  • Lesson 24: Data type collection
  • Lesson 25: Content type collection
  • Lesson 26: Referencing other collections
  • Lesson 27: Data Type Collections
  • Lesson 28: Referencing Other Collections
  • Lesson 29: Getting Collections and Entries
  • Lesson 30: TypeScript helpers

Module 5: Rendering and Routing

Learn rendering options and routing in Astro.
  • Lesson 31: Rendering Options Overview
  • Lesson 32: ISR (Pending non-beta release)
  • Lesson 33: Dynamic Routes
  • Lesson 34: Nested Dynamic Routes
  • Lesson 35: SSG Pagination
  • Lesson 36: Excluding Pages and Redirects
  • Lesson 37: Practice Exercises

Module 6: Personal Porfolio Site

Build a personal portfolio site with Astro.
  • 28 Lessons
  • 2 Hours and 40 minutes
  • Publish portfolio site with Netlify
View Demo Site

Section 2: Astro Tools


Module 7: Image Optimization

Optimize local or remote images with Astro.
  • Lesson 66: Image Service Overview
  • Lesson 67: Image Component
  • Lesson 68: Images in Markdown and MDX
  • Lesson 69: Images in Content Collections
  • Lesson 70: Images in UI frameworks
  • Lesson 71: Image practice 1
  • Lesson 72: Responsive Image Options
  • Lesson 73: Picture component
  • Lesson 74: getImage function
  • Lesson 75: Image practice 2

Module 8: Dynamic Endpoints

Learn how to set up dynamic endpoints in SSG and SSR.
  • Lesson 76: Conceptual Overview
  • Lesson 77: Building Static JSON endpoints
  • Lesson 78: RSS feed example project
  • Lesson 79: GET Content Collections endpoint (SSG)
  • Lesson 80: GET endpoint (SSR)
  • Lesson 81: CRUD endpoints with SSR
  • Lesson 82: Project overview
  • Lesson 83: POST endpoint and functionality
  • Lesson 84: GET endpoint and functionality
  • Lesson 85: DELETE endpoint and functionality
  • Lesson 86: PATCH endpoint and functionality

Module 9: Astro DB

Learn how to work with Astro’s database solution.
  • Lesson 87: Conceptual Overview
  • Lesson 88: Installation and setup
  • Lesson 89: Seeding your local db
  • Lesson 90: Fetching local data
  • Lesson 91: Working with Astro Studio
  • Lesson 92: Publishing with live data
  • Lesson 93: Dev Links Setup and GET endpoint
  • Lesson 94: Dev Links POST endpoint
  • Lesson 95: Dev Links DELETE/PATCH endpoints
  • Lesson 96: Deploy with Vercel

Module 10: Middleware

Configure middleware to inject dynamic behaviors on page request.
  • Overview and Introduction
  • Context Object and Redirects
  • Astro Locals
  • Example: Altering the response
  • Example: Logging in middleware

Module 11: Auth Project

We’ll put all our middleware understanding to use by adding Auth to the project
  • Overview and Basic Example
  • Firebase #1: Setup
  • Firebase #2: Create forms
  • Firebase #3: API Setup
  • Firebase #4: Auth functionality
  • Firebase #5: Middleware
  • Lucia #1: Setup
  • Lucia #2: DB Tables
  • Lucia #3: Drizzle Adapter
  • Lucia #4: Create User
  • Lucia #5: Logout User
  • Lucia #6: Login User
  • Lucia #7: Middleware

Module 12: View Transitions

Transition between pages using the View Transitions API via Astro’s helpers.
  • Conceptual Overview
  • Transition Basics
  • State management
  • Transition Animations
  • Routing Transitions
  • Client-side Scripts
  • Lifecycle Events

Module 13: Internationalization

Astro provides a simple way to internationalize your site using the i18n helper.
  • i18n Basics
  • Building a language picker
  • Dynamic Routes
  • Dynamic Post pages
  • User language preference
  • Customizing the i18n middleware
  • Other i18n options

Module 14: Integrations and Config Options

Installation options, Astro integrations, Dev toolbar, and more!
  • Installing templates and themes
  • Astro config options
  • Prefetching Links
  • Integrations
  • Dev toolbar

Section 3: Astro Projects

Coming Soon

Module 15: CMS Project

Astro provides multiple ways to integrate with a CMS. We will implement a sample CMS as a demonstration.
  • Lesson structure TBD

Module 16: Backend Services Project

Astro’s flexibility allows for a variety of backend services to be integrated.
  • Lesson structure TBD

Module 17: Full Stack Project

Astro is perfect for a full stack project with complex CRUD operations or embedded front-end UI components.
  • Lesson structure TBD



Join Early Preview

During early preview, get at least 20% off the final price.

The early preview version includes:

  • 133 lessons
  • 14 modules
  • ~14 hours of content
  • Private Discord server
  • All future content updates

The course is up to date with Astro 4+ and will be updated with new content as Astro continues to develop. Full launch anticipated Summer 2024.