Courses / Build Modern Websites with Astro

Build Modern Websites with Astro

A hands-on course to teach you to build performance and dynamic websites the modern way using Astro, the all-in-one-framework designed for speed!

0 of 55 lessons completed

Start Course

Build Modern Websites with Astro

Build modern websites with Astro through structured sections and lessons.

Course Outline

Welcome and Resources

  1. Welcome and Thank You
  2. Resources
  3. Upgrading from Astro 2.0 to 3.0 (optional)
  4. Upgrading from Astro 3.0 to 4.0 (optional)
  5. IMPORTANT - Default Port Update

Intro to Astro and Project Setup

  1. Intro To Astro
  2. Astro 4.0
  3. Creating Your First Astro Project
  4. The Dev Toolbar
  5. Working with Git and Github
  6. VS Code Setup
  7. Shortcuts That I Use
  8. Working With CSS
  9. Overview of Astro Integrations
  10. Introduction to Tailwind CSS
  11. Tailwind Config File Type
  12. Setting Up Tailwind CSS
  13. Updating the Shared Layout
  14. Updating the Header and Footer Components

Working with Markdown and Content Collections

  1. Introduction to Markdown and Frontmatter
  2. Introduction to Content Collections
  3. Configuring Content Collections with Zod
  4. Querying and Displaying List of Blog Posts
  5. Creating the PostList Component

Dynamic Routes and Pagination

  1. Creating Dynamic Routes for Blog Posts
  2. Displaying Blog Posts
  3. Styling Blog Posts Using The Tailwind Typography Plugin
  4. Cleaning Up Code With Reusable Components
  5. Creating the TableOfContents Component
  6. Creating the Share Component
  7. Intro to Pagination
  8. Creating The Dynamic Route for Paginated Blog Posts
  9. Creating the Pagination Component

SEO and Meta Tags

  1. Introduction to Meta Tags
  2. Adding Meta Tags
  3. Customizing Meta Tags Per Page
  4. Adding an RSS Feed
  5. Displaying Categories
  6. Creating Dynamic Routes for Category Pages
  7. CHALLENGE: Implement Category Pagination
  8. (Final Code) CHALLENGE: Implemented Category Pagination

Updating the Home Page and Clean Up

  1. Displaying a Featured Post
  2. Displaying Recent Posts
  3. Refactoring the CategoryList Component

Image Optimization

  1. Intro to the Astro Image Component
  2. Setting Up The Astro Image Component
  3. UPDATE - Adding OG Image in Layout for Blog Post Page

Astro Islands with Svelte

  1. Section Intro
  2. Adding Svelte (and Client Directives)
  3. Handling Form Submissions with KwesForms

Deploying

  1. Setting Up a Github Repository
  2. Deploying to Netlify
  3. Deploying to Vercel
  4. Updating the Site Config Property

Basic Package Wrap Up

  1. Next Steps