Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Astro) expand_more

Components

Astro component Component frontmatter Component props Default props Component slots Named slots HTML attributes Dynamic attributes Conditional rendering List rendering

Pages & Routing

src/pages routing Index page Dynamic route Rest parameters getStaticPaths 404 page Redirects Route priority Endpoint route Trailing slash

Layouts & Content

Layout component Nested layouts Content collections Collection schema getCollection getEntry Render content Markdown pages MDX integration Content images

Styling

Scoped styles Global styles CSS variables Class:list Sass integration Tailwind integration CSS modules Style props External stylesheet Critical CSS

Islands

Static component client:load client:idle client:visible client:media client:only Framework component Hydration boundary Sharing state Nano Stores

Data & Server

Top-level await Fetch at build time Astro.glob migration Astro.request Astro.url Cookies API Server actions Middleware API endpoint Environment variables

Rendering

Static output Server output Adapter configuration Prerender page On-demand rendering Streaming SSR Redirect response Headers Sessions View transitions

Performance & Testing

Image component Picture component Font optimization Prefetch Bundle client JavaScript Accessibility audit Component test End-to-end test Build analysis Deployment adapter

Astro / Layouts & Content

Collection schema

Learn Collection schema in Astro with a dedicated explanation, topic-specific example, edge guidance, and mastery check.

12 min read • Beginner

astro-024.astro

astro

const docs=defineCollection({schema:z.object({title:z.string(),order:z.number().int().positive()})});

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Collection schema Mastery Check →

Content collections