Skip to main content

Getting-started-with-Git-&-GitHub

Welcome to the lesson on Front-end web development. This would be a self-paced class that focuses on setting up Git and GitHub, and understanding the various methods of pushing our code to GitHub. Please make sure that you are completing the entire lesson.

Git and GitHub

All developers will use some kind of version control system (VCS), a tool to allow them to collaborate with other developers on a project without the danger of them overwriting each other's work, and rolling back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.

Here is a link to an article by Microsoft on version control. It has some basic information related to Git and GitHub as well.

Prerequisites​

Before starting working with Git and GitHub, we need:

  • Git installed in our system (Git downloads page)

    It is highly recommended to watch this video for installing Git:

  • A GitHub account. If you haven't already got one, sign up now using the provided link.

GIF link: https://rapidapi.com/blog/wp-content/uploads/2017/01/octocat.gif

Configuring Git and GitHub​

Here is a link to an article on The Odin Project’s webpage for configuring your Git and GitHub.

You can also watch this video if you get stuck somewhere (from 7:39 to 12:42):

Creating a repository on GitHub​

There are several ways of creating our Git repository on GitHub.

Without using Terminal:

  1. The simplest way is just by dragging and dropping files into GitHub.

Watch this video to see how we can do that (till 3:52):

Using Terminal:

Let’s first learn how to open a folder in the Terminal:

In Windows:

  • Right click on the project folder in your local system.

  • Choose “Git Bash Here”

In macOS:

  • Open Spotlight by pressing Command + Space.

  • Search “Terminal” in the search bar.

  • Press “Enter”

  • Drag and drop the folder into the Terminal

Now, we need to learn some basic Linux and Git commands for moving ahead in this section.

Here is a video that covers some of the most common Linux commands (from 6:00 to 8:22):

Here is a video that covers some of the basic Git commands (from 3:14 to 25:47):

Once you’re done learning some basic commands that are used heavily while pushing our code to GitHub using Terminal, head over to the next 2 methods for creating a GitHub repository:

  1. Using SSH

    Watch this video to see how this method works (from 8:46 to 14:21):

  1. By initializing Git in your local repository

    Watch this video to see how this method works (from 1:47 to 5:39):

Hosting your project on GitHub Pages​

GitHub has a very useful feature called GitHub Pages, which allows you to publish website code live on the Web.

Watch this video by GitHub itself on GitHub Pages:

Watch this video to see how you can host a simple website on GitHub Pages (from 3:44 to 4:36)

Instructions for the activity

And voila, that’s the end of all the concepts in this lesson. Now, time for an exercise!

Required links

Boilerplate link: https://stackblitz.com/edit/fe0002?file=index.html

Challenges for the activity

Challenge 1: Create a folder in your local system and add 2 files inside it, index.html and style.css

Challenge 2: Copy the code from the files given in the boilerplate link and paste it into the respective files present in your local system.

Challenge 3: Now push your code to GitHub. Also, host this website using GitHub Pages.

Useful resources for you

Now that you’re done with this lesson, here are some useful post-class reading links for you.

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/GitHub

https://www.theodinproject.com/lessons/foundations-introduction-to-git

https://www.theodinproject.com/lessons/foundations-git-basics

https://docs.microsoft.com/en-us/learn/paths/intro-to-vc-git/

There are some must-watch tutorials available on YouTube as well.

https://www.youtube.com/watch?v=apGV9Kg7ics

https://www.youtube.com/watch?v=8JJ101D3knE

https://www.youtube.com/watch?v=RGOj5yH7evk

https://www.youtube.com/playlist?list=PL4cUxeGkcC9goXbgTDQ0n_4TBzOO0ocPR