Learn Astro

17h 12m 58s
English
Paid

Astro stands out in the world of overly complex web frameworks due to its simplicity, excellent developer experience, and high performance. However, beneath this simplicity lies a wealth of features, ranging from image optimization and dynamic routes to APIs, middleware, transition animations, and support for UI frameworks.

This course serves as your practical guide to modern Astro development. Instead of focusing on abstract theory, you will work on real projects utilizing built-in Astro features, avoiding overload from third-party libraries.

Course Overview

What to Expect

  • Astro Basics: Understand project structure, routing, components, styling, and working with JavaScript.
  • Components and UI: Learn how to create and type components and integrate with various frameworks.
  • Markdown and MDX: Explore working with content and routing based on Markdown and MDX.
  • Content Collections: Master safe data handling, schemas, and queries.
  • Rendering and Routes: Get hands-on with SSR, SSG, pagination, and redirects.
  • Portfolio Project: Build and publish your personal website as a portfolio project.
  • Astro Tools: Dive into image optimization, dynamic endpoints, Astro DB, middleware, authorization, transition animations, multilingual support, and configuration.
  • Practice: Practice integrating with CMS, creating a CRUD application (reading books), and developing a basic e-commerce site with cart and payment via Stripe.

About the Author: Chris Pennington

Chris Pennington thumbnail
Hello! My name is Chris Pennington. I am a beginner developer, and I enjoy sharing what I learn with others. On my channel, I mainly teach beginner and intermediate level web development through the creation of projects and individual components. I write code publicly because it's a great opportunity to learn together. I am a student first and foremost and never consider myself an expert.

Watch Online 174 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 174 lessons in this course and access 10,000+ hours of premium content across all courses.

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

Get instant access to all 173 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription