Layout files (+layout.svelte) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a layout component that wraps page content.

Svelte

<script>
  export let [1];
</script>

<main>
  <slot />
</main>

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

Adata

Bpage

Ccontent

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'children' which is common in React but not in SvelteKit.

Using 'page' which refers to the $page store, not a prop.

Using 'content' which is not a standard prop here.

In SvelteKit, the +layout.svelte file automatically wraps pages. The data prop is commonly used to access data from the load function.

2fill in blank

medium

Complete the code to include a navigation bar inside the layout.

Svelte

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

[1]

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

A<content />

B{page}

C<slot />

D<children />

Attempts:

3 left

💡 Hint

Common Mistakes

Using React-like {page} or <children /> which are not valid in Svelte.

Using <content /> which does not exist in Svelte.

The <slot /> tag is used in Svelte layouts to render the child page content inside the layout.

3fill in blank

hard

Fix the error in the layout script to correctly import a component.

Svelte

<script>
  import Header from '[1]';
</script>

<Header />
<slot />

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

A./Header.svelte

BHeader.svelte

C/Header.svelte

Dheader.svelte

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the ./ prefix causes import errors.

Using uppercase or lowercase inconsistently in file names.

Relative imports in Svelte use ./ to refer to files in the same folder. So ./Header.svelte is correct.

4fill in blank

hard

Fill both blanks to create a layout that applies a CSS class and includes page content.

Svelte

<div class="[1]">
  [2]
</div>

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

Alayout-container

B<slot />

C<content />

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using <content /> which is not valid in Svelte.

Leaving the class attribute empty or invalid.

The class attribute should have a valid CSS class name like layout-container. The <slot /> tag inserts the page content.

5fill in blank

hard

Fill all three blanks to create a layout with a header, main content slot, and footer.

Svelte

<header>[1]</header>
<main>[2]</main>
<footer>[3]</footer>

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

A<Header />

B<slot />

C<Footer />

D<Content />

Attempts:

3 left

💡 Hint

Common Mistakes

Using <Content /> which is not a standard Svelte slot or component.

Forgetting to include the <slot /> for page content.

The layout includes a <Header /> component, a <slot /> for page content, and a <Footer /> component.