What you'll build

You'll build a site that connects multiple pages together with a reusable navigation component.

It'll have the following features:

What you'll learn

• Creating multiple pages
• Linking to a page

What you'll need

• A browser (Chrome is recommended because it's the most fully featured and common)
• Node.js
• A GitHub account
• GitHub Desktop and Visual Studio Code

Open your code

1. Open GitHub Desktop
2. Check the Current Repository in the top left is your project
3. 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. Start the server on your laptop by entering the command npm run dev
3. Open the link that it creates to view your site

Now you're ready to get coding!

Creating new pages in Svelte is as easy as creating a new folder in your routes folder. We're going to create a second page so that you can practise reusing components, and learn how to create a reusable nav menu.

1. Create a new page by creating a new folder in your routes folder, and call it about-me
2. Create a new file inside about-me called +page.svelte
3. import and add your Header and Footer components to the page
4. Add in a main section between the Header and Footer with some information about yourself

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

<ComponentName />

Navigation menus can quickly become unwieldy when your site gets large enough - update one page name and you have to go through every nav menu and update them accordingly.

In modern websites, developers create one reusable nav menu.

1. Create a new component by creating a new file in your lib folder, and call it Nav.svelte
2. Copy and paste the code below into your new component

<nav>
  <a href="/"> Home </a>
  <a href="/about-me"> About Me </a>
</nav>

3. import and add your Nav component to both pages

Customise

Change your nav to personalise your web page.

• Add a style element to your component and write your own CSS
• Make sure you have a hover effect so that the user knows it's a link
• Try some of these:

text-align: center;

text-decoration: line-through;

text-transform: uppercase;

text-shadow: 2px 2px orange;

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

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

Along the way, you've learnt 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.