Hello World

The simplest program. All coders start here.

Skills: OutputVariables

This project introduces how Svelte can help improve how your HTML and JavaScript interact.

When you write Svelte, you write your code into a .svelte file, which contains JavaScript, CSS, and HTML all in one place.

Svelt's main advantage that we'll be taking advantage of is that it makes it very easy to get information to and from the page.

Compare the jQuery version of Hello World with the Svelte version and see how much less code it takes and how natural it feels to follow it.

HTML & JavaScript (jQuery)

<h3>Hello <span id="txtName"></span>!</h3>
$('#txtName').text('world')

Svelte

<script>
  let name = 'world'
</script>

<h3>Hello {name}!</h3>

Project

  1. Look over the code below, think about how it runs, and compare the output with the source code.
  2. Create a new Svelte project from the template.
  3. Add your Hello World! code.
  4. In the terminal in VS Code, type npm run dev.
  5. Check that your code works by going to https://localhost:3000.
  6. Commit your code with an appropriate message.

Sandbox

Feel free to play around with the example below to see how the web app reacts to your changes in a consequence-free environment.

Sandbox

Feel free to play around with the example below to see how the web page reacts to your code changes in a consequence-free environment. You won't break or overwrite anything so go for gold.