What you'll build

You'll build a site from several reusable components that utilise props for customisation.

It'll have the following features:

What you'll learn

• Sending props to components in the form of custom attributes
• Using props inside a component
• Adding default values for props

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!

Props are bits of extra information that you can send to a component. They can be anything, and we'll be using them firstly to send some text to display inside the component.

The first step is to make the Header component truly reusable, by making it take props for the title and subtitle, instead of them being hard-coded in.

1. Add a script element at the top of your Header.svelte file
2. Create two new variables: title and subtitle
3. Add the export keyword to the start of each variable declaration
4. Replace your title in the HTML with {title} and your subtitle with {subtitle}

<script>
  export let title
  export let subtitle
</script>

<header class="hero">
  <div class="hero-body">
    <h1 class="title"> {title} </h1>
    <h2 class="subtitle"> {subtitle} </h2>
  </div>
</header>

Check your site in your page. Your header might look a bit strange. Undefined means that the variable has no value.

Let's give the variable a default value, so that it will display a bit more normally if it doesn't receive a prop.

5. Give your variables default values

<script>
  export let title = 'Main heading'
  export let subtitle = 'Secondary heading'
</script>

<header class="hero">
  <div class="hero-body">
    <h1 class="title"> {title} </h1>
    <h2 class="subtitle"> {subtitle} </h2>
  </div>
</header>

In the browser, you should now see your default values in the header. This is a good safety net, but not great for the user.

The last step is to update everywhere you use the Header component with attributes for each prop. Start with your home page.

6. Add an attribute for the title and subtitle props into your Header

<Header title="Summer Gallery" subtitle="Images from summer" />

Customise

Update the Header on every page so that it sends the correct props for that particular page.

Your Footer is a fairly simple component, and may only take a couple of bits of information.

Update it with some props for author, date, and organisation. Use the same process as you did for the Header.

An component that's an image with a caption underneath will be very useful on a gallery website.

1. Create a new Image.svelte component in your lib folder
2. Add the code below to create your component with the basis of an image and caption

<script>
        export let src = ''
        export let alt = ''
        export let caption = ''
</script>

<figure>
        <img src="{src}" alt="{alt}">
        <figcaption> {caption} </figcaption>
</figure>

3. Use the Image component with the appropriate props on your front page to display the images from your summer
4. Look up Bulma's images documentation to add classes to your Image.svelte code

Congratulations, the fourth 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

➕ props for making customisable components

Bulma

• classes for using Bulma's pre-written CSS

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" and the thing you want to do, so that Google will give you the best results (skip past the ads though!).