| type | unitTitle | title | description | i18nReady |
|---|---|---|---|---|
tutorial |
Construa e projete com componentes de UI Astro |
Check in: Unidade 3 - Componentes |
Tutorial: Construa seu primeiro blog Astro —
Construa componentes Astro para reutilizar código entre elementos comuns através do seu 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';
Agora que você tem arquivos .astro e .md gerando páginas inteiras no seu website, é hora de fazer e reutilizar pequenos pedaços de HTML com componentes Astro!
Nesta unidade, você irá aprender como criar componentes Astro para reutilizar código entre elementos comuns através do seu website.
Você irá construir:
- Um componente de Navegação que apresenta um menu de links para suas páginas
- Um componente de Rodapé para incluir no fim de cada página
- Um componente de Rede Social, usado no rodapé, para links de páginas de perfil
- Um componente interativo Hamburger para mostrar a Navegação em dispositivos móveis
Durante o caminho, você utilizará CSS e JavaScript para construir um design responsivo que reage a tamanhos de tela e a interação do usuário.
## Checklist - [ ] Eu estou pronto para construir alguns componentes Astro!