Astro Practice
Astro, built the way real content teams ship it. Learn to think in components, send as little JavaScript as the page needs, and keep a site fast as it grows. You'll start with components, props, and slots, then move through pages and file routing, template syntax, content collections, scoped styles and client scripts, framework islands, static generation and feeds, on-demand rendering and API endpoints, forms and actions, middleware and sessions, island state, view transitions, server islands, content architecture and internationalisation, and the delivery patterns production sites are built on. Every exercise is a small piece of a real site, so you learn not just how Astro works, but how to make the rendering and delivery decisions good frontend engineers make every day. Finish able to build, structure, and reason about Astro sites with confidence.
Astro 7.1
Node.js 24Components, Props & Slots
The building blocks of every Astro site. Learn to break a page into reusable .astro components, type the data they take with props, derive what they render in the frontmatter, and leave room for the caller's content with slots, the foundation everything else builds on. Finish every challenge, or complete the star challenge, to complete the module.
Flight Fare Row
A travel booking site renders each fare with hand-written markup, so prices and deal labels are formatted differently on every results page.
Product Card Slots
An online store's product cards all need the same frame but different media and buttons inside it, so the card has been copied five times.
Course Workload Badge
An e-learning catalogue labels course workload by hand, and two editors label the same course differently.
Webinar Series Landing Page
A software company's webinar page needs shared site chrome and a card per session, and its browser tab title is the same on every page.
Frequently asked questions
4What will I practice in this path?
1 module: Components, Props & Slots.
How many challenges are there, and how hard are they?
4 challenges, all easy.
What does this path run on?
Challenges run on Astro 7.1 and Node.js 24.
Do I need to install anything?
No. Every challenge runs in a browser-based IDE with everything already set up, and your code is graded automatically against a test suite.