Web Programming for Non-Programmers

DH 110

Fall 2017

Credits: 4

Requirements Met: SC

Class Meeting Metadata
Meets: MW
R (lab)
2:30 - 3:55pm
8:35 - 10:00am
Classroom: CGL 211 (MW) & CGL 114 (R)
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:15 - 12:15
W & R 1:00 - 2:00
Or by appointment

Lab 00: Getting Acquainted with GitHub and VSCodeNo points

Due Sunday, September 10 @ 11:55pm

Part 1: Initial Download and Setup

  1. Sign up for a GitHub account. If you don't already have one, please use your W&L email address as the username so that it makes it easier for me to find you.
  2. Download and install Git for your operating system (Windows or Mac)
  3. Download and install Visual Studio Code for your operating system (Windows or Mac)
  4. Install the Live HTML Previewer extension and click "Reload"

Part 2: Connect to the Assignment and Edit Files

  1. Visit the URL for Lab 00: https://classroom.github.com/a/XFsBvvuq
  2. Authorize GitHub Classroom to access your account
  3. Accept the invitation for the assignment
  4. Click on the link following "Your assignment has been created here:"
  5. Click the green "Clone or download" button
  6. Select and copy the URL in the box that pops up that looks like "https://github.com/dh110f17/lab-00-YourGitHubUsername"
  7. In VSCode, click "Clone Git repository..."
  8. Paste the copied URL into the box that pops up
  9. Choose the directory on your computer where you want to save it (you may accept the default, but remember where this is)
  10. Enter your GitHub username and password, then click OK
  11. Choose "Open Repository" from the box that pops up at the top of the window
  12. Look at the README.md file in VSCode and perform the actions inside

Part 3: Commit and Sync Back to GitHub


A commit is Git terminology for when you are ready to send changes back to GitHub. You can commit as frequently as you wish. The downside: performing a commit takes a few steps and a little time, so it can interrupt your workflow. The upside: each commit is saved in GitHub history and acts as a backup. If you ever have a problem, you can always rewind back to a previous commit.

  1. If all goes well, you should see the Git icon to the left indicating two changes: Git showing two changes If so, click it. If not, see me.
  2. After clicking the icon, you should see the following indicating that you have a new file (index.html) and a deleted file (README.md). Git option showing files to be synced
  3. Next to "CHANGES", click the + (plus) button to add all files to this commit.
  4. Every time you are ready to commit files to GitHub, you must supply a message that indicates what changed since the last commit. This message should be brief yet descriptive so that YOU know what you did. In this case, an appropriate commit message might be: "Added index file and deleted readme"
  5. Click the checkmark above the message to submit the commit and its message. This clears the filenames from the box.
  6. At the lower left of the VSCode window, you'll see that you have one commit waiting for upload: Git has one commit waiting
  7. Click on this button.
  8. You will then be asked to sync the files: Dialog box for sync permission Choose "OK, Never Show Again".
  9. When the sync completes, return to the repository on the GitHub webpage in your browser.

Part 4: Activating the Live Webpage

  1. Back on the GitHub website, refresh the page, and you should now see your lab-00 repository with an "index.html" file and no "README.md" file.
  2. Near the top of the screen click on the "Settings" menu button: Settings menu button
  3. Under "GitHub Pages" on the Settings tab, change Source from "None" to "master branch" then click "Save": Activating GitHub pages
  4. Browse site at https://dh110f17.github.io/REPOSITORY_NAME/ where REPOSITORY_NAME is the name of the repository on the GitHub website (i.e. lab-00-jtmstudenttest). The link is also clickable as shown in the image above.
  5. Note: it may take up to a minute for the page to become active. If the link doesn't work immediately, refresh the page a few times.

When you've finished we both should be able see your index.html file on the GitHub website and live on the web as a page.