Innovation Website Tutorial

Hello and welcome!

In this activity, you'll remix a website about an innovator or invention of your choice. Change the video, add in an image, teach some fun facts, and style the site however you want.

  1. Change the title of the site

    The <title> on line 6 tells us the name of the website. If someone bookmarks/saves our site in their browser, it'll be saved with this name.

  2. Change the heading

    The title that we see on the page is called a heading. Any text that goes in between the <h1> tags on line 10 will become the heading.

  3. Add some information

    Update the paragraph on line 15. Add more paragraphs if you'd like!

  4. Embed a video

    First, we need to find a video. Head to YouTube search for videos that relate to your province, territory, town, or area.

    Once you've found the video you want to embed in your site. Click the share button (it looks like a little arrow with share beside it) and choose embed. Copy the embed code.

    Delete the other iframe code on line 11 to get rid of the example video. Paste the code you just copied into line 11.

  5. Add an image

    Find an image relating to your topic by searching Google Images. Try to find a creative commons image by selecting Tools > Usage rights > Labeled for reuse.

    After saving the image to your computer, upload it into the assets folder of your project. Click on the imaage, then copy the image URL.

    Go back to your index.html file and create a new image tag using <img src="pastelinkhere.png"/>.

  6. Change the styles

    The CSS file is where the styles for the website are kept. Open style.css and try changing the font or background colour. Find some sample styles at CSS.cool

    What other styles would you like to change? How about adding borders? If you're unsure of how to change the look of the site work with another student to research the style you might want to change.

  7. Cite your sources

    Don't forget to add links to any articles or images used under Works Cited.

  8. Share your website

    When you're ready to share your tourism site, rename the project name (top left) and click 'Show' (top left).

    Once you've published your page, copy the URL and send it to your teacher or ask your teacher to write it down for you.

Great job! See what else you can edit/change to your page by researching other cool webpages. How about a link?