Astro Fundamentals
Learn how Astro builds fast, content-first sites by shipping zero JavaScript by default and hydrating only the components that need it. Each lesson pairs real Astro code to read with a runnable challenge that models the underlying idea in plain JavaScript.
5 lessons · ~1.5 hours
1. Islands First
File-based routing
A file's path inside src/pages becomes the URL it serves — no router config required.
.astro components & props
The frontmatter script runs on the server at build time; the template below renders HTML from its values.
Islands & partial hydration
Astro ships zero JS by default — you opt individual components in with a client directive.
Content collections
Define a schema once and Astro validates your markdown frontmatter and hands back type-safe entries.
Layouts & slots
A layout wraps a page's content through a <slot/>, keeping shared chrome in one place.