Layout components in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a layout component in Astro.

Astro

import [1] from '../layouts/BaseLayout.astro';

Drag options to blanks, or click blank then click option'

ABaseLayout

BLayoutBase

CMainLayout

DLayout

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different component name than the file exports.

Misspelling the component name.

Forgetting to import the layout before using it.

The layout component is named BaseLayout and must be imported exactly as defined.

2fill in blank

medium

Complete the code to wrap page content with the layout component in Astro.

Astro

<[1]>
  <h1>Welcome to my site</h1>
</[1]>

Drag options to blanks, or click blank then click option'

AMain

BLayout

CBaseLayout

DPageLayout

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different tag name than the imported layout.

Forgetting to close the component tag.

Using lowercase tag names for components.

The layout component tag must match the imported layout name BaseLayout to wrap the content properly.

3fill in blank

hard

Fix the error in passing props to the layout component in Astro.

Astro

<BaseLayout [1]={'dark'}>
  <p>Content here</p>
</BaseLayout>

Drag options to blanks, or click blank then click option'

Atheme

BTheme

Cclass

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase prop names which Astro treats differently.

Passing invalid or unsupported prop names.

Forgetting to wrap string values in quotes.

Props in Astro are case-sensitive and should match the layout's expected prop name, which is theme.

4fill in blank

hard

Fill both blanks to define a layout component with a slot for page content in Astro.

Astro

export default function [1]() {
  return (
    <div class="container">
      [2]
    </div>
  );
}

Drag options to blanks, or click blank then click option'

ABaseLayout

B<slot />

C<content />

DLayout

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect component names.

Using <content /> instead of <slot />.

Forgetting to return JSX from the function.

The layout component is named BaseLayout and uses <slot /> to render child content inside.

5fill in blank

hard

Fill all three blanks to create a layout component that accepts a title prop and renders children in Astro.

Astro

export default function [1]([2]) {
  return (
    <main>
      <h1>{title}</h1>
      [3]
    </main>
  );
}

Drag options to blanks, or click blank then click option'

APageLayout

B{ title }

C<slot />

DBaseLayout

Attempts:

3 left

💡 Hint

Common Mistakes

Not destructuring props correctly.

Using wrong component names.

Forgetting to include <slot /> for children.

The layout component is named BaseLayout. It destructures the title prop and uses <slot /> to render child content.

Practice

1. What is the main purpose of a layout component in Astro?

easy

A. To fetch data from an API

B. To define routes for the website

C. To handle user input events

D. To wrap page content and keep design consistent across pages

Solution

1. Step 1: Understand what layout components do

   Layout components are used to wrap page content to maintain a consistent look and feel across multiple pages.

2. Step 2: Compare with other options

   Fetching data, handling user input, and defining routes are not the main roles of layout components.

3. Final Answer:

   To wrap page content and keep design consistent across pages -> Option D

4. Quick Check:

   Layout = consistent design wrapper [OK]

Hint: Layouts wrap content to keep pages looking the same [OK]

Common Mistakes:

• Confusing layout with data fetching
• Thinking layouts handle user events
• Mixing layout with routing logic

2. Which of the following is the correct way to use a layout component in an Astro page?

easy

A. import Layout from '../layouts/Layout.astro'; then wrap content with <Layout>...</Layout>

B. import Layout from '../layouts/Layout.astro'; then call Layout() as a function

C. Use <layout>...</layout> without import

D. Add layout='Layout' attribute to the <body> tag

Solution

1. Step 1: Identify correct import and usage

   In Astro, you import the layout component and wrap your page content inside its tags.

2. Step 2: Check other options for syntax errors

   Calling layout as a function or using tags without import is incorrect. Adding attributes to <body> is not how layouts work.

3. Final Answer:

   Import layout and wrap content with <Layout>...</Layout> -> Option A

4. Quick Check:

   Import + wrap content = correct layout use [OK]

Hint: Always import layout and wrap content inside its tags [OK]

Common Mistakes:

• Trying to call layout as a function
• Using layout tags without importing
• Misusing HTML attributes for layouts

3. Given this layout component code:

---
// Layout.astro
---

  
    
Site Header
    <slot />
    
Site Footer
  

And this page code:

---
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <main>Welcome to my site</main>
</Layout>

What will the rendered HTML output look like?

medium

A. Site HeaderWelcome to my siteSite Footer

B. Site HeaderSite FooterWelcome to my site

C. Welcome to my site

D. Site HeaderSite Footer

Solution

1. Step 1: Understand how <slot /> works in layout

   The <slot /> tag is replaced by the page content wrapped inside the layout.

2. Step 2: Replace <slot /> with page content

   The page content is <main>Welcome to my site</main>, so it appears between header and footer.

3. Final Answer:

   <html><body><header>Site Header</header><main>Welcome to my site</main><footer>Site Footer</footer></body></html> -> Option A

4. Quick Check:

   Slot replaced by page content =
   Site Header
   Welcome to my site
   Site Footer
   [OK]

Hint: Slot tag shows page content inside layout [OK]

Common Mistakes:

• Leaving tag as is in output
• Placing page content outside footer
• Omitting header or footer

4. This Astro page code tries to use a layout but shows an error:

---
import Layout from '../layouts/Layout'
---
<Layout>
  <h1>Hello</h1>
</Layout>

What is the most likely cause of the error?

medium

A. Using <Layout> without importing it

B. Missing semicolon after import statement

C. Layout component file path is incorrect or missing file extension

D. Page content must be inside a <main> tag

Solution

1. Step 1: Check import statement syntax

   The import is missing the file extension '.astro', which is required in Astro imports.

2. Step 2: Understand Astro import rules

   Astro requires full file paths including extensions for components, so '../layouts/Layout.astro' is correct, but '../layouts/Layout' is not.

3. Final Answer:

   Layout component file path is incorrect or missing file extension -> Option C

4. Quick Check:

   Missing file extension causes import error [OK]

Hint: Always include .astro extension in import paths [OK]

Common Mistakes:

• Assuming semicolon is required in Astro imports
• Forgetting to import layout before use
• Thinking page content must be inside <main>

5. You want to create a layout that adds a sidebar only on some pages. Which approach correctly applies this conditional layout in Astro?

hard

A. Add sidebar HTML directly in each page without using layouts

B. Create two layouts: one with sidebar and one without; import and use the right one per page

C. Wrap the sidebar in a tag and pass it from the page

D. Use a single layout and add an if statement inside the layout to show sidebar based on page content

Solution

1. Step 1: Understand layout usage for conditional design

   Layouts wrap pages, so to conditionally add sidebar, create separate layouts for each design.

2. Step 2: Evaluate other options

   Adding if inside layout is complex and not recommended; passing sidebar via slot is not typical; adding sidebar in pages breaks consistency.

3. Final Answer:

   Create two layouts: one with sidebar and one without; import and use the right one per page -> Option B

4. Quick Check:

   Use different layouts for different page designs [OK]

Hint: Use separate layouts for different page designs [OK]

Common Mistakes:

• Trying to conditionally render sidebar inside one layout
• Misusing slots to pass sidebar content
• Adding sidebar directly in pages breaking consistency