Make Your First Change | Build BookIt with Svelte 5

Your First Feature

You’ve set up the project, explored the structure, and started the dev server. Now it’s time to write some actual code. We’ll transform the generic SvelteKit welcome page into BookIt’s homepage.

What You’ll Learn

How to edit an existing Svelte component
How to use variables in your markup
How to add basic styling to a page
The satisfaction of seeing your changes instantly

The Current State

Open src/routes/+page.svelte. Right now it shows the default SvelteKit content:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

This is about to become BookIt’s front door.

Step 1: Update the Content

Replace the entire file with BookIt’s welcome message:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to BookIt</h1>
<p>Book your next service appointment in minutes.</p>

Save the file. Your browser updates immediately — “Welcome to BookIt” now greets visitors.

That’s a real change to a real app. Simple, but it’s yours.

Step 2: Add More Information

Let’s tell visitors what BookIt offers. Expand the page:

<!-- filename: src/routes/+page.svelte -->

<!-- ... HTML -->

<h2>Our Services</h2>
<ul>
	<li>Lawn Mowing</li>
	<li>Hedge Trimming</li>
	<li>Garden Consultation</li>
	<li>Tree Pruning</li>
	<li>Patio Cleaning</li>
</ul>

Save again. The page now shows a list of services. We’re hardcoding these for now — later modules will load them from a database.

Step 3: Add a Script Section

Let’s use a variable instead of repeating “BookIt” if we need it elsewhere. Add a script section on the top of the file:

<!-- filename: src/routes/+page.svelte -->
<script>
	const appName = 'BookIt'
	const tagline = 'Book your next service appointment in minutes.'
</script>

<!-- ... HTML -->

The curly braces {appName} and {tagline} insert the variable values into the HTML. The page looks the same, but now we can reuse these values.

Step 4: Add Styling

Time to make it look like a proper landing page. Add a style under the HTML markup:

<!-- filename: src/routes/+page.svelte -->
<!-- Script -->
<!-- ... HTML -->

<style>
	.hero {
		text-align: center;
		padding: 4rem 1rem;
		background: linear-gradient(135deg, #61d7a8 0%, #4ba298 100%);
		color: white;
		border-radius: 8px;
		margin-bottom: 2rem;
	}

	h1 {
		font-size: 2.5rem;
		margin: 0 0 0.5rem;
	}

	.tagline {
		font-size: 1.25rem;
		opacity: 0.9;
		margin: 0;
	}

	.services {
		max-width: 600px;
		margin: 0 auto;
	}

	h2 {
		color: #374151;
	}

	ul {
		list-style: none;
		padding: 0;
	}

	li {
		padding: 0.75rem 1rem;
		background: #f9fafb;
		margin-bottom: 0.5rem;
		border-radius: 4px;
		border-left: 3px solid #61d7a8;
	}
</style>

Save and check your browser. BookIt now has a gradient hero section and styled service list. Looks like a real app.

Step 5: Add a Call to Action

Every good landing page needs a call to action. Let’s add a button that will eventually link to the services page:

<!-- filename: src/routes/+page.svelte -->
<!-- script -->

<div class="hero">
	<h1>Welcome to {appName}</h1>
	<p class="tagline">{tagline}</p>
  <!-- add CTA link -->
	<a href="/services" class="cta">Browse Services</a>
</div>
<!-- ... rest of HTML -->

<style>
  /* ... existing styles ... */

  .cta {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: white;
    color: #4ba298;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: transform 0.2s;
  }

  .cta:hover {
    transform: translateY(-2px);
  }
</style>

The button links to /services — a page that doesn’t exist yet. Clicking it will show a 404 error. We’ll create that page in the next module.

What You Built

Look at your browser. In just a few minutes, you’ve created:

A welcoming hero section with a gradient background
A clear tagline explaining what BookIt does
A list of available services
A call-to-action button with a hover effect

This is the homepage visitors will see when they first arrive at BookIt.

The Complete File

Here’s the full +page.svelte for reference:

<!-- filename: src/routes/+page.svelte -->
<script>
	const appName = 'BookIt'
	const tagline = 'Book your next service appointment in minutes.'
</script>

<div class="hero">
	<h1>Welcome to {appName}</h1>
	<p class="tagline">{tagline}</p>
	<a href="/services" class="cta">Browse Services</a>
</div>

<section class="services">
	<h2>Our Services</h2>
	<ul>
		<li>Lawn Mowing</li>
		<li>Hedge Trimming</li>
		<li>Garden Consultation</li>
		<li>Tree Pruning</li>
		<li>Patio Cleaning</li>
	</ul>
</section>

<style>
	.hero {
		text-align: center;
		padding: 4rem 1rem;
		background: linear-gradient(135deg, #61d7a8 0%, #4ba298 100%);
		color: white;
		border-radius: 8px;
		margin-bottom: 2rem;
	}

	h1 {
		font-size: 2.5rem;
		margin: 0 0 0.5rem;
	}

	.tagline {
		font-size: 1.25rem;
		opacity: 0.9;
		margin: 0 0 1.5rem;
	}

	.cta {
		display: inline-block;
		padding: 0.75rem 2rem;
		background: white;
		color: #4ba298;
		text-decoration: none;
		border-radius: 4px;
		font-weight: 600;
		transition: transform 0.2s;
	}

	.cta:hover {
		transform: translateY(-2px);
	}

	.services {
		max-width: 600px;
		margin: 0 auto;
	}

	h2 {
		color: #374151;
	}

	ul {
		list-style: none;
		padding: 0;
	}

	li {
		padding: 0.75rem 1rem;
		background: #f9fafb;
		margin-bottom: 0.5rem;
		border-radius: 4px;
		border-left: 3px solid #61d7a8;
	}
</style>

Summary

You’ve made your first real changes to BookIt. Starting from a blank template, you created a styled homepage with a hero section, service list, and call-to-action — all using the script, markup, and style sections you learned about.

Key takeaways:

Edit .svelte files to change your app
Use {variable} to insert JavaScript values into HTML
Styles in the <style> tag are scoped to the component
Changes appear instantly thanks to the dev server

Module 1 Complete! 🎉

You’ve finished the Getting Started module. You now have:

A SvelteKit project running locally
An understanding of the project structure
Knowledge of how .svelte files work
A styled BookIt homepage

Next up: Module 2 — Basic Routing

That “Browse Services” button links to a page that doesn’t exist. In the next module, we’ll create the services page, an about page, and learn how SvelteKit’s file-based routing works.