This exercise walks you through the basic Git workflow using VS Code’s Source Control tab and GitHub’s web interface. By the end, you will have cloned a repository, created a branch, made changes, and merged them back.

Content developed by Ben Rambo-Martin

Prerequisites

  • VS Code installed
  • Git installed
  • A GitHub account with access to your institute’s repository

1. Clone the Repository

  1. Open VS Code.

  2. Click the Source Control tab in the left sidebar (the icon that looks like a branching graph).

    VS Code Source Control tab on the left sidebar displaying the Clone Repository button, with the interface ready for repository cloning

  3. If no folder is open, you will see a Clone Repository button. Click it.

    VS Code Source Control tab showing the Clone Repository button

  4. Paste your institute’s repository URL (e.g., https://github.com/cdcent/your-repo.git) into the input box that appears at the top of the window.

  5. Choose a local folder to clone into and click Select as Repository Destination. Below, I have created a folder on my Desktop called github-repos to store all my cloned repositories.

  6. When prompted, click Open to open the cloned repository in VS Code. It will ask you if you trust the publisher of the repository — click Yes, I trust the authors.

2. Create a Branch

  1. In the Source Control tab, click the “branch” icon beside “main” at the top of the REPOSITORIES panel.

  2. Your cursor will move to the input box at the top of the window. Type in a name for your new branch, hit Enter.

  3. VS Code will create the branch and switch to it automatically. “Publish” the branch to GitHub by clicking the Publish Branch button that appears in the status bar at the bottom of the window.

3. Edit the README

  1. Click the Explorer tab in the left sidebar to view your files.
  2. Click the README.md file to open it.

  3. Make a change in the file, for example:

    Line 16: “Scientist Maintainers” to “Chilean Scientists”
    Line 23: “CDC Collaborators” to “CDC Scientists”

  4. Save the file (Ctrl+S / Cmd+S).

4. Stage, Commit, and Push Changes

  1. Click the Source Control tab in the left sidebar.
  2. You should see README.md listed under the Changes section. Clicking on this file will display a “diff” view showing your changes. Red highlights indicate removed text, and green highlights indicate added text.
  3. Hover over README.md and click the + (Stage Changes) icon to move it to the Staged Changes section.
  4. Type a commit message in the Message text box at the top of the Source Control panel, e.g., updated heading of local and cdc contributors.

  5. Click the Commit button (checkmark icon) to commit your staged changes.

  6. The blue button will now say Sync Changes. Click it to push your commit to GitHub. You may be prompted to sign in to GitHub if you haven’t already.

5. Create a Pull Request and Merge (GitHub Website, not VS Code)

  1. Open your web browser and navigate to your repository on github.com.

  2. Click on the Branches tab, then find your branch in the list and click the three dots next to it and click New pull request.

  3. Review the changes, add a title and description if needed, then click Create pull request.

  4. For these workshop repos, CDC administrators will complete the merge.

7. Pull the Merged Changes Locally

  1. Back in VS Code, click the Source Control tab. Click the “branch” icon at the top of the REPOSITORIES panel to switch branches. Select main to switch back to the main branch.

  2. Click Sync Changes to pull the latest changes from GitHub, which will include the merged changes from your branch.

    Tip: Click the “sync” icon regularly to keep your local repository up to date with GitHub, especially if others are also making changes.

You have now completed a full Git workflow — clone, branch, edit, commit, push, and merge. This is the foundation for collaborating on code with your team.