English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 91 Lessons (7h 28m) | 1.58 GB
A hands-on course to teach you how to build websites using Astro 4.0, the all-in-one framework for the modern web.
In this course, you’ll take your blog to the next level by adding powerful features like tags, pagination, authentication, comments, and more! You’ll also learn to use modern technologies like Tailwind CSS, TypeScript, Xata, and Cloudinary!
What topics are covered in this course?
One thing you can be sure of is that we take no short-cuts! You will learn core Astro concepts hands-on and in-depth.
Static Site Generation vs Server-side Rendering
Learn about the multiple strategies Astro provides for rendering pages in the browser
Content Collections
Create, organize, and validate your markdown content using Content Collections
Image Optimization
Use the Astro Image component to optimized images with lazy loading for faster load times
TypeScript
Use TypeScript to define prop types, database table models, and frontmatter schemas for Content Collections
Authentication
Learn to build a basic auth strategy using Server-side Rendering, Xata (PostgreSQL database), and cookies.
Deploying and Hosting
Deploy and host your website with Astro and get your site live in no time
Is this course for you?
This course is built for beginner to intermediate web developers who have
A fundamental knowledge of HTML, CSS, and JavaScript
A desire to learn new skills to put on their resume
Some experience with a framework (encouraged but not required)
Table of Contents
1 Welcome and Thank You
2 Resources
3 Intro To Astro
4 Astro 4.0
5 Creating Your First Astro Project
6 The Dev Toolbar
7 Working with Git and Github
8 VS Code Setup
9 Shortcuts That I Use
10 Working With CSS
11 Overview of Astro Integrations
12 Introduction to Tailwind CSS
13 Setting Up Tailwind CSS
14 Updating the Shared Layout
15 Updating the Header and Footer Components
16 Introduction to Markdown and Frontmatter
17 Introduction to Content Collections
18 Configuring Content Collections with Zod
19 Querying and Displaying List of Blog Posts
20 Creating the PostList Component
21 Creating Dynamic Routes for Blog Posts
22 Displaying Blog Posts
23 Styling Blog Posts Using The Tailwind Typography Plugin
24 Cleaning Up Code With Reusable Components
25 Creating the TableOfContents Component
26 Creating the Share Component
27 Intro to Pagination
28 Creating The Dynamic Route for Paginated Blog Posts
29 Creating the Pagination Component
30 Introduction to Meta Tags
31 Adding Meta Tags
32 Customizing Meta Tags Per Page
33 Adding an RSS Feed
34 Displaying Categories
35 Creating Dynamic Routes for Category Pages
36 Displaying a Featured Post
37 Displaying Recent Posts
38 Refactoring the CategoryList Component
39 Intro to the Astro Image Component
40 Setting Up The Astro Image Component
41 Section Intro
42 Adding Svelte (and Client Directives)
43 Handling Form Submissions with KwesForms
44 Setting Up a Github Repository
45 Deploying to Netlify
46 Deploying to Vercel
47 Updating the Site Config Property
48 Next Steps
49 Overview of the Premium Content
50 Overview of SSR In Astro
51 Adding the Netlify Adapter
52 Converting Blog Post Pages to SSR
53 Fixing a Pagination Bug
54 Converting Category Pages to SSR
55 Fixing Pagination Bugs
56 Adding An Environment Variable For Posts Per Page
57 Creating the Authors Collection
58 Displaying Author Info For Blog Posts
59 Creating Dynamic Routes for Author Pages
60 Intro to Cloudinary and Account Setup
61 Installing and Configuring Cloudinary in Astro
62 Adding Auto Generated Image URLs
63 Intro to Xata
64 Creating the Users Schema
65 Creating the Comments Schema
66 Integrating Xata Into Astro and Generating TypeScript Types
67 Overview of Authentication with Cookies
68 Creating the Signup Page
69 Handling the Signup Endpoint
70 Securing Our Cookies
71 Creating the Login Page
72 Handling the Login Endpoint
73 Handling Errors
74 Handling the Sign Out Endpoint
75 Updating the Header
76 Handling Redirects after Login
77 Creating the Comment Form
78 Handling Comment Form Submission
79 Querying Comments for a Blog Post
80 Displaying Comments for a Blog Post
81 Section Intro_2
82 Displaying Emojis
83 Setting up the Reactions Table
84 Handling Emoji Reactions
85 Querying Emojis
86 Creating the Newsletter Form
87 Handling the Newsletter Form Submission
88 Saving Subscriber Emails to Xata
89 Creating the Success and Failure Pages
90 Deploy to Vercel
91 Deploy to Netlify
Resolve the captcha to access the links!