WDD 130: Web Fundamentals

W01 Setup: Create Your GitHub Repository

Overview

The purpose of this setup activity is to create a free GitHub account and set up the repository you will use throughout the course to store the web pages you will create.

GitHub is a popular and free online collaboration and version control service. You can think of GitHub repositories as a cloud-based storage system for your projects. GitHub can also be used as a web hosting service with a special web service named GitHub Pages.

Instructions

Please Note this Warning
If you already have a GitHub account, you do not need to create a new account with GitHub for this course.
Skip to Step 2: Create Your Course Repository

Sign Up for a free GitHub Account

  1. In your browser, visit the github.com site.
  2. Select the Sign Up button.
  3. Enter an email address and select Continue.
  4. Create a password and select Continue.
  5. Enter a username using only lowercase letters. Your username will be visible to others, so make sure to choose something professional. If you get a red '❌' to the left of your username, then someone else has already used that username and you need to choose a different one.

    Choose a professional name because you will use your GitHub account page in the future as a portfolio of your work.

  6. Record your username and password in a secure location.
  7. Complete the remaining steps of the sign up process which may ask if you want GitHub to send you emails and may have you verify that you are not a robot.
  8. You can skip any personalization questions by selecting the Skip Personalization link near the bottom.
Demonstration of Creating a GitHub account

Link: ▶️ Setting up a GitHub Account – [ 2:09 minutes ]

Create Your Course Repository

GitHub organizes work into a different repository (often abbreviated "repo") for each major project that you work on. In this step, you will create the repository that you will use for the entire course. Rather than creating a blank repository, you will start with a template that contains many files you will need for this course.

  1. In your browser, visit the github.com site.
  2. Make sure you are signed in.
  3. Navigate to the starting template repository for this course.
  4. Select the green button "Use this template" and select the option to "Create a new repository."
    Image showing the select this template button
    An example of the button to click to use the template.

    If you do not see the "Use this template" button, it is likely because you are not signed in.

  5. Do not check the box to include all branches.
  6. Ensure that your username shows up as the owner, and type wdd130 as the repository name.
    Image showing the create repository form
    An example of the form to create a new repository.

    Important: You must use wdd130 as your repository name for this course. If you do not, you will not be able to submit your assignments.

    The help and grading tools of the course expect the repository to have this name and they will not work if you choose a different name.

  7. Mark your repository as public.
  8. Select the button to Create Repository.

Enable GitHub Pages

Now that you have a repository with the starting template files in it, you can set it up to host webpages by enabling GitHub pages.

  1. Navigate to your course repository at GitHub.
    • The location, or URL, of your repository is: https://github.com/your-username/wdd130 , but make sure to replace your-username with your actual username.
  2. Select the Settings tab for the repository.
  3. On the left hand menu, select Pages.
  4. Configure the pages to build from the root of the main branch by doing the following:
    • Leave the Source as: Deploy from a branch
    • In the Branch section, select main.
    • After selecting main, leave the location as "/ (root)", which is the default.
    • Click the Save button.
    GitHub publish from branch options
    Screenshot showing the GitHub options for GitHub pages.
  5. After clicking save, GitHub will begin building your website. It may take a few minutes for it to complete. When it has completed, you will be able to visit your new website in a browser at the location, or URL: https://your-username.github.io/wdd130/ , but make sure to replace your-username with your actual username.
  6. Verify that your page loads in a browser. It should look something like the following:
    An example of what the page should look like.
    An example of what your page should look like in a browser.

Please note that you now have two important URLs, which look similar, but are very different:

You will use both of these URLs throughout the course.

Ask for Help or Help others.

It is very important to make sure that the steps above are working correctly. If you have any problems, make sure to ask for help from your teacher or fellow classmates. If your page is working correctly, you can help others.