Before you can design or evaluate an interface, you need a place to build it. This topic walks you through setting up the tools your team will use all semester: a code editor, Git for version control, a GitHub repository for sharing work, and GitHub Codespaces as a cloud-based option when a local setup is inconvenient or when a teammate's machine won't cooperate. You will also establish a sensible project folder structure and naming conventions, then verify that everything works end to end by making a change, committing it, and pushing it.
This matters because your course project is a team effort. Version control is what lets several people edit the same project without overwriting each other, and it gives you a history you can roll back to when an experiment goes wrong. Agreeing on a folder structure and workflow now saves hours of confusion later, and it is a skill employers assume you already have.
As you watch, focus on the sequence of actions rather than memorizing menus: initialize or clone a repository, stage changes, commit with a clear message, push, and pull. Notice where each tool overlaps (the editor's Git panel versus the command line versus the browser) and pick the path you will actually use. Pause and perform each step on your own machine or in a Codespace as you go, and finish by confirming that your commits appear on GitHub.
An official Visual Studio Code tutorial that demonstrates Git basics directly inside the editor, including initializing a repository, renaming a branch, and working with the built-in source control interface. The chapter markers suggest a step-by-step walkthrough of the common commit-and-push cycle without needing to memorize terminal commands. It is short and demonstration-driven, so you can follow along in your own editor.
It comes from the VS Code team itself, so the interface shown matches the editor most students will install, and it directly covers both the choosing-an-editor and installing-and-configuring-Git-locally subtopics.
A beginner-oriented guide from GitHub that breaks down creating your first repository, covering the setup options you choose when a repo is made and the first steps of getting content into it. Expect coverage of the repository's role as the shared home for a team's code and files. The pacing is aimed at people who have never used GitHub before.
Produced by GitHub, it is authoritative on the platform your team will use for collaboration, and it fills the gap between a local Git setup and a shared remote repository where folder structure and conventions begin to matter.
A CS50 workshop session introducing GitHub Codespaces, a browser-based development environment that runs VS Code in the cloud. It is framed for educators and students, so it likely explains why a hosted environment removes installation headaches and how a Codespace connects to a GitHub repository. Expect a tour of launching and working inside a Codespace.
It is the clearest fit for the cloud development subtopic and offers a practical fallback for teammates whose local setup fails, delivered by a well-known and reliable course production team.
These videos are the hands-on counterpart to the module's conceptual outcomes. While MO1 and MO2 ask you to recall HCI principles and distinguish usability, user experience, and accessibility, you need a working environment in which to apply those ideas to the course project, and the VS Code and GitHub tutorials give you that foundation. The Codespaces session supports MO3 most directly: knowing whether your team will work locally, in the cloud, or both is part of defining platform and team roles in your initial project plan, and a shared repository is where scope, task assignments, and project files are recorded and tracked.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.