Build Modern Websites with Astro

Course Introduction

Module 1 - Astro Basics

1 - Introduction (4:35)
2 - Installation and Setup (1:56)
3 - Structure and Routing Basics (4:33)
4 - Astro File Structure (6:58)
5 - Layouts and Slots (5:09)
6 - Your First Astro Component (5:46)
7 - CSS and Styling (4:41)
8 - Client-side JavaScript (5:21)
9 - Exercise Card Component (13:04)

Module 2 - Astro Components

10 - Button Component (14:15)
11 - Heading Component (14:03)
12 - Adding TypeScript (3:47)
13 - Using UI Frameworks (Astro “Islands”) (4:53)
14 - Exercise Overview (4:43)
15 - Exercise Structure (9:38)
16 - Exercise Button Component (4:31)
17 - Exercise CSS (33:32)
18 - Exercise Adding TypeScript (7:18)

Module 3 - Markdown and MDX

Module 4 - Content Collections

23 - Introduction to Content Collections (5:02)
24 - Data type collection (7:33)
25 - Content type collection (7:05)
26 - Referencing other collections (8:03)
27 - Zod config options (3:18)
28 - Adding images to content collections (5:53)
29 - Rendering content collections (9:05)
30 - Fetching referenced collections (6:04)

Module 5 - Rendering and Routing

31 - Rendering Options Overview (6:30)
33 - Dynamic routes (10:57)
34 - Nested dynamic routes (6:25)
35 - SSG pagination (7:08)
36 - Miscellaneous, excluding pages, and redirects (4:53)
37 - Rendering and Routing Practice (8:38)

Module 6 - Portfolio Project

38 - Introduction and Instructions (1:58)
39 - Create a new project (2:03)
40 - Layout and Setup (7:40)
41 - Nav Component (4:59)
42 - Footer Component (5:38)
43 - Link Component (5:54)
44 - Heading Component (4:53)
45 - Home Hero Component (3:01)
46 - Features Banner Component (8:19)
47 - Add Collections for Projects (5:19)
48 - Project Card Component (6:49)
49 - Project Component (4:09)
50 - JSON Server Setup (5:34)
51 - Contact Component Markup (4:40)
52 - Contact Component Functionality (9:38)
53 - 404 Page (2:52)
54 - Project Page Setup (3:50)
55 - Project Page Filter Markup (6:21)
56 - Project Page Filter SSR Functionality (9:33)
57 - Project Page JavaScript Functionality (11:23)
58 - Add Blog Post Content Collection (2:45)
59 - Post Card Component (7:31)
60 - Blog Page Layout (4:55)
61 - Blog Page Pagination (5:05)
62 - Post Page Setup (4:00)
63 - Post Page Layout (6:02)
64 - Integrations and Addons (5:15)
65 - Publish to Netlify (4:24)

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)

Course Instructions