Layout files (+layout.svelte) - Mini Project: Build & Apply

Creating a Basic Layout with +layout.svelte in SvelteKit

📖 Scenario: You are building a simple website with multiple pages. You want all pages to share the same header and footer for a consistent look.

🎯 Goal: Build a +layout.svelte file that wraps page content with a header and footer. This layout will be used by all pages automatically.

📋 What You'll Learn

Create a +layout.svelte file with a header, a slot for page content, and a footer

Use semantic HTML elements: <header>, <main>, and <footer>

Include a heading inside the header with the text 'My Website'

Place the <slot> inside the main section to render page content

Add a footer with the text '© 2024 My Website'

💡 Why This Matters

🌍 Real World

Layouts are used in websites to keep a consistent look and feel across multiple pages, like having the same header and footer everywhere.

💼 Career

Understanding layout files in SvelteKit is important for building scalable web apps with reusable components and consistent design.

1

Create the basic layout file

Create a file named +layout.svelte and add a <header> element containing an <h1> with the text 'My Website'.

Svelte

  My Website

Hint

Use semantic HTML tags. The header should have an h1 with the exact text 'My Website'.

2

Add the main content slot

Inside +layout.svelte, add a <main> element below the header. Inside <main>, add a <slot> element to render page content.

Svelte

  My Website


  

Hint

The <slot> tag is where page content will appear inside the layout.

3

Add a footer with copyright text

Below the <main> element, add a <footer> element containing the text '© 2024 My Website'.

Svelte

  My Website


  

Hint

Use the <footer> tag for the bottom section with the exact text.

4

Complete the layout with semantic structure

Ensure the +layout.svelte file has the <header>, <main> with <slot>, and <footer> in this order, wrapping the page content properly.

Svelte

  My Website


  


  © 2024 My Website

Hint

Check that all parts are present and in the correct order for a proper layout.