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 / Setting Up The Astro Image Component

Setting Up The Astro Image Component

Your browser does not support the video tag.

Setting Up The Astro Image Component

Lesson 46 of 57

81%

← Previous Intro to the Astro Image Component Next UPDATE - Adding OG Image in Layout for Blog Post Page →

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