Free through lesson 3

Astro for Beginners

From setup to layouts and components, content collections, islands, SEO and RSS, all the way to publishing. Over 20 lessons, you'll get to the point where you can "build a text-first site without shipping JavaScript." Every version, build output, and byte count shown was actually measured with Astro v7.3.4.

Start from lesson 1 Unlock every course

Curriculum

The 20 lessons are split into 5 chapters. We recommend going in order from chapter 1, but feel free to dip into just the parts you're curious about. * .astro files can't run in the browser, so try them in the project you create in lesson 3. Parts shown in HTML, JavaScript, or TypeScript can be run in the browser as is.

Chapter 1 — What Is Astro? (lessons 1–4)

Get a handle on the difference between MPAs and SPAs, build the same page with Astro and Next.js, and actually compare how many bytes of JavaScript get shipped. Finally, you'll learn .astro syntax and scoped styles.

MPAs, SPAs, and Where Astro Fits

Fetching new HTML on every navigation vs. one HTML page redrawn by JavaScript. Decide which suits a text-first site.

Free

Measuring How Much JS You're Not Sending

Build the same page with Astro and Next.js and compare the bytes served. Find out where the gap between 0 and 450,000 bytes comes from.

Free

Setup and Your First Page

Create a project with npm create astro and check the installed version. Learn dev vs. build vs. preview and what each generated file does.

Free

".astro" Syntax and Scoped Styles

The frontmatter runs only at build time. Covers expressions, conditionals and loops, and how style tags get scoped automatically.

Chapter 2 — Building Pages (lessons 5–9)

Gather the parts you need to finish a page: layouts, components, slots, routing, and static assets. At the end, you'll measure images being converted to WebP.

A Shared Outer Frame with Layouts

Put the head and body shared by every page in one place. Swap the title via Props and receive content through a slot.

Components and Typed Props

Extract repeated markup into components. How to type Props, and how to decide how small to split things.

Inserting Content with Slots

Default slots, named slots, and fallbacks, plus how to render differently depending on whether content was passed.

File-Based Routing and Dynamic Routes

File placement in src/pages becomes the URL. Covers dynamic routes, getStaticPaths, and where to put the 404 page.

Static Assets and Image Optimization

When to use public vs. src/assets. Measure how the Image component converts to WebP and fills in width and height automatically.

Chapter 3 — Working with Content (lessons 10–14)

Bundle articles written in Markdown into a collection, type them with a schema, and generate a list page and article pages. Finally, you'll use MDX to place components in the body.

Turning Markdown into Pages

How frontmatter relates to the body, how headings get ids, and when Markdown alone is enough and when it isn't.

Defining Content Collections

Configure the glob loader in content.config.ts and fetch entries with getCollection. How ids are decided, and what changed since v4.

Typed Frontmatter and Builds That Stop on Validation

Define types with a schema and typos stop the build. Covers defaults, transforms, references, and how to read the errors.

Building the List Page and Article Pages

Sort with getCollection for the list, and generate article pages with getStaticPaths and render. Keep the sorting in one place.

Placing Components in Content with MDX

Embed parts in the body that Markdown can't express. How to mix md and mdx, and when you're better off not using MDX.

Chapter 4 — Interactivity Only Where Needed (lessons 15–17)

Learn the idea behind islands architecture and how to embed React or Svelte as islands. You'll check in the network log how client:load and client:visible change when code is loaded.

The Idea of Islands Architecture

Keep most of the page as quiet HTML and run only the interactive parts independently. Measure where island boundaries are drawn.

Embedding React and Svelte, and Comparing the Cost

How to add integrations, measured differences for the same island in each framework, and when a plain script is enough.

client:* Directives and When Code Loads

Check the differences between load, idle, visible, media, and only in the network log, and why visible should be your default.

Chapter 5 — Shipping It (lessons 18–20)

Set up canonical URLs, OGP, and a sitemap, publish an RSS feed, and read the build output before going live. Finally, you'll get clear criteria for choosing between Astro and Next.js.

SEO, OGP, and Sitemaps

Set site to build absolute URLs. Put canonical and OGP in one place in the layout, and generate a sitemap automatically.

RSS and Reading the Build Output

Build a feed with @astrojs/rss and measure a sorting pitfall. Count and read what ended up in dist.

Deploying, and When to Use Next.js Instead

Just serve dist as is to go live. What to check after launch, and how to decide between Astro and Next.js.

Once you've finished all 20 lessons, move on to Next.js to handle logins and databases, or to Modern CSS & Tailwind to polish the look. A membership unlocks every course.