Building Websites: Content from Sparkbox on YouTube.


Topic & Goal (2:30)

  1. Pick a topic you want to build a website about.
  2. Set a goal, what you hope your visitors will learn from your site.

Everyone should have their own topic and goal but you are also encouraged to find a buddy to bounce ideas off of.

Create CodePen Account (4:35)

  1. Setup a free account.
  2. Create your first pen:
    1. Find a code view that you like best.
    2. Close all of the panes except the HTML pane.
    3. Give your pen a title.
    4. Save your work.

Gather Content

  1. Search the Internet to find information about your topic:
    1. Don’t plagiarize.
    2. Link back to sources.
    3. For now, copy links to images you are interested in using.
  2. Type your content in the HTML pane of your CodePen:
    1. Think about how you want to organize your content into sections.
    2. Give your sections headings.
    3. Include link and image urls in your content.
    4. Save your pen often so you don’t lose work.

How to find images

Finding images to use on your website can sometimes be tricky. You don’t want to steal someone else’s image so here are a few resources to find free images to use:

Pro Tip: Each image has a license where the owner of the photo gets to decide how the image can be used. Pexels and Unsplash offer images that are completely free to use but some images in Wikimedia Commons might require that you give the owner of the image credit so it’s best to check each image license.


Finish gathering content and have it ready before the next workshop.

Bonus: Fill out your CodePen profile and explore the homepage to see some of the things others have built. If you are under 13 ask your parents for help!

← Back to Home