Build Modern Websites with Astro!

7h 28m 32s
English
Paid

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, and much more! You will also learn modern technologies such as Tailwind CSS, TypeScript, Xata, and Cloudinary.

Topics covered in the course:

  • Static page generation vs server-side rendering
  • Content collections
  • Image optimization
  • TypeScript for models and schemas
  • Authentication
  • Site deployment and hosting

This course is suitable for beginner and intermediate web developers who want to master new skills and have basic knowledge of HTML, CSS, and JavaScript.

About the Author: James Q Quick

James Q Quick thumbnail

Fullstack Web Developer — Learn, Build, Teach

I’m a fullstack web developer passionate about continuous learning, building real-world projects, and sharing knowledge with others. My approach is guided by the motto: Learn → Build → Teach.

About Me

As a developer, I focus on:

  • Learning modern web technologies and best practices
  • Building scalable and practical applications
  • Collaborating with people and contributing to projects

I believe that the best way to grow as a developer is to constantly learn new skills and apply them in real projects.

Learn, Build, Teach Philosophy

My workflow is simple but powerful:

  • Learn — explore new tools, frameworks, and concepts
  • Build — apply knowledge by creating real applications
  • Teach — share insights to help others grow

This cycle helps reinforce knowledge and creates long-term expertise in web development.

Watch Online 91 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Welcome and Thank You
All Course Lessons (91)
#Lesson TitleDurationAccess
1
Welcome and Thank You Demo
01:18
2
Resources
01:42
3
Intro To Astro
03:15
4
Astro 4.0
03:09
5
Creating Your First Astro Project
07:17
6
The Dev Toolbar
03:36
7
Working with Git and Github
02:06
8
VS Code Setup
02:07
9
Shortcuts That I Use
02:51
10
Working With CSS
04:34
11
Overview of Astro Integrations
03:29
12
Introduction to Tailwind CSS
06:08
13
Setting Up Tailwind CSS
03:38
14
Updating the Shared Layout
10:21
15
Updating the Header and Footer Components
07:17
16
Introduction to Markdown and Frontmatter
05:17
17
Introduction to Content Collections
04:52
18
Configuring Content Collections with Zod
04:22
19
Querying and Displaying List of Blog Posts
06:01
20
Creating the PostList Component
10:55
21
Creating Dynamic Routes for Blog Posts
06:02
22
Displaying Blog Posts
06:31
23
Styling Blog Posts Using The Tailwind Typography Plugin
01:50
24
Cleaning Up Code With Reusable Components
02:10
25
Creating the TableOfContents Component
05:25
26
Creating the Share Component
03:20
27
Intro to Pagination
01:57
28
Creating The Dynamic Route for Paginated Blog Posts
06:29
29
Creating the Pagination Component
08:01
30
Introduction to Meta Tags
02:48
31
Adding Meta Tags
06:11
32
Customizing Meta Tags Per Page
05:35
33
Adding an RSS Feed
10:26
34
Displaying Categories
11:11
35
Creating Dynamic Routes for Category Pages
05:40
36
Displaying a Featured Post
08:07
37
Displaying Recent Posts
02:55
38
Refactoring the CategoryList Component
02:52
39
Intro to the Astro Image Component
04:19
40
Setting Up The Astro Image Component
07:45
41
Section Intro
01:34
42
Adding Svelte (and Client Directives)
05:54
43
Handling Form Submissions with KwesForms
06:16
44
Setting Up a Github Repository
02:56
45
Deploying to Netlify
01:41
46
Deploying to Vercel
01:34
47
Updating the Site Config Property
01:49
48
Next Steps
02:12
49
Overview of the Premium Content
02:54
50
Overview of SSR In Astro
03:36
51
Adding the Netlify Adapter
00:47
52
Converting Blog Post Pages to SSR
10:52
53
Fixing a Pagination Bug
05:06
54
Converting Category Pages to SSR
04:16
55
Fixing Pagination Bugs
02:33
56
Adding An Environment Variable For Posts Per Page
05:04
57
Creating the Authors Collection
03:02
58
Displaying Author Info For Blog Posts
08:39
59
Creating Dynamic Routes for Author Pages
04:31
60
Intro to Cloudinary and Account Setup
04:50
61
Installing and Configuring Cloudinary in Astro
03:35
62
Adding Auto Generated Image URLs
06:37
63
Intro to Xata
01:54
64
Creating the Users Schema
03:28
65
Creating the Comments Schema
02:13
66
Integrating Xata Into Astro and Generating TypeScript Types
04:52
67
Overview of Authentication with Cookies
05:04
68
Creating the Signup Page
05:57
69
Handling the Signup Endpoint
07:54
70
Securing Our Cookies
05:19
71
Creating the Login Page
02:05
72
Handling the Login Endpoint
05:04
73
Handling Errors
05:30
74
Handling the Sign Out Endpoint
01:17
75
Updating the Header
02:59
76
Handling Redirects after Login
02:05
77
Creating the Comment Form
09:22
78
Handling Comment Form Submission
03:46
79
Querying Comments for a Blog Post
04:39
80
Displaying Comments for a Blog Post
12:42
81
Section Intro
01:00
82
Displaying Emojis
11:11
83
Setting up the Reactions Table
01:53
84
Handling Emoji Reactions
09:59
85
Querying Emojis
16:20
86
Creating the Newsletter Form
07:20
87
Handling the Newsletter Form Submission
03:20
88
Saving Subscriber Emails to Xata
03:24
89
Creating the Success and Failure Pages
07:08
90
Deploy to Vercel
03:19
91
Deploy to Netlify
03:21
Unlock unlimited learning

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

Learn more about subscription