Setup

The sections on this page will lead you through the process of setting up the applications and accounts needed to complete IMS322 coursework. It is recommended that you follow the steps below in the order listed:

Install Git.
Create a GitHub account (if needed).
Log in to CodePen, enable Format on Save and Autocomplete in account settings, and create your first Pen.
Install additional browsers as needed.
Install VS Code and configure extensions and settings.
Review coding assignment procedures.

Git

Git is a "version control system" that helps track and manage changes in files. While Git itself is very powerful, we will only be using it through the Source Control panel in VS Code.

Mac

Mac users should use the Homebrew installation option:

Install Homebrew.
Run brew install git in Terminal. If you are prompted to install the Xcode "command line developer tools", click Install. This will take a while, so make sure you are on a fast Wi-Fi network.

Windows

Windows users should use the 64-bit Git for Windows Setup under Standalone Installer.

Linux

If you're using Linux, you probably don't need help installing Git! Follow the instructions here.

GitHub

GitHub is a platform for creating, storing, and managing code. It relies on Git to commit and sync changes between files stored locally on your computer (the ones that you'll be editing in VS Code) and online repositories. In this class, we will be using GitHub to manage all major assignments and projects.

Create a GitHub account (if you don't already have one).
In the upper-right corner of any page on GitHub, click your profile photo, then click Settings.
In the Access section of the sidebar, click Password and authentication.
In the Two-factor authentication section of the page, click Enable two-factor authentication.
STOP! DO NOT SCAN THE QR CODE USING YOUR REGULAR CAMERA APP!
Open Duo Mobile and click Add +, then choose Use QR Code to scan the QR code. You may use a different 2FA app if you have a preferred alternative.
Complete the rest of the Two-Factor Authentication setup as directed.
Register for GitHub Student Benefits (this will give you access to the GitHub Copilot AI assistant within VS Code). FYI - there is a document in myMiami called "Enrollment Verification" that seems to work for this.
Once your student benefits have been approved, log in to GitHub and click on your profile icon. Choose Your Copilot from the menu to claim Copilot access.

CodePen

CodePen is a popular online code editor focused on creating and sharing snippets of HTML, CSS, and JavaScript. The embedded code examples throughout the IMS322 Docs site have been created using CodePen. One of the main reasons that we use CodePen for this class is because it allows you to edit embedded examples right on the page and see live results - try it out below! We will also regularly use CodePen instead of VS Code for smaller assignments, like weekly practice and in-class exercises.

There are a few important things to note about CodePen and how it differs from the VS Code and GitHub workflow:

You should log in to CodePen using your GitHub username and password. There is no actual connection between CodePen and GitHub; it simply uses the same account credentials.
A project on CodePen is called a "Pen." By default, a Pen includes HTML, CSS, and JavaScript editors, as well as a live preview.
Make sure that the Format On Save and Autocomplete options are checked in your account settings (found in the Editor Preferences section).
The simplified HTML editor should not have a <head> element or <body> tags. You should start your HTML content from the first tag that would normally go after the opening <body> tag, like a <header> or <h1> element.
There is no file hosting provided with free CodePen accounts. When you want to include images in CodePen assignments, you will need to use a URL instead of a file name for the src attribute of the <img> element. Generally, the content of images in CodePen-based assignments is not important, so a random image hosting service like Lorem Picsum will suffice.

See the Pen Embed Example (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.

Browsers

Although there are many different modern web browsers, there are essentially only three different browser engines currently in use. A browser engine is the software component under the hood that handles document layout, rendering, and security.

WebKit is maintained by Apple and used for the desktop and mobile versions of Safari, which is the default browser on Apple devices.
Blink is maintained by Google and powers all Chromium-based browsers, which include Google Chrome, Microsoft Edge, Brave, Opera GX, and others.
Gecko is maintained by Mozilla and used for Firefox.

You should have both Firefox and at least one Chromium-based browser installed on your laptop for this class. It is also recommended that you set one of these as the Live Server Custom Browser during VS Code configuration (instructions provided below).

VS Code

Visual Studio Code (aka VS Code) is the code editor that we will be using for all major assignments in this class. After installing the VS Code application, follow the instructions below to configure extensions and settings.

Extensions

We will be using a small collection of VS Code extensions to assist with formatting and development. Search for the following extensions in the Extensions panel to install them:

GitHub Copilot and Copilot Chat AI code assistant (published by GitHub, requires GitHub Student Benefits activation)
JS-Beautify for VS Code for HTML formatting (published by VSCE Toolroom)
Prettier for CSS and JavaScript formatting (published by Prettier)
Live Server for quick and easy browser previews (published by Ritwick Dey)
Live Share for collaborative coding (published by Microsoft)

Make sure that Git has finished installing before completing these steps.

In VS Code, click on the Terminal menu and choose New Terminal.
In the Terminal panel, run the two commands provided below, one at a time, inserting your own GitHub username and email where indicated (you will not see a confirmation message).
Click the Accounts icon in the lower-left corner and sign in using your GitHub account.

git config --global user.name "your_username"

git config --global user.email your@email.com

Editor Settings

Click on the gear icon in the lower-left and choose Settings. Search for Live Server Custom Browser and choose your preferred browser from the dropdown menu (Firefox or Chromium-based). This is the browser that will open automatically whenever you run the Live Server extension.
Right-click the Activity Bar on the left side of the window. Uncheck Run and Debug. Ensure that only Explorer, Search, Source Control, Extensions, Live Share, and Accounts are checked.
There are a few other settings that will be automatically managed for you by a hidden file in project templates in the future. This primarily enables autoformatting for the plugins that you previously installed.

Assignment Procedures

Throughout the semester, coursework will be assigned using both CodePen and VS Code with GitHub. Some specific instructions and details in the Canvas assignment descriptions may differ on a case-by-case basis, but the general workflow for both platforms is outlined below.

Accepting CodePen Assignments

If the Canvas assignment instructions point to an embedded example Pen, click Edit On CodePen, then create a copy of it in your account by clicking the Fork button in the lower-right corner of the editor window. Otherwise, create a new empty Pen.
Change the Pen name to the name provided in the Canvas assignment and click Save. If you need to find this Pen again later, it will be in Your Work.

Submitting CodePen Assignments

Click the Save button in the upper-right corner of the CodePen window.
Click Share in the bottom-right corner and select Copy Link.
Paste the copied link in the Website URL field of the corresponding Canvas assignment and click Submit Assignment.

Accepting and Cloning VS Code Assignments

The first time you accept a VS Code assignment through GitHub Classroom, you will be asked to link your GitHub account to your name.

Click the link in the corresponding Canvas assignment to accept the assignment on GitHub Classroom. Once your new repository is generated, it should be visible in your Top Repositories on GitHub. You can also find it in the the IMS322-Sheffield-S25 organization repositories by clicking your profile photo, then clicking Your organizations.
Open VS Code. If an existing folder is already open, close it by going to the File menu and choosing Close Folder.
Open the Source Control panel and click the Clone Repository button. Copy-paste the URL from your repository into the text field. You will be prompted for a location on your computer to save this folder.
To open this folder in the future, go to the File menu and choose Open Folder...

Working With VS Code Assignments

Folders are very important when working in VS Code. You should always check the top of the Explorer panel to make sure that you are working within the desired assignment folder. The primary open folder acts as the "root" of your workspace where you will find your HTML, CSS, and JavaScript files, as well as any subfolders (e.g., for images).
To preview your code in the browser, click the Go Live button in the bottom-right corner of the window (which is part of the Status Bar). This will use the Live Server extension to launch your project in your preferred browser. If you accidentally lose your browser preview window, you can reopen the browser and navigate to http://127.0.0.1:5500/ (replacing the last 4 digits with whatever port number appears in the Status Bar while the extension is running). Alternatively, you can click on the port number in the Status Bar to close the extension and relaunch it by clicking Go Live again.

Some assignments in VS Code will have 2 stages: a draft followed by a final submission. We will manage these stages by using different "branches" on GitHub. This approach allows you to submit the assignment multiple times without needing to create multiple repositories.
- By default, each GitHub repository is created with a "main" branch. This includes all assignment instructions and template files and will be the only branch where you write code.
- When you are ready to submit a draft, you will create a "draft" branch on GitHub. To do this, locate your repository on GitHub and click on the branch dropdown. Then, enter the word "draft" and click "Create branch draft from main".

Autograding

Assignments managed through GitHub will be run through an autograding process when they are committed and synced with "autograde" or "finished" as the commit message.

The criteria checked during this process can be found on the Style Guide page.

To review autograding results:

Navigate to your assignment repository on GitHub.
Click on the Actions tab at the top of the repository page, then select IMS322 Autograder in the left column.
Select the most recent completed workflow at the top of the list. It will have either a blue checkmark or a red X, along with the name of the commit message you used.
Click on the workflow under Jobs to view the details.
On the details page, you can see the status of each grading step and the points awarded out of 12. You may need to expand the "Autograding" section and scroll to the bottom. Look for --- AUTOGRADING RESULTS ---.

If you would like to fix errors identified by the autograding logs, you may commit and sync changes as many times as needed before the assignment due date.

Committing and Submitting VS Code Assignments

It is recommended that you Stage and Commit after each major change (steps 1-3) and Sync often (step 4), even before you are finished.

Open the Source Control panel in VS Code.
Stage all changes by clicking the + next to Changes.
Enter a commit message and click the Commit button (use "autograde" if you want to run the autograding process and "finished" for your final commit).
The Commit button should change to a Sync Changes button. Click this to finish syncing the latest changes to your online GitHub repository.
Find your repository on GitHub.
Draft only: Click on the branch dropdown and enter "draft" to create a new draft branch from the main branch.
Go to the Settings tab within the repository and navigate to the Pages section.
Under Branch, select the appropriate branch to publish (draft or main) and click Save.
After a few moments, if you refresh the page, there should now be a URL near the top next to a Visit Site button. If you click this button, you should see your site open in a new window.
Copy the URL generated by GitHub Pages, paste it in the Website URL field of the corresponding Canvas assignment, and click Submit Assignment.

Source Control: Stage and Commit changes