Web Programming for Non-Programmers

DCI 110

Winter 2019

Credits: 4

Requirements Met: SC, DCI Minor Core Elective

GitHub Site: https://github.com/dci110w19

Class Meeting Metadata
Meets: M
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 212
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:00 - 12:00
T 11:00 - 12:00
W 1:00 - 2:00
Or by appointment

Programming Assignment #0: Orientation to the Course Tools10 points

Due Sunday, January 13 @ 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 and your W&L login 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 Server extension in Visual Studio code by pressing Ctrl/Cmd + P, typing ext install ritwickdey.liveserver, pressing Enter/Return, and clicking "Reload" when it appears.

Part 2: Connect to the Assignment and Edit Files

  1. Visit this URL: https://classroom.github.com/a/5X91Y1oy
  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. Select and copy the URL in the box that looks like "https://github.com/dci110w19/orientation-YOURGITHUBUSERNAME.git". URL for cloning the repository
  6. In VSCode, go to the View menu and choose Command Palette...
  7. In the small popup box, type Git: Clone and press Enter/Return
  8. Paste the copied URL into the box that pops up labeled "Repository URL"
  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 if prompted, then click OK
  11. Choose "Open Repository" from the box that pops up at the top of the window

Part 3: Adding and Editing a File

  1. Once you have cloned the repository, create a new file in VSCode called "index.html".
  2. Right-click (or CTRL+click or two-finger click on a Mac) in the space below ORIENTATION-<YOURUSERNAME> on the left side of the screen and choose "New File". Alternatively, click the new file button. New file button
  3. Enter the name: index.html.
  4. In the editor on the right side of the screen type the text: It works!
  5. Save the file using the menu File → Save or Ctrl/Cmd + S on the keyboard.
  6. While you are working on HTML, CSS, and JavaScript, you can preview it locally on your computer before uploading to GitHub. Right-click your index.html file and choose "Open with Live Server". Open page in live server view This opens a tab in your browser with a live view of your page. Alternatively, once we create more detailed HTML pages, a button will appear at the bottom of VS Code labelled "Go Live", which also opens a live viewer. Go live button in VS Code

Part 4: 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 one change: Git showing one change 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). Git option showing file 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"
  5. Click the checkmark above the message to submit the commit and its message. This clears the filenames from the box.
  6. The first time you commit a new repository, you'll see a cloud icon. Git cloud icon for first commit Click this to upload your commit to GitHub.
  7. You may see a message at the top asking if a periodic fetch should be performed. Answer No.
  8. For every commit to this repository in the future, rather than the cloud icon you'll see this indicating that you have one commit waiting for upload: Git has one commit waiting Clicking it has the same effect — it uploads the changes to GitHub.
  9. When the sync completes, return to the repository on the GitHub webpage in your browser.

Part 5: Activating the Live Webpage

  1. Back on the GitHub website (https://github.com/dci110w19) in your repository, you should now see your orientation repository with an "index.html" file. Refresh the page, if you don't.
  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://dci110w19.github.io/REPOSITORY_NAME/ where REPOSITORY_NAME is the name of the repository on the GitHub website (i.e. orientation-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.

Part 6: Creating Branches for New Assignments and Collaborative Work


A branch is Git terminology for noting a point of significant changes in your code. For programmers, a new branch would be created for working on a major upgrade, or branches might be used when several programmers are working together so that they can work independently without impacting others' work. For our course, you will be making several changes throughout the term on your initial programming assignment. Branches will indicate what work has been done from assignment to assignment.

  1. In VS Code, your current branch is indicated at the lower left of the screen. You should see "master". Master branch set The master branch is where your definitive code lives and where your webpages will be served from.
  2. Click the word "master". This will bring up a box at the top of the screen. Select or create a branch Choose "+ Create new branch". Type in pa0 and press the Enter/Return key.
  3. You should see the same index.html file you were working on earlier. Edit the file so it reads: It works in a new branch! Save the file again.
  4. Repeat the process from Part 4 above to commit and sync your changes.

Part 7: Merge Your New Changes to the Master Branch


A pull request is Git terminology for triggering a code review so that changes in a branch can be merged with your master branch. Essentially it is a safety mechanism to prevent you from overwriting your definitive code before it's ready. For professional programmers, it is a means for a project manager to ensure the code is up-to-standard and does not conflict with any other work being done.

  1. Back on the GitHub website (https://github.com/dci110w19) in your repository, you should now see an alert that there is a branch with changes not in sync with the master branch. Pull request alert Refresh the page, if you don't. Click the green button labeled Compare & pull request.
  2. If you do not see this alert, click the button New pull request and select "pa0" from the "compare:" dropdown. Manual pull request selecting the comparison branch
  3. You have the opportunity to add additional comments here, if you choose. Normally this would be used during a code review as part of a team. When ready, click the green "Create pull request" button. Create pull request with comments
  4. GitHub will check for potential conflicts between your new branch and the master branch. If none are found, you will be prompted to merge the branches. Ready to merge branches Click the green "Merge pull request" button.
  5. You will receive one final chance to add comments or back out of the merge. Click the green "Confirm merge" button to complete the process. Confirm the branch merge
  6. GitHub will inform you that the pa0 branch can be deleted. Please DO NOT delete branches. I will be using them to track your progress and to make comments during grading.
  7. Now when you browse your live site (Part 5, step 4), you should see the change you made as part of the pa0 branch since it has been merged with the master branch.

Keep this assignment handy. You'll likely need to refer back to it throughout the course as you generate new assignments and begin working in your teams.

Grading Specifications

Credit will be given for completing all of the steps with a live webpage, a pa0 branch, and a pull request that merges pa0 with master.