Section 4 • Tutorial Page Template
Tutorial Page Template
In this tutorial, you’ll learn Astro’s key features by building a fully-functioning blog, from zero to full launch! 🚀
Get ready to…
- Create sub-pages by making a folder and index file. This will be the first level page.
- Make additional pages within the folder as normal.
- You can nest additional sub-pages by repeating this pattern.
Along the way, you’ll:
- Set up your development environment
- Create pages and blog posts for your website
- Build with Astro components
- Query and work with local files
- Add interactivity to your site
- Deploy your site to the web
Want a preview of what you’re going to build? You can view the final project on GitHub or StackBlitz.
Try it yourself - Build a new Header component
Section titled Try it yourself - Build a new Header component- Create a new Header component. Import and use your existing
Navigation.astrocomponent inside a<nav>element which is inside a<header>element.
Show me the code!
Create a file named Header.astro in src/components/
---
import Navigation from './Navigation.astro';
---
<header>
<nav>
<Navigation />
</nav>
</header>Test your knowledge
Section titled Test your knowledge- Multiple choice questions can be created using the MultipleChoice component
- Answers use the Option component, and correct answers are set using the ‘isCorrect’ prop
- Astro components will automatically create a new page on your site when you…