Project structure in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Svelte handle component files in a project?

In a typical Svelte project, what is the role of .svelte files?

A They are style files used only for global CSS rules.

B They are configuration files that define project settings and dependencies.

C They are plain JavaScript files that only export functions without UI elements.

D They contain HTML, CSS, and JavaScript combined to define a reusable UI component.

💡 Hint

Think about how Svelte components combine structure, style, and behavior.

Svelte uses .svelte files to bundle HTML markup, CSS styles scoped to the component, and JavaScript logic together. This makes each file a self-contained UI piece.

📝 Syntax

intermediate

Where should you place global styles in a Svelte project?

In a Svelte project, which file is the best place to put styles that apply to the entire app?

A In the <code>src/app.css</code> or a similar global CSS file imported in the root layout.

B Inside each <code>.svelte</code> component's <code>&lt;style&gt;</code> tag with <code>scoped</code> attribute.

C Directly inside the <code>package.json</code> file under a styles section.

D In a JavaScript file that exports CSS strings.

💡 Hint

Global styles affect the whole app and are usually imported once at the top level.

Global CSS is typically placed in a dedicated CSS file like app.css inside src and imported in the root layout or main entry file to apply styles app-wide.

🔧 Debug

advanced

Why does importing a component from the wrong folder cause an error?

Given this import statement in a Svelte file:

import Button from '../components/Button.svelte';

What is the most likely cause if this import fails with a module not found error?

A The relative path is incorrect because the file is not located in the specified folder.

B Svelte does not support importing components with relative paths.

C The <code>.svelte</code> extension must be omitted in imports.

D The component file must be named <code>index.svelte</code> to be imported.

💡 Hint

Check the folder structure and relative path carefully.

Import errors usually happen when the path does not match the actual location of the file. Svelte supports relative imports with extensions, so the path must be correct.

🧠 Conceptual

advanced

What is the purpose of the src folder in a Svelte project?

Why do most Svelte projects have a src folder, and what should it contain?

A It stores configuration files for the build tools and package managers.

B It holds all source code files like components, styles, and scripts that make up the app.

C It is used to keep static assets like images and fonts only.

D It contains compiled JavaScript files generated after building the project.

💡 Hint

Think about where you write your app's code before building.

The src folder is the main place to write and organize your app's source code including components, styles, and scripts before the build process.

❓ state_output

expert

What will be the rendered output and state behavior of this Svelte component structure?

Consider a Svelte project with this structure:

src/
  components/
    Counter.svelte
  routes/
    +page.svelte

The Counter.svelte component has a button that increments a count state. The +page.svelte imports and uses Counter. What happens when the button is clicked?

Svelte

<!-- Counter.svelte -->
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Clicked {count} times</button>

<!-- +page.svelte -->
<script>
  import Counter from '../components/Counter.svelte';
</script>
<main>
  <h1>Welcome</h1>
  <Counter />
</main>

A The button does not update the count because state cannot be changed inside components.

B Clicking the button reloads the page instead of updating the count.

C The button shows 'Clicked 0 times' initially and increments the count each click, updating the button text.

D The component throws an error because the import path is invalid.

💡 Hint

Remember how Svelte components manage their own state and update the UI reactively.

The Counter component has a local count variable that increments on button clicks. Svelte updates the button text automatically to show the new count.