Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 9

Setting Up Git

Recommended resources

Hello! Welcome back.

In our last session, you mastered navigating your computer's file system using the terminal in VS Code. You created your project's folder structure (my-first-website) using commands like cd, mkdir, and ls. Those skills are about to become even more important as we add professional-grade tools to our workflow.

1. What We Are Learning

This lesson is the fourth part of Module 2: The Developer's Toolkit. Our learning outcome is to install and configure Git, the version control system.

Specifically, we will:

  • Understand what version control is and why it's essential for developers.
  • Install Git on your computer.
  • Verify that the installation was successful using the terminal.

2. Why This Matters

As a product designer, you live and breathe version history. Imagine if Figma didn't save your changes, or if you couldn't revert to an older version of a design after a client changed their mind. It would be chaos.

Git is version history for code.

It's a system that takes "snapshots" of your project files every time you reach a meaningful milestone. This allows you to:

  • Experiment safely, knowing you can always go back to a working version.
  • Understand exactly what changed, when, and by whom.
  • Prepare your code to be shared and stored online (which we'll do with GitHub later).

Learning Git is non-negotiable for anyone working with code. It provides the safety net that allows for confident development and collaboration.

3. Step-by-Step Instructions

Let's get this foundational tool set up on your machine.

Step 1: Understand the Concept of Git

Before we install anything, it's helpful to have a clear mental model of what Git does. The video below gives an excellent, quick overview using a practical example.

Git and GitHub Tutorial for Beginners

Watch the first two minutes of this 'Git and GitHub Tutorial for Beginners' by Kevin Stratvert. He explains the core idea of Git as a source control system that lets you manage and revert changes over time.

Watch from the beginning until 02:11. Focus on the analogy of updating a website and having the ability to revert to a previous version if you make a mistake. This is the 'magic' of Git.

Step 2: Install Git

Now, let's install the software. The process is straightforward and similar to how you installed VS Code and Node.js.

The article below provides simple, step-by-step instructions for Windows, macOS, and Linux.

Learn How to Use Git and GitHub – A Beginner-Friendly Handbook

This guide from freeCodeCamp will walk you through downloading and installing Git.

Please read the section titled 'How to Install Git on Your Computer'. Follow the instructions for your operating system (Windows or macOS) to download and run the installer. You can stop reading when you get to the heading 'How to Create a Project and Initialize a Local Repository'.

During the installation, you'll be presented with many options. For now, it is completely safe to accept all the default settings. We can always adjust them later if needed.

Step 3: Verify the Installation

Once the installer is finished, we need to confirm that your computer recognizes the new software. We'll do this from the same place we've been working: the integrated terminal in VS Code.

  1. Open VS Code.

  2. Open the integrated terminal (View > Terminal or Ctrl+ `).

  3. In the terminal, type the following command and press Enter:

    git --version

If the installation was successful, your computer will respond with the version of Git you just installed, something like git version 2.37.1. The exact number doesn't matter, as long as you see one.

4. What Could Go Wrong

  • Error: git: command not found

    • Why it happens: Your terminal session might not have registered that a new program was installed. This is the most common issue after an installation.
    • How to fix it:
      1. Close and reopen VS Code completely. This forces it to re-scan for available commands.
      2. If that doesn't work, restart your computer. A full restart solves this 99% of the time.

  • Confusing Installer Options:

    • Why it happens: The Git installer (especially on Windows) shows many configuration screens that can look intimidating.
    • How to fix it: Don't worry about them. The default selections are designed to work for the vast majority of users, including us. It's safe to just click "Next" through all the steps.

5. Mini Exercise

Let's run through the verification process to make sure you're all set.

  1. If you have VS Code open, close it completely.
  2. Re-open VS Code.
  3. Open a new terminal window (View > Terminal).
  4. Type git --version and press Enter.
  5. Confirm that you see a version number printed in the terminal.

That's it! Seeing that version number means you have successfully installed Git.

6. Checklist Before Moving Ahead

  • I understand that Git acts like a version history for my code.
  • I have downloaded the Git installer from the official website.
  • I have run the installer and accepted the default settings.
  • I have successfully run git --version in the VS Code terminal and see a version number as output.

Conclusion

Excellent work! You've just installed one of the most critical tools in modern software development. You now have the power to track every change you make to your project, giving you a robust safety net as we move forward.

A Look Ahead: Git is now installed, but it doesn't know who you are yet. Before we can save our first "snapshot," we need to do a one-time configuration to attach your name and email to your work. In our next lesson, we'll do exactly that by setting your global Git username and email.