First Svelte component - Mini Project: Build & Apply

First Svelte component

📖 Scenario: You want to create a simple webpage that shows a friendly greeting message using Svelte.

🎯 Goal: Build a Svelte component that displays the text "Hello, Svelte!" on the page.

📋 What You'll Learn

Create a Svelte component file

Add a variable to hold the greeting message

Display the greeting message inside the component

Use semantic HTML for accessibility

💡 Why This Matters

🌍 Real World

Creating simple interactive UI components that show dynamic data is a common task in web development.

💼 Career

Knowing how to build basic Svelte components is useful for frontend developer roles that use modern frameworks.

1

Create a greeting variable

Create a variable called greeting and set it to the string "Hello, Svelte!" inside a Svelte component.

Svelte

  
    // Create a variable called greeting and set it to "Hello, Svelte!"
  

Need a hint?

Use let greeting = "Hello, Svelte!"; inside the <script> tag.

2

Add a semantic container

Add a <main> element below the <script> tag to hold the greeting message.

Svelte

  let greeting = "Hello, Svelte!";


 element below to hold the greeting -->

Need a hint?

Use the <main> tag to wrap your content for better accessibility.

3

Display the greeting message

Inside the <main> element, add the variable {greeting} to display the greeting text.

Svelte

  let greeting = "Hello, Svelte!";



  

Need a hint?

Use curly braces {} to insert the variable inside the HTML.

4

Add an accessible heading

Inside the <main> element, wrap the greeting variable with an <h1> tag for a clear heading.

Svelte

  let greeting = "Hello, Svelte!";



   tag -->

Need a hint?

Use <h1> to make the greeting a main heading for screen readers and SEO.