DEV Community

Cover image for Level Up Your Programming Skills: Git and GitHub Made Easy for Beginners.
AbdulKarim
AbdulKarim

Posted on

Level Up Your Programming Skills: Git and GitHub Made Easy for Beginners.

Learning Git can be a bit daunting and overwhelming, especially for beginners. The complexities of version control systems might seem like a labyrinth at first. However, Throughout this article, I will unravel the magic of Git in a language anyone can grasp: no jargon or perplexing technicalities. I'll walk you through its essential concepts, ensuring a smooth and approachable learning experience.

Here's what we'll delve into in this article:**

  1. - What is Git version control?
  2. - What is GitHub?
  3. - Difference between GitHub and Git In real-life scenarios.
  4. - Practical Guide to Git and GitHub.

1. What is Git version control?
Git version control is a powerful and widely used system that enables efficient code management, version tracking, and seamless collaboration in software development projects. Its distributed architecture and robust features make it an indispensable tool for developers aiming to work collaboratively and manage code changes effectively.

Imagine Git as a super-smart and reliable assistant for software developers. It's like having a magical time machine that keeps track of all the changes you make to your code. Every time you make a change, Git takes a snapshot of the code at that moment and keeps it safe.

Now, here's the best part: Git doesn't just save the latest version of your code; it remembers every single change you ever made. So, if you ever mess up or want to go back to a previous version, Git has got your back. It's like having an "undo" button that never forgets!

But that's not all! Git also makes teamwork a breeze. When multiple developers are working on the same project, Git ensures that everyone can work on their part without interfering with others. It helps combine everyone's changes, ensuring everything fits perfectly like puzzle pieces.

Imagine you and your team members are each working on a copy of the code, trying out different ideas. Git helps you keep track of all these separate versions and harmoniously brings them together.

2. What is GitHub?
GitHub is a web-based hosting platform and service that complements the Git version control system. It provides a centralized location for developers and teams to host, manage, and collaborate on Git repositories. GitHub enhances the capabilities of Git by offering a user-friendly interface, extensive collaboration features, and integrations with various development tools.
Imagine GitHub as a massive community center for developers from all around the world. It's like a bustling marketplace where developers can showcase their unique creations and collaborate on exciting projects.

At the heart of GitHub are these special folders called repositories. Each repository is like a treasure chest that holds a collection of code and all the history of changes made to it. Developers use these repositories to store their software projects and work on them together.

In this vibrant community center, developers can easily share their code with others. It's like showing off your latest invention to a group of friends who you admire, suggest improvements, and even help you improve it. This collaborative spirit is what makes GitHub so unique and powerful.

GitHub also has this nifty feature called pull requests. It's like passing a note to your friends, asking them to check out the cool thing you've created. They can review your code, offer feedback, and even suggest changes. When everything looks good, your code merges into the main project, and you become a part of the exciting journey!

And that's not all! GitHub is a place where developers can discuss ideas, report issues, and track tasks in a friendly and organized way. It's like having a big whiteboard where everyone can share their thoughts and work together to solve problems.

The difference between GitHub and Git In real-life scenarios

In real life, the difference between GitHub and Git can be understood using an analogy of a library and a book. Git is like a powerful and intelligent librarian, while GitHub is like a bustling library where people come together to share and collaborate on their books.
**
Git: The Librarian**
Imagine Git as a super-smart librarian who helps you keep track of changes to your book. When writing a book, Git takes snapshots of your work at different times. It acts as a version control system, allowing you to return to previous versions of your book if needed. Git is like having an "undo" button for your writing, making it safe to experiment and try out different ideas.

GitHub: The Library
Now, GitHub is like a lively library where authors can share and showcase their books. Each author has their own section called a repository, which is like a shelf holding their book and all the changes they made. Just like in a library, many authors can have their own repositories side by side, each containing their unique works.

But the real magic of GitHub happens when authors collaborate. They can lend their books to others, who can read, review, and suggest improvements. This process is called a "pull request," where authors ask others to pull their changes into their own book. It's like inviting someone to read your book and give you feedback. If the feedback is great, you can incorporate and improve those changes into your book.

Practical Guide to Git
To verify whether Git is already installed on your computer, open the terminal or command prompt and enter the command "git --version." If Git is installed, the terminal will display the version you have.
In case you don't have Git installed, fret not! You can swiftly head over to the official Git website and find straightforward download instructions tailored to your specific operating system. Following these instructions will have you up and running with the correct Git version quickly.

Configuring Git with your username and email:

Now that you have Git installed, it's time to configure it and make your mark as the author of code changes. This simple step is crucial, especially in team projects, where keeping track of contributions is essential for effective collaboration.

To introduce yourself to Git and set your identity, open your Git terminal and use the following commands:
git config --global user.name "your username"
git config --global user.email "your email"

By executing these commands, you provide Git with your name and email address, uniquely identifying yourself as the one responsible for any code modifications you make.

How to Set Up Your Project Folder in Git
Before using Git for version control, we must ensure our project is ready for the journey. This applies whether it's a brand-new project or an existing one.

For a new project, the first step is to create a fresh project folder using the "mkdir" command (hint: mkdir project_name). Once the folder is created, we can navigate to it using the terminal.

On the other hand, if you have an existing project, you can navigate to its folder in the terminal.

In this example, we'll create a new " learning-git " project folder to demonstrate the process.

Image description
Great job! Now that we've set up our project folder, the next crucial step is to turn it into a Git repository.

What is a Git Repository?
A repository, often abbreviated as "repo," is a storage location where you can save and organize files related to a particular project.

Think of a repository as a dedicated folder or directory on your computer or a remote server. It serves as a container for all the files and data associated with your project. You can have multiple repositories, each representing a different project, and they help keep everything organized and manageable.

One of the essential features of version control systems like Git is that repositories can track file changes over time. Every time you modify the files within a repository, the system records those changes as snapshots. These snapshots create a detailed history of the project's evolution, allowing you to return to previous versions if needed.

How to Create a Git Repository

Let's take the next step and create our Git repository using the project folder we previously set up.

Once inside our project folder, we'll initiate Git to enable version control. The process is as simple as executing the following command:
git init

Once we execute the "git init" command by typing it in the terminal and pressing enter, it may appear that nothing significant happened. However, don't be fooled, as Git can be pretty stealthy and performs several important actions behind the scenes.

To peek into what Git did behind the scenes, we'll need to reveal our hidden files. Open your project folder in your file system and follow these steps:

For macOS Users:
Press Command + Shift + Dot (⌘ + ⇧ + .) to unveil hidden files in your file system.

For Windows Users:
Adjust your view settings to display hidden files in your file system.

Once you've made the hidden files visible, you can see the .git folder inside your project folder. This hidden folder is where Git stores all the essential information and configurations to manage version control for your project.

To view hidden files directly from the terminal, you can use the command "ls -a."

Image description

You'll notice a .git folder inside your project folder. This .git folder serves as the core of your repository, encapsulating all the necessary information for version control.

There are two types of repository

  1. Local Repository
  2. Remote Repository

1. Local Repository:
The local repository refers to the repository that resides on your computer. When you initialize a Git repository in your project folder using the "git init" command, it becomes a local repository. This local repository contains all the necessary data and history related to your project's version control. As you make and commit changes to your files, Git records these changes in your local repository. A local repository allows you to work on your project offline and exploit Git's version control capabilities.

2. Remote Repository:
The remote repository is located on a remote server or hosting service, such as GitHub, GitLab, or Bitbucket. It is a central, shared location where multiple developers can collaborate on the same project. Remote repositories facilitate seamless teamwork and enable developers to contribute changes and share their work easily. When you want to collaborate with others or back up your work, you can push your local repository's changes to the remote repository. Conversely, you can pull changes from the remote repository to update your local repository with the latest work from other team members.

Image description

Understanding Staging and Committing:
Staging:- In Git, staging refers to the process of preparing and selecting specific changes to be included in the next commit. Before committing, you must stage the changes you want to include in that commit. Staging lets you carefully curate the modifications you want to record and create a logical and coherent snapshot of your project's state.
When you make changes to your project files, Git recognizes these modifications but does not automatically include them in the commit. Instead, you use the "git add" command to stage the changes you want to commit. This command adds the selected changes to the staging area, which acts as a holding area for changes ready to be committed.

Commit:- A commit is a fundamental operation that permanently saves the changes you've staged in your project. Think of a commit as a snapshot of your project's current state at a specific time.

When you commit your changes, you create a new project version with your staged modifications. Each commit has a unique identifier, a commit message, and a pointer to the previous commit, forming a chronological sequence of changes in your project's history.

Image description

What is a Commit History in Git?

A commit history is a collection of snapshots, each representing the state of the project at a specific moment in time. Each commit is linked to its parent commit, forming a chronological chain of changes.

Imagine it as a story, with each commit as a chapter. Each chapter builds upon the previous one, creating a continuous narrative of your project's development. You can traverse this history, review past changes, and understand how your project has evolved over time.

This commit history is crucial for version control. It allows you to track progress, identify when and what changes were made, and collaborate effectively with others. With the commit history, you can confidently manage your project, revert to previous versions if needed, and maintain a clear record of your code's journey.

To stage and make a commit in Git, follow these steps:

Now, inside our existing folder named "learning-git," let's take the next step by creating two files: "index.html" and "main.css."
To create these files, you can use the "touch" command: in your terminal to create them.

Image description

Once we've successfully created these files, we'll be all set to the stage and commit our initial changes.
Now, let's see what Git says about our newly created files. In your terminal, type "git status" and hit enter. After executing this command, Git will reveal that our files are currently "untracked."

Being "untracked" means that Git knows these new files but hasn't yet started monitoring their changes. At this point, Git is not including them in any commits.

Image description

To stage and make a commit in Git, follow these steps:

Stage Changes:
type the "git add" command to prepare and stage the specific changes that you wish to include in the upcoming commit. For example, if you want to stage all changes in your project, you can run the following:
git add .
This command stages all modified and new files in the current directory and its subdirectories.

If you prefer to stage-specific files, you can use:
git add file1 file2 …

(Replace "file1," "file2," and so on with the names of the files you want to stage.)
In this practical, we want to stage only the "index.html" file, not "main.css."
To stage the "index.html" file, use the following command in the terminal:

Image description

Now, let's check the status of our Git repository again:
After running the command, Git displayed the status of the "index.html" file as "changes to be committed." This indicates that the file is ready to be included in the next commit.

Image description

As for "main.css" it will still appear as "untracked" since we haven't explicitly staged it. Don't worry; we can always stage it or other files later whenever needed.

  1. Make a Commit: Once you are satisfied with the changes staged for the commit, use the "git commit" command to create the commit. For example: git commit -m "Your commit message here."

Image description

  1. Verify Commit: After making the commit, you can verify it by running "git log." It will display a list of all commits in the repository, including the most recent one.

Staging and committing in Git are essential for effective version control. Following these steps, you can systematically manage changes, create meaningful commits, and maintain a well-documented history of your project's development.

Uploading Our Local Repository to GitHub
So far, one critical concern is that the files we create only exist on our local machine. This poses a risk of data loss if our computer experiences hardware failures or gets corrupted. To mitigate this risk, we utilize remote servers to store and host our Git project.
Popular hosting services like GitHub, GitLab, and Bitbucket offer these remote servers. When we "push" our local repository to any of these services, we essentially upload a copy of our project to their servers. The repository residing in these hosting services is called the remote repository.
In this practical, we will be using Github: a platform for hosting and collaborating on git repositories:

Image description

Step 1 - Create an account on GitHub [if you do not have one already]
To begin the process, navigate to github.com and sign up to create a GitHub account. Follow the registration steps to set up your account and gain access to the powerful features of GitHub. Once you complete the registration process, the interface will resemble the screenshot below:

Image description

Note: Please note that the appearance of your GitHub dashboard will vary based on your preferences, settings, and activities. As a new user, your dashboard will display a clean and personalized interface, ready for you to start exploring and utilizing GitHub's features.

Step 2- Click on new to create a new repository.

Image description

Step 3- Create your first repository
Using the graphic interface on the GitHub website, create your first repository.

Name: learning-git
Description: This marks my initial repository as a full-stack engineer.
Public repo
No README, .gitignore, or license

Image description

Step 4- After creating your repository, copy the user name and save it on your computer.

Image description

Step 5- Generating a Personal Access Token on GitHub.
To have access to your repositories on your local machine and upload your project, you need to create a Personal Access Token on GitHub.

You can use this tutorial as a guide to generate a token.
Note: there are two types of tokens. Make sure you create - a (classic) personal access token, and make sure you copy and save it on your computer.

Once generated, your token should resemble the following:

Image description

Step 6- Clone your repository
In your terminal while inside your "learning-git," do the following:

git clone https://{YOUR_PERSONAL_TOKEN}@github.com/{YOUR_USERNAME}/learning-git.git

Replace {YOUR_PERSONAL_TOKEN} with your token from step 5
Replace {YOUR_USERNAME} with your username from steps 3 and 4

Example below:

Image description

**Step 7- **Go to your GitHub learning-git dashboard. Then, navigate to the section "... or push an existing repository from the command line."
From there, you'll find the following lines:
git remote add origin https://github.com/[yourUsername]/learning-git.git
git branch -M main
git push -u origin main

Copy the first two lines and paste it into your terminal. This command links your local repository with the remote repository hosted on GitHub. The "origin" is a shorthand name for the URL of your remote repository, which is, in this case, "https://github.com/KoderKareem/learning-git.git."

Image description

Once you execute those commands, your local repository will be connected to the remote repository on GitHub, allowing you to push your changes and upload your files. This bridges your local work and the online repository, enabling seamless collaboration and version control.

Now that we have linked our local repository to GitHub, we can proceed to upload our files.

To upload the files we created earlier (index.html and main.css) to GitHub, we'll need to stage and commit them. It's important to note that we have already staged and committed "index.html" in our local repository.

Now, the next step is to stage "main.css" by using the "git add" command, followed by committing the staged changes using the "git commit"

Image description

command with an appropriate commit message. After completing these steps, our changes will be ready to be pushed to our GitHub repository.
Finally, The last step is to push the committed changes from our local repository to the remote repository on GitHub. This process will synchronize our project, making it available on GitHub's servers and accessible to others.
Use the command "git push" to upload your files...

After completing the process, head to your GitHub repository named "learning-git." Once you're there, refresh your dashboard. You'll notice that the files "index.html" and "main.css" that we just pushed from our local repository are now available on your GitHub repository.

Image description

Congratulations! 🎉 Your successful push has uploaded the files to the remote repository on GitHub, making them accessible from anywhere. This seamless integration between your local and remote repositories allows you to easily collaborate, share your work, and track changes.

Note: This article offers a glimpse into Git and GitHub, but it's important to acknowledge that there's a broader scope of knowledge to explore beyond what's covered here.

Keep up the great work as you continue to leverage Git and GitHub for efficient version control and productive coding adventures! Happy coding! 🚀💻

Top comments (0)