🏗️ Build the Homepage

This is where it gets fun. You're going to build real pages with real content.

How SvelteKit pages work

SvelteKit uses file-based routing. That means the files and folders inside src/routes/ directly become the pages on your site:

No configuration needed. Create a folder, put a +page.svelte file in it, and you have a new page. That's it.

Understanding Svelte components

A .svelte file is a component — it combines HTML, CSS, and JavaScript (TypeScript, in our case) in a single file:

<script lang="ts">
  // Your logic goes here (TypeScript)
</script>

<!-- Your HTML goes here -->

<style>
  /* Your styles go here (CSS) */
</style>

One powerful thing about Svelte: styles are scoped. CSS you write inside a component only affects that component. You can't accidentally break another page's styling. Every component is its own self-contained world.

The lang="ts" on the script tag tells Svelte you're writing TypeScript, not plain JavaScript. TypeScript catches mistakes before they become bugs — it's like spell-check for your code.

Create a layout

A layout wraps every page on your site. It's where you put things that appear everywhere — like your navigation bar and footer.

Think of it like a picture frame. The frame stays the same; the picture inside changes as you navigate between pages.

Open src/routes/+layout.svelte. If it doesn't exist, create it. Replace its contents with:

<script lang="ts">
  import type { Snippet } from 'svelte';
  let { children }: { children: Snippet } = $props();
</script>

<div class="app">
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    {@render children()|}
  </main>
  <footer>
    <p>Built with SvelteKit &middot; Deployed on Cloudflare</p>
  </footer>
</div>

<style>
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: system-ui, sans-serif;
  }
  header { background: #1a1a2e; padding: 1rem 2rem; }
  nav { display: flex; gap: 1.5rem; }
  nav a { color: #e0e0e0; text-decoration: none; font-weight: 500; }
  nav a:hover { color: #ffffff; }
  main {
    flex: 1;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
  }
  footer {
    background: #1a1a2e;
    color: #e0e0e0;
    text-align: center;
    padding: 1rem;
    font-size: 0.875rem;
  }
</style>

Don't worry about memorizing every CSS property here. The important thing is the structure: a header with navigation at the top, a main area where page content appears, and a footer at the bottom.

The {@render children()} part is where SvelteKit inserts each page's content. When you visit /, it puts the homepage content there. When you visit /about, it swaps in the about page. The layout stays put.

Build the homepage

Open src/routes/+page.svelte and replace its contents with:

<script lang="ts">
  let rocketLaunched: boolean = $state(false);
  function launch(): void {
    rocketLaunched = true;
  }
</script>

<section class="hero">
  <h1>Launch School</h1>
  <p class="tagline">Learn to build real things for the real internet.</p>
  <button onclick={launch}>
    {rocketLaunched ? '🚀 Launched!' : 'Launch'}
  </button>
</section>
<section class="intro">
  <h2>What is this?</h2>
  <p>
    This is a website we built together — from scratch, using real tools
    that real developers use. It's deployed to the internet. You're looking
    at it right now.
  </p>
</section>

<style>
  .hero { text-align: center; padding: 3rem 0; }
  h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
  .tagline { font-size: 1.25rem; color: #666; margin-bottom: 2rem; }
  button {
    background: #1a1a2e;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    border-radius: 6px;
    cursor: pointer;
  }
  button:hover { background: #16213e; }
  .intro { padding: 2rem 0; }
  h2 { margin-bottom: 0.5rem; }
</style>

Let's read this together

Every line should make sense:

• let rocketLaunched: boolean = $state(false); — Creates a piece of reactive state. It starts as false. The : boolean is TypeScript saying "this can only be true or false." The $state() tells Svelte to watch this variable and update the page when it changes.
• function launch(): void — A function that sets rocketLaunched to true. The : void means it doesn't return anything.
• {rocketLaunched ? '🚀 Launched!' : 'Launch'} — This is a ternary expression. If rocketLaunched is true, show "Launched!". Otherwise, show "Launch."
• The onclick={launch} attribute calls the launch function when the button is clicked.

Create the About page

Create the folder and file: src/routes/about/+page.svelte

<h1>About</h1>

<p>This site was built by [your name] and [parent's name] as part of Launch School.</p>

<p>
  We used SvelteKit (a framework for building websites) and deployed it to
  Cloudflare (a global network of servers). Every line of code was written
  and understood by us.
</p>

<p>
  The tools are real. The deployment is real. The learning is real.
</p>

Replace the names in brackets with your actual names. This is your site — make it yours.