CF

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.

Additional

https://github.com/coding-in-public/astro-course-files

About the Author: Chris Pennington

Chris Pennington thumbnail

Chris Pennington is a US developer and founder of Tailwind Mastery, focused entirely on Tailwind CSS as a styling system. He is one of the more consistent independent voices on Tailwind beyond the official documentation, with paid course material on advanced Tailwind patterns.

His CourseFlix listing carries a Chris Pennington Tailwind CSS course. Material is paid and aimed at front-end developers using Tailwind seriously enough to want depth beyond the utility-class basics.

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

Course content

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

Related courses

  • Build a Full Stack Blog with Astro thumbnailUpdated 6mo ago

    Build a Full Stack Blog with Astro

    By: egghead.io
    Creating a Fully-Functional Blog on Astro is a hands-on course designed to show you how to develop a modern and fully operational blog site without.
    2 hours 43 minutes 16 seconds
  • Build Modern Websites with Astro! thumbnailUpdated 2y ago

    Build Modern Websites with Astro!

    By: James Q Quick
    In this course, you will be able to take your blog to the next level by adding powerful features such as tags, pagination, authentication, comments.
    7 hours 28 minutes 32 seconds
  • Content Sites with Astro and Vue.js thumbnailUpdated 1y ago

    Content Sites with Astro and Vue.js

    By: Vue School
    Want to create a fast and efficient site with content? In this course, you will learn how to use Astro and Vue.js together to develop high-performance.
    1 hour 3 minutes 38 seconds

Frequently asked questions

What is Learn Astro about?
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…
Who teaches Learn Astro?
Learn Astro is taught by Chris Pennington. You can find more courses by this instructor on the corresponding source page.
How long is Learn Astro?
Learn Astro contains 174 lessons with a total runtime of 17 hours 12 minutes. All lessons are available to watch online at your own pace.
Is Learn Astro free to watch?
Learn Astro is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Learn Astro online?
Learn Astro is available to watch online on CourseFlix at https://courseflix.net/course/learn-astro. The page hosts every lesson with the integrated video player; no download is required.