Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Build Modern Websites with Astro
Course Introduction
Course Preview (1:55)
Course Instructions (1:35)
Let’s Connect!
Course Updates
Module 1 - Astro Basics
1.1 - Introduction (4:35)
1.2 - Installation and Setup (2:28)
1.3 - Structure and Routing Basics (3:46)
1.4 - Astro File Structure (7:58)
1.5 - Layouts and Slots (5:38)
1.6 - Your First Astro Component (3:16)
1.7 - CSS and Styling (5:50)
1.8 - Client-side JavaScript (6:22)
1.9 - Exercise Card Component (10:14)
Module 2 - Astro Components (Updated Jan 2025)
2.1 - Button Component (13:18)
2.2 - Heading Component (11:36)
2.3 - Adding TypeScript (5:49)
2.4 - Using UI Frameworks (Astro "Islands") (4:13)
2.5 - Exercise Overview (3:31)
2.6 - Add HTML Structure (9:42)
2.7 - Add TypeScript (3:49)
2.8 - Add CSS (13:20)
Module 3 - Markdown and MDX
3.1 - Markdown components/routes (8:28)
3.2 - Importing Markdown files (6:09)
3.3 - MDX Basics (3:03)
3.4 - Import Components in MDX (6:47)
Module 4 - Content Collections (Updated Feb 2025)
4.1 - Introduction (4:15)
4.2 - Code Overview (5:53)
4.3 - Glob() Loader (5:48)
4.4 - File() Loader (5:33)
4.5 - Custom Loaders (7:22)
4.6 - Schema basics (8:16)
4.7 - Referencing other collections (7:28)
4.8 - Additional Zod options (2:54)
4.9 - Adding images to collections (2:22)
4.10 - Querying collections (9:43)
4.11 - Rendering collection content (3:51)
4.12 - Fetching referenced collections (4:52)
4.13 - Transforming schema entries (3:23)
Module 5 - Rendering and Routing (Updated Feb 2025)
5.1 - Introduction (10:03)
5.2 - Dynamic routes (SSG) (9:18)
5.3 - Dynamic routes (SSR) (4:19)
5.4 - Dynamic routes with remote data (practice) (12:39)
5.5 - Nested dynamic routes (8:37)
5.6 - Nested dynamic routes (practice) (4:53)
5.7 - Pagination (SSG only) (7:04)
5.8 - Redirects and Rewrites (4:55)
5.9 - Miscellaneous items (4:43)
5.10 - Rendering/Routing practice (12:22)
Module 6 - Portfolio Project (Updated March 2025)
6.1 - Introduction (2:00)
6.2 - Layout and Setup (5:49)
6.3 - Footer and Client-side JS (3:40)
6.4 - Nav component (4:27)
6.5 - Hero component (5:11)
6.6 - Heading component (8:44)
6.7 - Link component (4:56)
6.8 - 404 page (5:26)
6.9 - Content collection (Features section) (6:16)
6.10 - Content collection (Project section) (5:30)
6.11 - Content collections (Project card) (7:02)
6.12 - Content collections (Blog setup) (4:18)
6.13 - Content collections (Referencing collections) (4:09)
6.14 - Blog cards (7:21)
6.15 - Blog cards (2:40)
6.16 - Routing (Pagination) (2:44)
6.17 - Pagination buttons (3:01)
6.18 - Blog hero and card fixes (6:02)
6.19 - Routing (Dynamic route) (9:35)
6.20 - React wrapper (3:28)
6.21 - Embedding UI frameworks (React example) (10:26)
6.22 - Deploy site (5:56)
Module 7 - Image Optimization
66 - Image Service Overview (9:11)
67 - Astro Image Component (6:47)
68 - Images in Markdown and MDX (5:34)
69 - Images in Content Collections (8:38)
70 - Images in UI Frameworks (4:31)
71 - Image Practice 1 (11:22)
72 - Responsive Image Options (3:29)
73 - Astro Picture Component (3:58)
74 - getImage Function (3:41)
75 - Image Practice 2 (6:09)
Module 8 - Dynamic Endpoints
76 - Introduction to Dynamic Endpoints (2:57)
77 - Building Static JSON endpoints (9:10)
78 - RSS Feed example project (8:53)
79 - GET Content Collections Endpoint (SSG) (6:38)
80 - GET Endpoint (SSR) (11:36)
81 - CRUD endpoints with SSR (9:01)
82 - Project overview (7:21)
83 - POST endpoint and functionality (16:35)
84 - GET endpoint and functionality (5:03)
85 - DELETE endpoint and functionality (5:42)
86 - PATCH endpoint and functionality (5:57)
Module 9 - Astro DB
87 - Conceptual Overview (3:36)
88 - Installation and setup (3:17)
89 - Seeding your local db (3:16)
90 - Fetching local data (4:05)
91 - Working with Astro Studio (5:41)
92 - Publishing with Live Data (10:33)
93 - Dev Links Project Setup and GET endpoint (5:40)
94 - Dev Links Project POST endpoint (3:11)
95 - Dev Links Project DELETE/PATCH endpoints (4:04)
96 - Deploy with Vercel (6:18)
Module 10 - Middleware
97 - Overview and Introduction (3:44)
98 - Context Object and Redirects (2:41)
99 - Astro Locals (4:36)
100 - Example: altering the request response (3:22)
101 - Example: Logging in middleware (6:03)
Module 11 - Auth
102 - Overview and Basic Example (8:18)
103 - Firebase #1: Setup (4:29)
104 - Firebase #2: Create forms (2:48)
105 - Firebase #3: API Setup (6:51)
106 - Firebase #4: Auth functionality (8:38)
107 - Firebase #5: Middleware (6:30)
108 - Lucia #1: Setup (2:15)
109 - Lucia #2: DB Tables (3:15)
110 - Lucia #3: Drizzle Adapter (2:22)
111 - Lucia #4: Create User (13:49)
112 - Lucia #5: Logout User (6:13)
113 - Lucia #6: Login User (5:06)
114 - Lucia #7: Middleware (6:54)
Module 12 - View Transitions
115 - Conceptual Overview (3:14)
116 - Transition Basics (6:38)
117 - State management (4:43)
118 - Transition Animations (3:15)
119 - Routing Transitions (6:08)
120 - Client-side Scripts (7:06)
121 - Lifecycle Events (5:08)
Module 13 - Internationalization
122 - i18n Basics (9:20)
123 - Building a language picker (6:59)
124 - Dynamic Routes (6:06)
125 - Dynamic Post pages (5:12)
126 - User language preference (3:31)
127 - Customizing the i18n middleware (2:34)
128 - Other i18n options (2:53)
14 - Integrations and Config Options
129 - Installing templates and themes (3:35)
130 - Astro config options (10:13)
131 - Prefetching Links (4:57)
132 - Integrations (4:19)
133 - Dev toolbar (5:47)
15 - CMS Solutions
134 - Conceptual Overview (2:34)
135 - Basic CMS (JSON + Google Sheets) (5:30)
136 - Project Walkthrough (3:47)
137 - Keystatic: Config Setup (4:53)
138 - Keystatic: Heading Config (5:25)
139 - Keystatic: Testimonial Config (7:14)
140 - Keystatic: Finalizing the Config (3:07)
141 - Keystatic: Vercel + Keystatic Cloud (5:40)
142 - Strapi: Install and Setup (6:45)
143 - Strapi: Create Heading component (5:26)
144 - Strapi: Create Testimonial component (7:21)
145 - Strapi: Query Testimonial component (8:53)
146 - Strapi: Types and Integrating in Astro (12:00)
16 - Basic CRUD app
147 - Intro and Setup (4:43)
148 - Astro DB setup (4:50)
149 - Get backend endpoint (9:14)
150 - Get books frontend (16:00)
151 - Add Book to DB (frontend) (6:41)
152 - Add Book to DB (backend) (7:21)
153 - Dynamic book route (6:14)
154 - Displaying saved books (4:49)
155 - Reading status (frontend) (5:08)
156 - Reading status (backend) (5:36)
157 - Delete book (frontend) (1:56)
158 - Delete book (backend) (4:07)
17 - Basic E-commerce app
160 - Intro and Setup (5:49)
161 - Stripe Setup (1:54)
162 - Stripe content loader (5:53)
163 - Content schema and product cards (4:53)
164 - Product price lookup (3:41)
165 - Product display page (3:55)
166 - Cart indicator update (7:01)
167 - Show cart items (4:57)
168 - Populate cart items (4:31)
169 - Delete all cart items (2:18)
170 - Create Stripe checkout session (8:04)
171 - Mount Stripe checkout session (4:10)
172 - Success redirect (3:22)
6.18 - Blog hero and card fixes
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock