Learn Astro

17h 12m 58s
English
Paid

Course description

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

This course is your practical guide to modern Astro. Instead of abstract theory, you will work on real projects based on built-in Astro features, without overloading with third-party libraries.

Read more about the course

What to Expect:

  • Astro Basics: project structure, routing, components, styling, working with JavaScript.
  • Components and UI: creating and typing components, integration with frameworks.
  • Markdown and MDX: working with content and routing based on them.
  • Content Collections: safe data handling, schemas, queries.
  • Rendering and Routes: SSR, SSG, pagination, redirects.
  • Portfolio Project: build and publish your personal website.
  • Astro Tools: image optimization, dynamic endpoints, Astro DB, middleware, authorization, transition animations, multilingual support, configuration.
  • Practice: integration with CMS, CRUD application (reading books), basic e-commerce with cart and payment via Stripe.

Watch Online

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

Watch Online Learn Astro

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

ScrollTrigger Express

ScrollTrigger Express

Sources: Carl (Creative Coding Club)
ScrollTrigger is GreenSock's most revolutionary plugin to date. With its help, you can control all your animations with precision and...
10 hours 31 minutes 38 seconds
Developing LLM App Frontends with Streamlit

Developing LLM App Frontends with Streamlit

Sources: zerotomastery.io
This byte-sized course will teach Streamlit fundamentals and how to use Streamlit to create a frontend for your LLM-powered applications.
1 hour 43 minutes 52 seconds
Remix Bootcamp: Zero to Mastery

Remix Bootcamp: Zero to Mastery

Sources: zerotomastery.io
Join Remix Bootcamp to master full-stack web development. Learn from industry experts to build better websites and advance your career in web development
21 hours 2 minutes 22 seconds