| type | unitTitle | title | description | i18nReady | head | |||||
|---|---|---|---|---|---|---|---|---|---|---|
tutorial |
Build and design with Astro UI components |
Check in: Unit 3 - Components |
Tutorial: Build your first Astro blog —
Build Astro components to reuse code for common elements across your website |
true |
|
import Box from '/components/tutorial/Box.astro';
import Checklist from '/components/Checklist.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro';
Now that you have .astro and .md files generating entire pages on your website, it's time to make and reuse smaller bits of HTML with Astro components!
In this unit, you'll learn how to create Astro components to reuse code for common elements across your website.
You'll build:
- A Navigation component that presents a menu of links to your pages
- A Footer component to include at the bottom of each page
- A Social Media component, used in the Footer, that links to profile pages
- An interactive Menu component to toggle the Navigation on mobile
Along the way, you'll use CSS and JavaScript to build a responsive design that reacts to screen sizes and user input.
## Checklist - [ ] I am ready to build some Astro components!