Project structure in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Svelte component correctly.

Svelte

<script>
  import Header from './[1]';
</script>

Drag options to blanks, or click blank then click option'

AHeader.css

BHeader.js

CHeader.html

DHeader.svelte

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add the .svelte extension when importing.

Trying to import a CSS or JS file as a component.

In Svelte, components are files with the .svelte extension. To import a component, you must include the .svelte file extension.

2fill in blank

medium

Complete the code to define the main entry point file in a Svelte project.

Svelte

<main>
  <script src="[1]"></script>
</main>

Drag options to blanks, or click blank then click option'

Amain.js

Bapp.js

Cindex.js

Dbundle.js

Attempts:

3 left

💡 Hint

Common Mistakes

Using app.js or index.js which are common in other frameworks but not default in Svelte.

Using bundle.js which is usually a build output file.

The main entry point for a Svelte app is usually main.js, which initializes the app and mounts it to the DOM.

3fill in blank

hard

Fix the error in the Svelte project folder structure by choosing the correct folder for components.

Svelte

src/
  [1]/
    Header.svelte
    Footer.svelte
  main.js

Drag options to blanks, or click blank then click option'

Acomponents

Bassets

Cstyles

Dscripts

Attempts:

3 left

💡 Hint

Common Mistakes

Placing components inside assets or styles folders.

Not organizing components in a dedicated folder.

In Svelte projects, reusable UI parts like Header.svelte and Footer.svelte are stored in the components folder inside src.

4fill in blank

hard

Fill both blanks to create a Svelte project folder structure with a styles folder and a public folder.

Svelte

project-root/
  src/
    components/
    [1]/
  [2]/

Drag options to blanks, or click blank then click option'

Astyles

Bscripts

Cpublic

Dassets

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing assets with public folder.

Placing public folder inside src.

The styles folder inside src holds CSS or style files. The public folder at the root contains static files served directly by the server.

5fill in blank

hard

Fill all three blanks to complete the Svelte project structure with correct folder names and main file.

Svelte

project-root/
  [1]/
    [2]/
      App.svelte
    [3]/
  package.json

Drag options to blanks, or click blank then click option'

Asrc

Bcomponents

Cstyles

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Placing components or styles outside src.

Confusing public with src.

The src folder contains the source code. Inside it, components holds Svelte components like App.svelte. The styles folder stores CSS files.