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
Watch Online Build Modern Websites with Astro!
0:00
/ #1: Welcome and Thank You
All Course Lessons (91)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsSimilar courses
B-Sides, Bonuses and Oddities
Sources: Carl (Creative Coding Club)
After completing the basics of GreenSock in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice, sometimes...
17 hours 55 minutes 38 seconds
Remix Bootcamp: Zero to Mastery
Sources: zerotomastery.io
Join Remix Bootcamp to master full-stack web development. Learn from industry experts to build better websites and advance your career in web development
21 hours 2 minutes 22 seconds
Want to join the conversation?
Sign in to comment