Script, markup, and style sections in Svelte - Mini Project: Build & Apply

Script, markup, and style sections in Svelte

📖 Scenario: You are creating a simple Svelte component to display a greeting message with some styled text.

🎯 Goal: Build a Svelte component that uses the <script> section to define a variable, the markup section to display it, and the <style> section to add color and font size.

📋 What You'll Learn

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

Use the markup section to display the greeting variable inside an <h1> tag

Add a <style> section that colors the <h1> text blue and sets the font size to 2rem

Ensure the component structure follows Svelte conventions with exactly one <script>, one markup root, and one <style> section

💡 Why This Matters

🌍 Real World

Svelte components are used to build interactive web pages with clean separation of logic, markup, and styles.

💼 Career

Understanding Svelte's component structure is essential for frontend developers working with modern web frameworks.

1

Create the <script> section with a greeting variable

Write a <script> section and inside it create a variable called greeting with the exact value 'Hello, Svelte!'.

Svelte

  // Your code here

Need a hint?

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

2

Add markup to display the greeting inside an <h1> tag

Below the <script> section, add an <h1> tag that displays the greeting variable using curly braces {greeting}.

Svelte

  let greeting = 'Hello, Svelte!';


 tag here to show the greeting -->

Need a hint?

Use <h1>{greeting}</h1> to show the variable in markup.

3

Add a <style> section to style the <h1> text

Add a <style> section below the markup. Inside it, write CSS to make the h1 text color blue and font size 2rem.

Svelte

  let greeting = 'Hello, Svelte!';


{greeting}


  /* Your CSS here */

Need a hint?

Write CSS inside <style> to style h1 with color: blue; and font-size: 2rem;.

4

Ensure the component has correct Svelte structure

Check that your component has exactly one <script> section with let greeting = 'Hello, Svelte!';, one <h1> tag showing {greeting}, and one <style> section styling h1 with blue color and 2rem font size.

Svelte

  let greeting = 'Hello, Svelte!';


{greeting}


  h1 {
    color: blue;
    font-size: 2rem;
  }

Need a hint?

Make sure all three sections are present and correct.