An overview of the basic concepts of Astro websites.
Introduction
Installation and Setup
Structure/Routing Basics
Astro File Structure
Layouts and Slots
First Astro Component
CSS and Styling
Client-side JavaScript
Exercise Card Component
Module 2: Astro Components
Building components using Astro’s custom syntax.
Button Component
Heading Component
Adding TypeScript
Using UI Framework
Exercise Overview
Component Structure
Button Component
Adding CSS
Adding TypeScript
Module 3: Markdown and MDX
Render markdown and MDX components and routes in Astro with page-based routing.
Markdown components
Importing Markdown files
MDX basics
Import components in MDX
Module 4: Content Collections
Define and query type-safe data with Astro’s content collections.
Glob() and File() Loaders
Custom Loaders
Schema basics
Referencing other collections
Adding images to collections
Querying and rendering collections
Zod basics
Module 5: Rendering and Routing
Learn rendering options and routing in Astro.
Dynamic Routes (SSR + SSG)
Nested Dynamic Routes
SSG Pagination
Rewrites and Redirects
Practice Exercises
Module 6: Personal Porfolio Site
Build a personal portfolio site with Astro.
22 Lessons, 2 hours of content
Full review of all concepts in Section 1
Publish portfolio site with Netlify
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
Module 15: Astro + CMS
Astro provides multiple ways to integrate with a CMS. We will explore three options with a simple project structure to understand the types of CMS options you have when using Astro.
Basic CMS: JSON/Google Sheets
Keystatic CMS (5 lessons)
Strapi CMS (5 lessons)
Module 16: CRUD Project
We’ll put all our lessons to work in this ## module building out a full CRUD application for saving and tracking books to read using OpenLibrary’s API.
Astro DB database
Full CRUD API endpoints
Search and save books
Update reading status
Delete saved books
Module 17: Basic E-commerce Site
Giving special attention server vs client code, we’ll build out a basic SSR e-commerce website with vanilla JavaScript using Stripe’s SDKs.
