Project structure in Svelte - Mini Project: Build & Apply

Svelte Project Structure Basics

📖 Scenario: You are starting a new Svelte project to build a simple user profile card. This card will show a user's name and age.

🎯 Goal: Build the basic Svelte component structure with a script section for data, a style section for simple styling, and markup to display the user information.

📋 What You'll Learn

Create a Svelte component file with a <script> section

Define a user object with name and age inside the script

Add a <style> section with basic styling for the card

Use markup to display the user's name and age inside a container

💡 Why This Matters

🌍 Real World

Building user interface components with Svelte is common in web apps to show dynamic data cleanly and efficiently.

💼 Career

Understanding Svelte component structure is essential for frontend developers working with modern frameworks to create interactive web pages.

1

Create the user data in the <script> section

Create a <script> section and inside it define a variable called user with the exact object: { name: 'Alice', age: 30 }.

Svelte

  // Define the user object here

Need a hint?

Use let user = { name: 'Alice', age: 30 }; inside the <script> tags.

2

Add a <style> section for the card

Add a <style> section below the script. Inside it, create a CSS rule for a class .card that sets padding to 1rem, border to 1px solid #ccc, and border-radius to 0.5rem.

Svelte

  let user = { name: 'Alice', age: 30 };



  /* Add .card styles here */

Need a hint?

Use CSS inside <style> tags to style the .card class.

3

Add markup to display the user info inside a div with class card

Below the <style> section, add a <div> with class card. Inside it, add a <h2> that shows the user's name using {user.name} and a <p> that shows the user's age with the text Age: {user.age}.

Svelte

  let user = { name: 'Alice', age: 30 };



  .card {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
  }

Need a hint?

Use {user.name} and {user.age} inside the markup to show the data.

4

Complete the Svelte component structure

Ensure the entire Svelte component includes the <script> section with the user object, the <style> section with the .card styles, and the markup <div class="card"> showing the user's name and age exactly as before.

Svelte

  let user = { name: 'Alice', age: 30 };



  .card {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
  }



  {user.name}
  Age: {user.age}

Need a hint?

Check that all parts of the component are present and correctly structured.