What you'll build

You'll build a page that is made up of several HTML files, called components.

It'll have the following features:

What you'll learn

What you'll need

Open the assignment

  1. Open your GitHub Classroom assignment from the link in Google Classroom
  2. Check that you're logged in with your GitHub account
  1. Check the name of your assignment is correct and then accept it. GitHub will make a copy of the template for you.
  2. Click on the link to your repository

Get ready to code

  1. Click on the green Code button and choose Open with GitHub Desktop
  2. If you're working locally (on your own device), choose a place (such as Documents) to download your code to
  1. Once it has cloned to your computer, click the Open in Visual Studio Code button (or press Command + Shift + A on MacOS or Ctrl + Shift + A on Windows)

Start your dev server

  1. Open a new Terminal by clicking New Terminal in the Terminal menu, or pressing Ctrl + `
  2. Install all the dependencies by entering the command npm install
  3. Start the server on your laptop by entering the command npm run dev
  4. Open the link that it creates to view your site

Now you're ready to get coding!

Look through each file in the src folder, which is where all the code you write will live.

You'll notice that there is no index.html, instead, there's +page.svelte that acts as the landing page. SvelteKit makes creating multi page websites very easy, but to do so you need to get used to some unusually named files. Just remember: +page is an individual web page.

In +page.svelte there are some familiar things, and some new things. The first thing that might strike you is the script section at the top. In Svelte, all the JavaScript, HTML, and CSS for a page is stored together. This makes it easier to work on individual chunks of your website.

In the script section it imports a Header from a different file, and lower down on the page it uses that header.

<script>
  import Header from '$lib/Header.svelte'
</script>

<Header />

This is an example of a component. The Header.svelte file has all the code for the header, and you can import it and use it on any page. Whenever you update Header.svelte, it will update on every page - no more copy and pasting when you want to make a small change!

In Header.svelte you can write any CSS you want inside a style section, which goes at the bottom.

<header>
  <h1 class="title">Welcome</h1>
</header>

<style>
  header {
    background: blue;
  }
</style>

Customise

Change your header to personalise your web page.

Currently, the footer HTML and CSS is all mixed in with the rest of the page. This makes it difficult if you wanted to update the footer specifically, or you wanted to re-use it on other pages.

We're going to put all of the code for the footer into its own file, called a component. Then, we can add this component to the page without seeing all of its details. This will make our page much easier to understand, update, improve, and maintain.

Create the component

  1. Open the src folder, which contains all the code that you write
  2. Create a new file in your lib folder called Footer.svelte
  3. Copy and paste the footer HTML and CSS from +page.svelte to Footer.svelte

Use the component

  1. Import your new Footer at the top of your +page.svelte file
<script>
  import Header from '$lib/Header.svelte'
  import Footer from '$lib/Footer.svelte'
</script>
  1. Add the Footer component into your HTML where you want the header to be

Customise

Spend some time to improve the look and feel of your site by tweaking your CSS.

Congratulations, the first iteration of your web page is complete.

You've taken the code provided and customised it to create your unique web page.

Along the way, you've learned about these parts of coding.

(➕ means new things in this project)

Svelte

➕ components for reusable blocks of code

From here, you can take your page further, if you like, by adding images from your summer, links to your social media, YouTube channel, blog, or whatever you like.

In your coding career you will often need to look up how to do things. In this section are a couple of websites to help you find information online about how to do what you want to do.

Most frequently, a good Google search will be the best option. Remember to include the keywords "HTML", "CSS", or "Svelte" and the thing you want to do, so that Google will give you the best results (skip past the ads though!).