Exercise: Introduction to Git

[github-actions]

Introduction to Git

👋 Hey there @AL-Rami! Welcome to your Skills exercise!

Use Git version control to work on a game using command line (CLI) and VS Code

---

✨ This is an interactive, hands-on GitHub Skills exercise!

As you complete each step, I’ll leave updates in the comments:

• ✅ Check your work and guide you forward
• 💡 Share helpful tips and resources
• 🚀 Celebrate your progress and completion

Let’s get started - good luck and have fun!

_{— Mona}

[github-actions]

Step 1: Introduction to Git Version Control

You've been working on a project and realized organizing backups has become difficult. And, since everyone shares updates differently, collaborating with them is very confusing.

After some quick searching, you learned about Git. Supposedly, it makes keeping track of changes and collaborating with others easy. It removes the confusion of older methods like file naming conventions, share drives, and emailed copies of files.

Important

This exercise teaches Git usage on a machine with it already installed.
If you want to install it on your own computer, we recommend the official Git site for installation guides, since there are many computer configurations.

📖 Theory: What is Version Control?

Version control systems solve common problems developers face when managing code changes over time. Issues like:

• Backup and Recovery
• Sandboxed Experimentation
• Parallel development
• Locked files
• File duplication
• Conflicting changes
• Team collaboration

If have ever experienced any of the below situations, you might like Git version control! 😎

• my-project-final-v2-really3.zip
• "When did that stop working? I didn't change anything!" (but you know you did)
• "The file is locked. I'll work on a copy until he gets back on Monday."
• "Which email had v2 in it? I think the one from last Wednesday."

What is "Git" version control?

Git is a distributed version control system, meaning each developer has a complete copy of the project history. This differs from centralized systems where there is only one copy in a shared location.

This provides advantages like:

• Working offline - Most operations are processed locally.
• Increased robustness - Distributed copies act as backups.
• Flexible workflows - Developer can use their own processes and tooling.

How do I use Git?

Git is an open-source tool built by developers for developers. As such, the community has consistently developed features to cover most needs.

For example, the community has streamlined Git into nearly all development workflows. Here are a few:

• Command Line Interface (CLI) - The original tool and source of all functionality.
• Code Editors - Alongside your favorite coding editors/tools. Examples:
  • Visual Studio Code
  • JetBrains IDEs
  • Xcode
  • Emacs/VIM
• Hosting Services - Centralized Git Hosts, with online editing through the web browser. Examples:
  • GitHub
  • GitLab
  • Gitea
  • Azure DevOps
  • AWS CodeCommit
  • BitBucket
• Desktop Applications - Friendly graphical interfaces. Examples:
  • GitHub Desktop
  • Sourcetree
  • TortoiseGit
  • GitKraken
  • Git Butler
  • And many more: https://git-scm.com/tools/guis

⌨️ Activity: Open the sample project

To start practicing Git, let's first open a pre-configured development environment and explore the sample project.

1. Right-click the below button to open the Create Codespace page in a new tab. Use the default configuration.

   

   🪧 Note: Typically a GitHub Codespace automatically includes the repository code and all required settings. This is a modified experience so you can practice from scratch.

2. Confirm the Repository field is your copy of the exercise, not the original, then click the green Create Codespace button.

   • ✅ Your copy: /AL-Rami/AL-RAMI-skills-introduction-to-git
   • ❌ Original: /skills/introduction-to-git

3. Wait a moment for Visual Studio Code to load in your browser.

4. In the left navigation tabs, select File Explorer to show the files. Right-click on src/index.html and select Show Preview to see our sample game in action.

   ❗️ Warning: Don't make any changes!
   We have not added version control yet! 😱

   
   

   

Tip

Feel free to leave the game open and give it more trial-runs as we make changes! 🧑‍🚀

⌨️ Activity 2: Git in the CLI

Let's start with using Git in the command line interface (CLI). This is the source of all Git functionality and most powerful option.

1. If the integrated terminal is not already available, open it using Ctrl+Shift+P then searching for and selecting View: Toggle Terminal

   

2. Show the currently installed version of Git, to verify it is installed.

   git --version

   

3. Show the Git help documentation.

   git --help

   

⌨️ Activity 3: Set your Git identity

Before we can start versioning our game, let's provide Git our identity so it can associate us as the author for any changes.

1. Set your display name.

   ⚠️ Don't forget to replace First and Last!

   git config --global user.name "First Last"

2. Set your email address.

   ⚠️ Don't forget to replace me@example.com!

   git config --global user.email "me@example.com"

3. Confirm the changes by viewing the configuration.

   git config --global --list

   

4. With your author details configured, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next steps.

Tip

You can also change your username and email per project, if you have multiple accounts. On an existing project repository, use --local instead of --global.

Having trouble? 🤷

• Make sure you replace "First Last" and "me@example.com" with your actual information.

[github-actions]

Step 1 - Passed ✅

Status	Description
✅ - Pass	Set username and email in global Git config

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: Creating Your First Repository

Now that we are familiar with the sample project and informed Git who we are, let's get our game into version control!

📖 Theory: The Git Workflow

The Git workflow involves three main areas:

• Working Directory: Your project files where you are making changes.
• Staging Area (Index): A preparation area for grouping changes you want to save to history.
• Repository: The permanent records of your project's development history.

graph LR
  A[Working Directory] -->|git add| B[Staging Area]
  B -->|git commit| C[Repository]
  C -->|git checkout| A

Loading

What are the important Git commands?

Git has many operations, but there are a few you will use the most for local projects.

• git init - Start a new repository to enable versioning.
• git add - Group related changes together in the staging area, in preparation to "commit" them to history.
• git commit - Save or "commit" the changes in the staging area to the project's history.
  • commit message - A short description of the changes to help keep the history organized.
• git status - View the current state of your working directory and staging area.
• git checkout - Change your working directory to a different version from the repository history.

Tip

Don't undervalue the commit message! A clear, concise, descriptive, and non-generic message will make your project history much easier to understand (and help find those future bugs)!

⌨️ Activity 1: Initialize a project repository (using the CLI)

Let's add version control to our game and commit the current version.

1. In the terminal, navigate to the project directory.

   cd /workspaces/stack-overflown

2. Initialize a new Git repository.

   git init

3. Check repository status. Notice it says "No commits yet" and the tip to use git add.

   git status

   

4. Promote the game files to the staging area. This will create a locked copy, preparing them for committing to the repository history.

   git add src/index.html
   git add src/index.js
   git add src/patterns.js
   git add src/style.css

   or

   git add src/*

5. Check the repository status again. Notice that each file is identified as new file.

   git status

   

6. Commit the changes to the repository history. Our project history is now started!

   git commit -m "Initial commit"

   

7. Check repository status. Notice the "working tree clean" which means our current copy perfectly matches the history.

   git status

   

⌨️ Activity 2: Work on a file (using VS Code)

Let's also try adding files with our code editor, in this case the documentation for our game.

1. In the file explorer, click the New File... icon to start a README file with the following name. Make sure it is inside the src/stack-overflown/ folder.

   README.md

   

2. Open the file and insert the following content.

   # Stack Overflown
   
   Organize the falling blocks into the current debug pattern before the stack overflows! ⏳

3. In the left navigation, select the Source Control tab. Notice the README.md file is listed under the Changes area.

   

4. Promote the file to the staging staging area by hovering over file and selecting the plus sign + button.

   

5. Enter a commit message and press the Commit button.

   Start game documentation

   

6. For a second commit, also add the following content to README.md.

   ## How to Develop
   
   - `index.html` - the game container for playing
   - `index.js` - the primary game logic
   - `patterns.js` - the error patterns to match during gameplay
   - `style.css` - the game formatting and styling

7. Promote the change to staging and commit with the below message.

   Start developer docs

   

8. With your new commits added to the repository, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next steps.

Having trouble? 🤷

• If git status shows the wrong files, you can remove them from staging with git restore --staged <filename>

[github-actions]

Step 1 - Passed ✅

Status	Description
✅ - Pass	Set username and email in global Git config

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 2! One moment... 🤓

[github-actions]

Step 2: Creating Your First Repository

Now that we are familiar with the sample project and informed Git who we are, let's get our game into version control!

📖 Theory: The Git Workflow

The Git workflow involves three main areas:

• Working Directory: Your project files where you are making changes.
• Staging Area (Index): A preparation area for grouping changes you want to save to history.
• Repository: The permanent records of your project's development history.

graph LR
  A[Working Directory] -->|git add| B[Staging Area]
  B -->|git commit| C[Repository]
  C -->|git checkout| A

Loading

What are the important Git commands?

Git has many operations, but there are a few you will use the most for local projects.

• git init - Start a new repository to enable versioning.
• git add - Group related changes together in the staging area, in preparation to "commit" them to history.
• git commit - Save or "commit" the changes in the staging area to the project's history.
  • commit message - A short description of the changes to help keep the history organized.
• git status - View the current state of your working directory and staging area.
• git checkout - Change your working directory to a different version from the repository history.

Tip

Don't undervalue the commit message! A clear, concise, descriptive, and non-generic message will make your project history much easier to understand (and help find those future bugs)!

⌨️ Activity 1: Initialize a project repository (using the CLI)

Let's add version control to our game and commit the current version.

1. In the terminal, navigate to the project directory.

   cd /workspaces/stack-overflown

2. Initialize a new Git repository.

   git init

3. Check repository status. Notice it says "No commits yet" and the tip to use git add.

   git status

   

4. Promote the game files to the staging area. This will create a locked copy, preparing them for committing to the repository history.

   git add src/index.html
   git add src/index.js
   git add src/patterns.js
   git add src/style.css

   or

   git add src/*

5. Check the repository status again. Notice that each file is identified as new file.

   git status

   

6. Commit the changes to the repository history. Our project history is now started!

   git commit -m "Initial commit"

   

7. Check repository status. Notice the "working tree clean" which means our current copy perfectly matches the history.

   git status

   

⌨️ Activity 2: Work on a file (using VS Code)

Let's also try adding files with our code editor, in this case the documentation for our game.

1. In the file explorer, click the New File... icon to start a README file with the following name. Make sure it is inside the src/stack-overflown/ folder.

   README.md

   

2. Open the file and insert the following content.

   # Stack Overflown
   
   Organize the falling blocks into the current debug pattern before the stack overflows! ⏳

3. In the left navigation, select the Source Control tab. Notice the README.md file is listed under the Changes area.

   

4. Promote the file to the staging staging area by hovering over file and selecting the plus sign + button.

   

5. Enter a commit message and press the Commit button.

   Start game documentation

   

6. For a second commit, also add the following content to README.md.

   ## How to Develop
   
   - `index.html` - the game container for playing
   - `index.js` - the primary game logic
   - `patterns.js` - the error patterns to match during gameplay
   - `style.css` - the game formatting and styling

7. Promote the change to staging and commit with the below message.

   Start developer docs

   

8. With your new commits added to the repository, Mona should already be busy checking your work. Give her a moment and keep watch in the comments. You will see her respond with progress info and the next steps.

Having trouble? 🤷

• If git status shows the wrong files, you can remove them from staging with git restore --staged <filename>

[github-actions]

Please, follow the steps above.
I'll watch your progress in the background to provide feedback. 🧐