Build with confidence
This course takes you from the very basics up to solid intermediate skills. You'll learn step by step how Astro works, how to structure projects, how to connect data, and how to make your sites perform at their best. By the end, you'll be confident building real projects with Astro - ready to use it for personal sites, client work, or professional projects.
What You'll Learn
Core Fundamentals
Master routing, components, layouts, and Astro's project structure from the ground up
Framework Integration
Learn how to bring React and other frameworks into your Astro projects seamlessly
Styling & Design
Work with CSS, custom fonts, and images to create beautiful, professional designs
Content Management
Connect Astro to WordPress as a headless CMS and work with Markdown pages
Deployment & Hosting
Deploy to GitHub Pages and Netlify, plus learn proper SEO optimization
Advanced Features
Add authentication with Supabase, build interactive components, and handle forms
Course Curriculum
22 lectures • 2 hours 45 minutes of content
Why AstroJS
Get the big picture. Understand why AstroJS is becoming one of the most popular frameworks for building fast, modern websites. Learn about its unique "Islands Architecture" that ships zero JavaScript by default, making your sites incredibly fast while still keeping the developer experience smooth and simple.
Install AstroJS
Complete step-by-step installation guide. You'll set up your first Astro project from scratch, learn about the different starter templates available, and understand the basic configuration options. By the end, you'll have Astro up and running on your machine in just minutes.
Project Structure
Deep dive into Astro's file organization. Learn what each folder and file does in your project - from the src directory to public assets, from pages to components. Understanding this structure is crucial for building organized, maintainable Astro sites.
Routing
Master file-based routing in Astro. Learn how to create pages, dynamic routes, and nested routes using Astro's intuitive routing system. Discover how to handle URL parameters, create catch-all routes, and organize your pages for maximum efficiency and scalability.
Components
Build reusable, modular pieces for your website using Astro components. Learn the component syntax, how to pass props, work with slots, and create a library of components you can use across your entire site. This is where Astro really starts to feel powerful and developer-friendly.
Layouts
Create layout templates that wrap your pages and keep your design consistent. Learn how to build nested layouts, pass data between layouts and pages, and structure your templates for maximum reusability. Perfect for headers, footers, and shared page structures.
CSS
Master styling in Astro. Learn about scoped styles, global CSS, CSS modules, and how to integrate with popular CSS frameworks. Discover best practices for organizing your styles and keeping your CSS maintainable as your project grows.
Fonts
Add custom typography to your Astro sites. Learn how to properly load Google Fonts, self-host web fonts for better performance, and optimize font loading to prevent layout shifts. Make your designs look professional and polished with the right font choices and implementation.
Images
Handle images like a pro in Astro. Learn about the built-in Image component, automatic optimization, responsive images, lazy loading, and how to serve images in modern formats like WebP. Your sites will load faster and look better on all devices.
ReactJS
Integrate React components into your Astro project. Learn how Astro's framework-agnostic approach lets you use React where you need it, while keeping the rest of your site fast and lightweight. Discover client directives and when to hydrate your components.
Scripts
Add interactivity to your Astro sites with JavaScript. Learn how Astro handles scripts, when they load, and how they're processed and bundled. Discover best practices for adding client-side functionality while keeping your site performant and understanding Astro's default script behavior.
Scripts – is:inline
Master the is:inline directive for special script handling. Learn when you need to bypass Astro's bundling and processing, how inline scripts differ from regular scripts, and the specific use cases where inline scripts are essential. Perfect for third-party scripts, analytics, and special initialization code.
Building a ToggleSwitch
Put your skills to practice by building a real, interactive component. Create a fully functional toggle switch from scratch, handling state, styling, and interactivity. This hands-on project demonstrates how to combine Astro components with JavaScript to create reusable, interactive UI elements.
Markdown Pages
Leverage Markdown for content-rich pages and blog posts. Learn how to create .md files in Astro, use frontmatter for metadata, apply layouts to Markdown pages, and build dynamic routing for blog posts. Discover how Astro makes working with Markdown incredibly simple and powerful for content sites.
Frameworks
Explore Astro's framework-agnostic architecture in depth. Learn how to integrate multiple frameworks in one project - React, Vue, Svelte, and more - all working together seamlessly. Understand when to use different frameworks, how they coexist in Astro, and the power of choosing the right tool for each component.
Creating a Website with ChatGPT & AstroJS
See modern development in action by combining AI with Astro. Learn how to leverage ChatGPT to accelerate your development workflow, generate component code, create content, and solve problems faster. This practical lesson shows real-world techniques for using AI tools alongside Astro to build sites more efficiently.
Submitting Forms & Hosting (GitHub Pages)
Build functional forms and deploy your site to the web for free. Learn how to handle form submissions in Astro, process user input, and integrate with form services. Then deploy your complete project to GitHub Pages with proper configuration, custom domains, and CI/CD workflows.
Netlify & AstroJS
Deploy to Netlify and unlock powerful hosting features. Learn the complete deployment process from connecting your repository to going live, configure build settings, set up continuous deployment, and leverage Netlify's edge functions and forms. Get your Astro site running on production-grade infrastructure in minutes.
Master search engine optimization for Astro sites. Learn about meta tags, Open Graph protocols, structured data, sitemaps, and robots.txt files. Discover how Astro's architecture gives you SEO advantages by default, and how to maximize your site's visibility and ranking potential with proper optimization techniques.
Doing SEO Live
Watch a real-time SEO implementation from start to finish. See exactly how to audit a site, identify issues, implement fixes, and verify improvements. This practical, hands-on lesson takes you through the entire process of optimizing an actual Astro site for search engines, with real tools and real results.
Headless CMS with WordPress
Connect Astro to WordPress as a headless CMS for dynamic content. Learn how to fetch posts and pages via the WordPress REST API, display content in your Astro site, handle images and media, and build a modern, fast frontend while keeping WordPress as your content management system. Best of both worlds.
Authentication with Supabase
Add complete user authentication to your Astro projects. Learn how to integrate Supabase for sign-up, login, password reset, and protected routes. Build secure, database-backed applications with user accounts, sessions, and authentication flows. Take your Astro sites from static to fully interactive web applications.