About Blog Speaking Courses Uses
About Blog Speaking Courses Uses
Build Modern Websites with Astro

Welcome and Resources

  • Welcome and Thank You
  • Resources
  • Upgrading from Astro 2.0 to 3.0 (optional)
  • Upgrading from Astro 3.0 to 4.0 (optional)
  • IMPORTANT - Default Port Update

Intro to Astro and Project Setup

  • Intro To Astro
  • Astro 4.0
  • Creating Your First Astro Project
  • The Dev Toolbar
  • Working with Git and Github
  • VS Code Setup
  • Shortcuts That I Use
  • Working With CSS
  • Overview of Astro Integrations
  • Introduction to Tailwind CSS
  • Tailwind Config File Type
  • Setting Up Tailwind CSS
  • Updating the Shared Layout
  • Updating the Header and Footer Components

Working with Markdown and Content Collections

  • Introduction to Markdown and Frontmatter
  • Introduction to Content Collections
  • Configuring Content Collections with Zod
  • Querying and Displaying List of Blog Posts
  • Creating the PostList Component

Dynamic Routes and Pagination

  • Creating Dynamic Routes for Blog Posts
  • Displaying Blog Posts
  • Styling Blog Posts Using The Tailwind Typography Plugin
  • Cleaning Up Code With Reusable Components
  • Creating the TableOfContents Component
  • Creating the Share Component
  • Intro to Pagination
  • Creating The Dynamic Route for Paginated Blog Posts
  • Creating the Pagination Component

SEO and Meta Tags

  • Introduction to Meta Tags
  • Adding Meta Tags
  • Customizing Meta Tags Per Page
  • Adding an RSS Feed
  • Displaying Categories
  • Creating Dynamic Routes for Category Pages
  • CHALLENGE: Implement Category Pagination
  • (Final Code) CHALLENGE: Implemented Category Pagination

Updating the Home Page and Clean Up

  • Displaying a Featured Post
  • Displaying Recent Posts
  • Refactoring the CategoryList Component

Image Optimization

  • Intro to the Astro Image Component
  • Setting Up The Astro Image Component
  • UPDATE - Adding OG Image in Layout for Blog Post Page

Astro Islands with Svelte

  • Section Intro
  • Adding Svelte (and Client Directives)
  • Handling Form Submissions with KwesForms

Deploying

  • Setting Up a Github Repository
  • Deploying to Netlify
  • Deploying to Vercel
  • Updating the Site Config Property

Basic Package Wrap Up

  • Next Steps
Build Modern Websites with Astro

Welcome and Resources

  • Welcome and Thank You
  • Resources
  • Upgrading from Astro 2.0 to 3.0 (optional)
  • Upgrading from Astro 3.0 to 4.0 (optional)
  • IMPORTANT - Default Port Update

Intro to Astro and Project Setup

  • Intro To Astro
  • Astro 4.0
  • Creating Your First Astro Project
  • The Dev Toolbar
  • Working with Git and Github
  • VS Code Setup
  • Shortcuts That I Use
  • Working With CSS
  • Overview of Astro Integrations
  • Introduction to Tailwind CSS
  • Tailwind Config File Type
  • Setting Up Tailwind CSS
  • Updating the Shared Layout
  • Updating the Header and Footer Components

Working with Markdown and Content Collections

  • Introduction to Markdown and Frontmatter
  • Introduction to Content Collections
  • Configuring Content Collections with Zod
  • Querying and Displaying List of Blog Posts
  • Creating the PostList Component

Dynamic Routes and Pagination

  • Creating Dynamic Routes for Blog Posts
  • Displaying Blog Posts
  • Styling Blog Posts Using The Tailwind Typography Plugin
  • Cleaning Up Code With Reusable Components
  • Creating the TableOfContents Component
  • Creating the Share Component
  • Intro to Pagination
  • Creating The Dynamic Route for Paginated Blog Posts
  • Creating the Pagination Component

SEO and Meta Tags

  • Introduction to Meta Tags
  • Adding Meta Tags
  • Customizing Meta Tags Per Page
  • Adding an RSS Feed
  • Displaying Categories
  • Creating Dynamic Routes for Category Pages
  • CHALLENGE: Implement Category Pagination
  • (Final Code) CHALLENGE: Implemented Category Pagination

Updating the Home Page and Clean Up

  • Displaying a Featured Post
  • Displaying Recent Posts
  • Refactoring the CategoryList Component

Image Optimization

  • Intro to the Astro Image Component
  • Setting Up The Astro Image Component
  • UPDATE - Adding OG Image in Layout for Blog Post Page

Astro Islands with Svelte

  • Section Intro
  • Adding Svelte (and Client Directives)
  • Handling Form Submissions with KwesForms

Deploying

  • Setting Up a Github Repository
  • Deploying to Netlify
  • Deploying to Vercel
  • Updating the Site Config Property

Basic Package Wrap Up

  • Next Steps

Courses / Build Modern Websites with Astro / Creating the PostList Component

Creating the PostList Component

Your browser does not support the video tag.

Creating the PostList Component

Lesson 24 of 57

42%

← Previous Querying and Displaying List of Blog Posts Next Creating Dynamic Routes for Blog Posts →

My Newsletter

A weekly newsletter filled with personal updates, recent content, and general Web Development announcements.

Built with Astro | Styling with Tailwind CSS | Hosted on Netlify