Intro to Astro

Learn Astro, the modern web framework for building fast, content-rich websites using components and Markdown. In this course, you’ll learn how to create and deploy a personal website from scratch, combining performance with a fun and flexible developer experience.


Avatar of James Q Quick

Duration
2.1 hrs

Intermediate
TierPro
Follow
Start Course
Content
About
Intro to Astro
Project setup and overview
The starter code
Create the header section
Intro to reusable components
Create header component
Adding styles
Styling the header
Styling the header - part 2
Styling the button links
TypeScript in Astro
Finish the button link component
Slot component
Create container component
Frontmatter templating
Create projects section component
Create section component
Create section header component
Importing data from JSON files
Move Project Data to JSON
File based routing
Navbar Component
Create the footer component
Content collections in Astro
Building the blog schema
Markdown Intro
Querying content collections
Creating the blog section
Create the blog card component
Create the Blog List Page
Dynamic Blog Pages
Displaying Blog Content
Create the projects list page
Deploy to Netlify
Wrap up and next steps