Build Modern Websites with Astro!

7h 28m 32s
English
Paid

Course description

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.

Watch Online

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

Watch Online Build Modern Websites with Astro!

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Epic Web. Ship Modern Full-Stack Web Applications

Epic Web. Ship Modern Full-Stack Web Applications

Sources: Kent C. Dodds
Whether you and your team are working on an existing enterprise-scale web app, or you've just come up with an amazing idea for a new project , the one thing standing between you...
39 hours 2 minutes 51 seconds
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
Web Performance Fundamentals

Web Performance Fundamentals

Sources: Nadia Makarevich
"The Fundamentals of Web Performance" focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React...
Learn Astro

Learn Astro

Sources: Chris Pennington
In a world of overly complex web frameworks, Astro stands out for its simplicity, excellent developer experience, and high performance. But behind this...
17 hours 12 minutes 58 seconds