CF

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.

Additional

Astro Docs - https://docs.astro.build/en/getting-started/

Tailwind Docs - https://tailwindcss.com/docs

Github Repository - https://github.com/jamesqquick/astro-course-demo

About the Author: James Q Quick

James Q Quick thumbnail

James Q Quick is a US developer and educator behind one of the more active independent web-development YouTube channels, focused on JavaScript, the modern Astro stack, and the broader full-stack JavaScript ecosystem.

His CourseFlix listing carries Build Modern Websites with Astro! — a comprehensive course on the Astro framework, covering the islands architecture, content collections, the integrations ecosystem, and the patterns that make Astro a strong choice for content-heavy sites where JavaScript shouldn't dominate the bundle.

Material is paid and aimed at developers building content sites with Astro. For broader content, see CourseFlix's Astro category page.

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

Related courses

  • Content Sites with Astro and Vue.js thumbnailUpdated 1y ago

    Content Sites with Astro and Vue.js

    By: Vue School
    Want to create a fast and efficient site with content? In this course, you will learn how to use Astro and Vue.js together to develop high-performance.
    1h 3m
  • Build a Full Stack Blog with Astro thumbnailUpdated 6mo ago

    Build a Full Stack Blog with Astro

    By: egghead.io
    Creating a Fully-Functional Blog on Astro is a hands-on course designed to show you how to develop a modern and fully operational blog site without.
    2h 43m
  • Learn Astro thumbnailUpdated 1y ago

    Learn Astro

    By: Chris Pennington
    Astro stands out in the world of overly complex web frameworks due to its simplicity, excellent developer experience, and high performance.
    17h 12m

Frequently asked questions

What prerequisites are needed for this course?
This course is designed for beginner and intermediate web developers. A basic understanding of HTML, CSS, and JavaScript is recommended to follow along with the lessons effectively. The course begins with an introduction to Astro and covers foundational topics, making it accessible for those who have a fundamental grasp of web development concepts.
What projects will I build in this course?
Throughout the course, you will work on enhancing a blog with modern features. Projects include setting up content collections, implementing pagination, adding authentication, and optimizing images. You will also deploy the site to platforms like Netlify and Vercel, incorporating technologies such as Tailwind CSS and TypeScript for a comprehensive learning experience.
Who is the target audience for this course?
The course is aimed at beginner and intermediate web developers eager to expand their skills in building modern websites. It's particularly suitable for those looking to enhance their blogs with advanced features like authentication, dynamic routing, and server-side rendering, using the Astro framework and associated tools.
How does this course compare to other web development courses?
This course focuses specifically on the Astro framework, covering static page generation, server-side rendering, and the integration of modern tools like Tailwind CSS, TypeScript, and Cloudinary. Unlike general web development courses, it provides a specialized approach to building dynamic and optimized blogs, making it unique for those interested in the Astro ecosystem.
What tools and platforms are covered in this course?
The course covers modern tools and platforms including Astro, Tailwind CSS, TypeScript, Xata, and Cloudinary. You'll learn to deploy your site using Netlify and Vercel. These tools are integrated throughout the course to build a feature-rich blog, focusing on static site generation and server-side rendering capabilities.
Does the course cover hosting and deployment?
Yes, the course includes lessons on deploying your site to both Netlify and Vercel. These lessons guide you through setting up a GitHub repository, deploying your Astro project, and integrating necessary configurations for successful hosting. Understanding site deployment is crucial for bringing your project live on the web.
How much time should I expect to commit to this course?
With a total of 91 lessons, the course provides comprehensive coverage of building modern websites with Astro. While the exact runtime is unspecified, students should be prepared to invest a significant amount of time to engage with each lesson, complete exercises, and implement the features discussed. Consistent practice and review will help reinforce learning outcomes.