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.

Watch Online Build Modern Websites with Astro!

Join premium to watch
Go to premium
# Title Duration
1 Welcome and Thank You 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

Similar courses to Build Modern Websites with Astro!

Practical Accessibility - Practical Accessibility for web designers and developers

Practical Accessibility - Practical Accessibility for web designers and developersSara Soueidan

Category: Other (Frontend)
Duration 14 hours 47 minutes 28 seconds
Scalable TDD & Testing

Scalable TDD & TestingLogic Room

Category: JavaScript, Other (Frontend)
Duration 2 hours 56 minutes 56 seconds
Mocking Techniques in Vitest

Mocking Techniques in VitestArtem Zakharchenko

Category: Other (Frontend)
Duration 1 hour 30 minutes 36 seconds
The Complete 2023 Web Development Bootcamp

The Complete 2023 Web Development Bootcampudemy

Category: MongoDB, Other (Backend), Other (Frontend)
Duration 62 hours 32 minutes 23 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
SVG Animation with GreenSock

SVG Animation with GreenSockCarl (Creative Coding Club)

Category: Other (Frontend)
Duration 12 hours 34 minutes 48 seconds
Full-Stack Fundamentals 4 - Payments

Full-Stack Fundamentals 4 - PaymentsMckay Wrigley (takeoff)

Category: Other (Backend), Other (Frontend)
Duration 54 minutes 17 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
Code With Antonio Workshops

Code With Antonio WorkshopsCode With Antonio

Category: Other (Frontend)
Duration 17 hours 3 minutes 7 seconds
HTMX - The Practical Guide

HTMX - The Practical GuideAcademind Pro

Category: Other (Frontend)
Duration 4 hours 5 minutes