Learn Web Design!

Part 1: Setup

Setting Up with GitHub

You can host your site for free through GitHub Pages.


  1. Create a new repo
  2. You must name the repo "username.github.io" where username is your username
  3. Select 'Clone in Desktop'
  4. In GitHub Desktop, save the repo somewhere on your computer you will remember
  5. This is your website's root directory!

The File Setup

To organize your website, make three folders: css, img, and js.

  • 'css' will hold your stylesheets (CSS)
  • 'img' will hold your media (pictures, gifs)
  • 'js' will hold your JavaScript

Now, using your text editor, create a new file in the folder containing these three folders. Name the file "index.html". Inside the file, copy paste this code: 
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World</h1>
    <p>I'm hosted with GitHub Pages.</p>
  </body>
</html>
Your website folder should now look like this:

Upon opening your new index.html file with a web browser, you should get the following result:


Now sync your repo using Github Desktop. A few moments later, your site should be live at yourusername.github.io!