Component file (.svelte) anatomy - Mini Project: Build & Apply

Component file (.svelte) anatomy

📖 Scenario: You are building a simple Svelte component to display a greeting message on a webpage. This will help you understand the basic structure of a Svelte component file.

🎯 Goal: Create a Svelte component file with the correct sections: a script block for JavaScript, a style block for CSS, and markup for HTML content. The component will show a greeting message styled with a color.

📋 What You'll Learn

Create a <script> block with a variable greeting set to 'Hello, Svelte!'

Add a <style> block that sets the text color of a class .greeting to blue

Write HTML markup that uses a <h1> element with class greeting to display the greeting variable

Ensure the component file has all three sections properly placed

💡 Why This Matters

🌍 Real World

Svelte components are the building blocks of modern web apps. Understanding their structure helps you create interactive and styled UI parts.

💼 Career

Knowing how to organize Svelte files is essential for frontend developer roles using Svelte. It improves code readability and maintainability.

1

Create the script block with greeting variable

Create a <script> block and inside it declare a variable called greeting with the exact value 'Hello, Svelte!'.

Svelte

  // Declare greeting variable here

Need a hint?

Use let greeting = 'Hello, Svelte!'; inside the <script> tags.

2

Add a style block for greeting color

Add a <style> block below the script block. Inside it, create a CSS rule for the class .greeting that sets color to blue.

Svelte

  let greeting = 'Hello, Svelte!';



  /* Add .greeting color style here */

Need a hint?

Write CSS inside <style> tags. Use .greeting { color: blue; }.

3

Add HTML markup to display greeting

Below the style block, add an <h1> element with class greeting. Inside it, use curly braces to insert the greeting variable so it displays the text.

Svelte

  let greeting = 'Hello, Svelte!';



  .greeting {
    color: blue;
  }


 with class greeting and insert greeting variable -->

Need a hint?

Use <h1 class="greeting">{greeting}</h1> to show the message.

4

Complete the Svelte component structure

Ensure the component file has the <script> block first, then the <style> block, and finally the HTML markup with the <h1> element displaying the greeting. The order and structure must be correct.

Svelte

  let greeting = 'Hello, Svelte!';



  .greeting {
    color: blue;
  }


{greeting}

Need a hint?

The script block must come first, then style, then markup. Check your file order.