Learn Astro

17h 12m 58s
English
Paid

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 Learn Astro

Join premium to watch
Go to premium
# Title Duration
1 Course Preview 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

Similar courses to Learn Astro

Web Components For Beginners

Web Components For Beginnersleveluptutorials

Category: Other (Frontend)
Duration 3 hours 1 minute 52 seconds
Scaling Web App Configuration with Environment Variables

Scaling Web App Configuration with Environment Variables fullstack.io

Category: Other (Backend), Other (Frontend)
Duration 1 hour 53 minutes 25 seconds
Frontend architecture and patterns bootcamp

Frontend architecture and patterns bootcampudemy

Category: Other (Frontend)
Duration 4 hours 21 minutes 43 seconds
Web Security Dev Academy - 12-week online program

Web Security Dev Academy - 12-week online programBartosz Pietrucha

Category: Angular, TypeScript, Node.js, Other (Backend), Other (Frontend)
Duration 16 hours 37 minutes 20 seconds
Build Modern Websites with Astro!

Build Modern Websites with Astro!James Q Quick

Category: Other (Frontend)
Duration 7 hours 28 minutes 32 seconds
Epic Web. Ship Modern Full-Stack Web Applications

Epic Web. Ship Modern Full-Stack Web ApplicationsKent C. Dodds

Category: Other (Frontend)
Duration 39 hours 2 minutes 51 seconds
Normal UI

Normal UIAnthony Alicea

Category: Other (Frontend)
Duration 39 minutes 16 seconds
Content Sites with Astro and Vue.js

Content Sites with Astro and Vue.jsvueschool.io

Category: Vue, Other (Frontend)
Duration 1 hour 3 minutes 38 seconds
Generating Fake Data with Faker.js

Generating Fake Data with Faker.jsvueschool.io

Category: Vue, Other (Frontend)
Duration 51 minutes 56 seconds
GSAP3: Beyond the Basics

GSAP3: Beyond the BasicsCarl (Creative Coding Club)

Category: Other (Frontend)
Duration 8 hours 25 minutes 41 seconds