My Astro Site

{pageTitle}

` elements on your About page, so you can style them. Your code should now look like this: src/pages/about.astro ```astro

My skills are:

{skill}

``` 3. Add the following code to your existing style tag: src/pages/about.astro ```diff ``` 4. Visit your About page in your browser again, and verify, through visual inspection or dev tools, that each item in your list of skills is now green and bold. ## Use your first CSS variable [Section titled “Use your first CSS variable”](#use-your-first-css-variable) The Astro ` ``` 3. Check your About page in your browser preview. You should see that the skills are now navy blue, as set by the `skillColor` variable passed to the `define:vars` directive. ## Try it yourself - Define CSS variables [Section titled “Try it yourself - Define CSS variables”](#try-it-yourself---define-css-variables) 1. Update the ` ``` 2. Add any missing variable definitions in your frontmatter script so that your new ` ``` 2. Add a ` ``` 3. Check your browser preview again and confirm that each page shows an updated footer. ### Test Yourself [Section titled “Test Yourself”](#test-yourself) 1. What line of code do you need to write in an Astro component’s frontmatter to receive values of `title`, `author`, and `date` as props? 1. `const { title, author, date } = Astro.props;` 2. `import BlogPost from '../components/BlogPost.astro'` 3. `` Submit 2. How do you **pass values as props** to an Astro component? 1. `const { title, author, date } = Astro.props;` 2. `import BlogPost from '../components/BlogPost.astro'` 3. `` Submit ## Checklist [Section titled “Checklist”](#checklist) * I can create new `.astro` components in `src/components/` * I can import and use Astro components inside other Astro components. * I can pass props to an Astro component. ### Resources [Section titled “Resources”](#resources) * [Component Props in Astro](/en/basics/astro-components/#component-props) # Build it yourself - Header > Tutorial: Build your first Astro blog — Use everything you've learned so far to build a header with responsive navigation Since your site will be viewed on different devices, it’s time to create a page navigation that can respond to multiple screen sizes! Get ready to… * Create a Header for your site that contains the Navigation component * Make the Navigation component responsive ## Try it yourself - Build a new Header component [Section titled “Try it yourself - Build a new Header component”](#try-it-yourself---build-a-new-header-component) 1. Create a new Header component. Import and use your existing `Navigation.astro` component inside a `

` element which is inside a `

` element. ## Try it yourself - Update your pages [Section titled “Try it yourself - Update your pages”](#try-it-yourself---update-your-pages) 1. On each page, replace your existing `` component with your new header. 2. Check your browser preview and verify that your header is displayed on every page. It won’t look different yet, but if you inspect your preview using dev tools, you will see that you now have elements like `

` and `

` around your navigation links. ## Add responsive styles [Section titled “Add responsive styles”](#add-responsive-styles) 1. Update `Navigation.astro` with the CSS class to control your navigation links. Wrap the existing navigation links in a `

` with the class `nav-links`. src/components/Navigation.astro ```diff --- ---

Home About Blog

``` 2. Copy the CSS styles below into `global.css`. These styles: * Style and position the navigation links for mobile * Include an `expanded` class that can be toggled to display or hide the links on mobile * Use a `@media` query to define different styles for larger screen sizes src/styles/global.css ```diff html { background-color: #f1f5f9; font-family: sans-serif; } body { margin: 0 auto; width: 100%; max-width: 80ch; padding: 1rem; line-height: 1.5; } * { box-sizing: border-box; } h1 { margin: 1rem 0; font-size: 2.5rem; } +/* nav styles */ +.nav-links { +width: 100%; +top: 5rem; +left: 48px; +background-color: #ff9776; +display: none; +margin: 0; +} +.nav-links a { +display: block; +text-align: center; +padding: 10px 0; +text-decoration: none; +font-size: 1.2rem; +font-weight: bold; +text-transform: uppercase; +} +.nav-links a:hover, +.nav-links a:focus { +background-color: #ff9776; +} +.expanded { +display: unset; +} +@media screen and (min-width: 636px) { +.nav-links { +margin-left: 5em; +display: block; +position: static; +width: auto; +background: none; + } +.nav-links a { +display: inline-block; +padding: 15px 20px; + } +} ``` Resize your window and look for different styles being applied at different screen widths. Your header is now **responsive** to screen size through the use of `@media` queries. ## Checklist [Section titled “Checklist”](#checklist) * I can use CSS to add responsive elements to my site. ### Resources [Section titled “Resources”](#resources) * [Component-based Design](https://www.droptica.com/blog/component-based-design/) external * [Semantic HTML Tags](https://www.dofactory.com/html/semantics) external * [Mobile-first Design](https://www.mobileapps.com/blog/mobile-first-design) external # Send your first script to the browser > Tutorial: Build your first Astro blog — Add client-side interactivity to your mobile navigation with an Astro script tag Let’s add a hamburger menu to open and close your links on mobile screen sizes, requiring some client-side interactivity! Get ready to… * Create a hamburger menu component * Write a ` ``` 2. Check your browser preview again at various sizes, and verify that you have a working navigation menu that is both responsive to screen size and responds to user input on this page. ### Importing a `.js` file [Section titled “Importing a .js file”](#importing-a-js-file) Instead of writing your JavaScript directly on each page, you can move the contents of your ` ``` 3. Check your browser preview again at a smaller size and verify that the hamburger menu still opens and closes your navigation links. 4. Add the same ` ``` ### Test your knowledge [Section titled “Test your knowledge”](#test-your-knowledge) 1. When does Astro run any JavaScript written in a component’s frontmatter? 1. Astro never runs JavaScript 2. at build-time 3. When a visitor clicks a button Submit 2. Optionally, Astro can send JavaScript to the browser to allow: 1. users to click page links 2. faster load times 3. client-side interactivity Submit 3. The client-side JavaScript will be sent to a user’s browser when it is written or imported: 1. in ` ``` ## Use your layout on a page [Section titled “Use your layout on a page”](#use-your-layout-on-a-page) 3. Replace the code at `src/pages/index.astro` with the following: src/pages/index.astro ```astro --- import BaseLayout from '../layouts/BaseLayout.astro'; const pageTitle = "Home Page"; ---

My awesome blog subtitle

``` 4. Check the browser preview again to notice what did (or, spoiler alert: did *not*!) change. 5. Add a `` element to `src/layouts/BaseLayout.astro` just above the footer component, then check the browser preview of your Home page and notice what really *did* change this time! src/layouts/BaseLayout.astro ```diff --- import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; import '../styles/global.css'; const pageTitle = "Home Page"; --- {pageTitle}