Free course

Astro Course

Learn Astro from the ground up: project structure, pages, components, layouts, props, data, content collections, assets, islands, and deployment.

5 modules · 45 lessons · No signup

Prerequisites: HTML, CSS and JavaScript

Download this course as PDF or EPUB

Read it offline, on your Kindle, or print it. Join my free newsletter and you get this course plus every other book and course I published.

Download PDFDownload EPUB
~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Build and deploy a small content-driven Astro site that sends browser JavaScript only for the parts that need interactivity.

Course contents

  1. Start an Astro project

    Create a project, understand its folders, and run the toolchain.

    1. ✓ Why Astro
    2. ✓ Create an Astro project
    3. ✓ Understand the project structure
    4. ✓ Develop, build, and preview
    5. ✓ Configure Astro
    6. ✓ Choose src or public for an asset
    7. ✓ Use TypeScript in Astro components
    8. ✓ Check your understanding: Astro project basics

  2. Pages and routing

    Turn files and data into static routes and endpoints.

    1. ✓ Create routes with files
    2. ✓ Write an Astro page
    3. ✓ Use nested and index pages
    4. ✓ Declare a dynamic route
    5. ✓ Generate static dynamic routes
    6. ✓ Create a page from Markdown
    7. ✓ Create a static endpoint
    8. ✓ Handle redirects and missing pages
    9. ✓ Check your understanding: pages and routing

  3. Components and layouts

    Compose typed templates with props, slots, and scoped styles.

    1. ✓ The anatomy of an Astro component
    2. ✓ Import and compose components
    3. ✓ Pass component props
    4. ✓ Type component props
    5. ✓ Use template expressions
    6. ✓ Compose child markup with slots
    7. ✓ Build a page layout
    8. ✓ Style an Astro component
    9. ✓ Add a browser script
    10. ✓ Check your understanding: components and layouts

  4. Data, content, and assets

    Load data, validate content, and optimize project images.

    1. ✓ Load data before rendering
    2. ✓ Keep server data private
    3. ✓ Create a content collection
    4. ✓ Validate content data
    5. ✓ Query and render a collection
    6. ✓ Use local images
    7. ✓ Build a small content site
    8. ✓ Check your understanding: data, content, and assets

  5. Islands and deployment

    Add focused interactivity, build the site, and deploy it.

    1. ✓ Start with zero JavaScript
    2. ✓ Add a UI framework integration
    3. ✓ Choose a client directive
    4. ✓ Render a framework component without hydration
    5. ✓ Keep islands independent
    6. ✓ Choose static or on-demand rendering
    7. ✓ Build and inspect the site
    8. ✓ Deploy a static Astro site
    9. ✓ Finish the Astro site
    10. ✓ Check your understanding: islands and deployment