Astro Course – Build Modern Websites with Astro! 2024-10

Published on: 2024-11-07 18:05:45

Categories: 28

Description

Build Modern Websites with Astro course! This course teaches you how to build a website using Astro 4.0, a versatile modern web framework. This course is suitable for beginner to intermediate JavaScript developers. You are expected to have basic knowledge of JavaScript and HTML/CSS. Experience with frameworks is recommended but not required.

What you will learn

Full-stack Markdown Blog In this course, you’ll take your blog to the next level by adding powerful features like tags, pagination, authentication, comments, and more! You will also learn to use modern technologies such as Tailwind CSS, TypeScript, Xata and Cloudinari.
Static Site Generation
Server-side rendering
Content Collections
Astro Islands
Image optimization
Integrations
Tailwind CSS
Types of typescript and Zod
API routes / endpoints
Pagination
How to work with Markdown
SEO and meta tags
RSS feeds
Deploying and Hosting

Who is this course suitable for?

They have basic knowledge of HTML, CSS and JavaScript.
Interested in learning new skills to enhance their resume.
They are familiar with a framework (its use is recommended, but not mandatory).

Course specifications

Publisher: Astrocourse
Lecturer: James Q Quick
Training level: advanced
Training duration: 7 hours and 29 minutes
Number of courses: 91

Course headings

Welcome and Thank You
Resources
Intro To Astro
Astro 4.0
Creating Your First Astro Project
The Dev Toolbar
Working with Git and Github
VS Code Setup
Shortcuts That I Use
Working With CSS
Overview of Astro Integrations
Introduction to Tailwind CSS
Setting Up Tailwind CSS
Updating the Shared Layout
Updating the Header and Footer Components
Introduction to Markdown and Frontmatter
Introduction to Content Collections
Configuring Content Collections with Zod
Querying and Displaying List of Blog Posts
Creating the PostList Component
Creating Dynamic Routes for Blog Posts
Displaying Blog Posts
Styling Blog Posts Using The Tailwind Typography Plugin
Cleaning Up Code With Reusable Components
Creating the TableOfContents Component
Creating the Share Component
Intro to Pagination
Creating The Dynamic Route for Paginated Blog Posts
Creating the Pagination Component
Introduction to Meta Tags
Adding Meta Tags
Customizing Meta Tags Per Page
Adding an RSS Feed
Displaying Categories
Creating Dynamic Routes for Category Pages
Displaying a Featured Post
Displaying Recent Posts
Refactoring the CategoryList Component
Intro to the Astro Image Component
Setting Up The Astro Image Component
Section Intro
Adding Svelte (and Client Directives)
Handling Form Submissions with KwesForms
Setting Up a Github Repository
Deploying to Netlify
Deploying to Vercel
Updating the Site Config Property
Next Steps
Overview of the Premium Content
Overview of SSR In Astro
Adding the Netlify Adapter
Converting Blog Post Pages to SSR
Fixing a Pagination Bug
Converting Category Pages to SSR
Fixing Pagination Bugs
Adding An Environment Variable For Posts Per Page
Creating the Authors Collection
Displaying Author Info For Blog Posts
Creating Dynamic Routes for Author Pages
Intro to Cloudinary and Account Setup
Installing and Configuring Cloudinary in Astro
Adding Auto Generated Image URLs
Intro to Xata
Creating the Users Schema
Creating the Comments Schema
Integrating Xata Into Astro and Generating TypeScript Types
Overview of Authentication with Cookies
Creating the Signup Page
Handling the Signup Endpoint
Securing Our Cookies
Creating the Login Page
Handling the Login Endpoint
Handling Errors
Handling the Sign Out Endpoint
Updating the Header
Handling Redirects after Login
Creating the Comment Form
Handling Comment Form Submission
Querying Comments for a Blog Post
Displaying Comments for a Blog Post
Section Intro
Displaying Emojis
Setting up the Reactions Table
Handling Emoji Reactions
Querying Emojis
Creating the Newsletter Form
Handling the Newsletter Form Submission
Saving Subscriber Emails to Xata
Creating the Success and Failure Pages
Deploy to Vercel
Deploy to Netlify