Git Tutorial - Commands from Beginner to Advanced Level

What is Git?

Git is a world wide populor distributed version control system which keeps track of all files in a cenrtalized location. It is a free and open source created by Linus Torvalds in 2005.

In short there will be a centralized copy (master) available in one location and the copy of the same will be copied into each user machine. All users changes will be pushed/merged into the same centrlized/parent copy (maseter) with the help of git commands (add, commit, push, pull etc.)

Advantages of Git

- Speed
- Simplicity
- Fully Distributed
- Excellent support for parallel development, support for hundreds of parallel branches.
- Integrity

Thinking in Git

Thinking in git is simple and easy by practicing it. This article covers the Git commands for beginner to advanced level. Each and every command will be presented with simple and straight forward explanation.

Git Commands

What is my git version?

Command: git --version

Show git configuration details

Command: git config --list
This command shows detailed git configuration for the branch like below.
- remote.origin.url
- user.name
- user.email
- credential.helper (Type of credential stored)

How to create an empty git repository?

Command: git init
Creates an empty repository (Folder) in the machine with the hidden git configuration files in it.

How to clone an origin branch?

Command: git clone <branch_link> <local_branch_name_optional>
It copies all the files from the specified remote branch into the current local machine folder. This stores the chain with remote branch for pushing and pulling the changes.  

Workflow of pushing changes

Modify Files > Staging > Committing > Pushing

What are my pending/modified changes?

Command: git status
Lists the modified files both staged and unstaged.

How to stage files?

Command: git add .
All the modified files will be shown in the unstaged/changes area. To push the local changes you need to stage, commit and push them. Above command will add all the files to the staging area.
Command: git add filename
If the given file name is existed in the modified list then the file will be staged.

How to commit changes?

Command: git commit -m "Commit Message"
You can only commit the staged changes. All the staged files will be committed with the above command. Make sure the files are available in staged area before running this command. Every commit will be generate with an unique hash id to address the commit. This is unique across the all the branches.

Reverting Commit

Command: git revert <commit_hash>
Every commit assigned with an unique hash id (Ex:f26ef0db7d33b46cccccda4699319ef518fdd3c7) to address or refer the commit. This is unique across the all the branches. The above command will revert the given commit.

Pushing changes to origin branch

Command: git push
Pushes all the local commits to origin branch

What are the available changes in origin and how to fecth them?

Command: git fecth
This will compare the origin branch with local branch and list out the commits or changes which are available in origin branch but not available in the local repository. These changes in origin branch can be pushed by the other users from thier local brach. This command helps in knowing what are all the incoming commits before pulling them.

How to pull the changes from origin branch?

Command: git pull
Gets all the pending commits from origin branch into the working branch.

Lis out commit history

Command: git log
Get all the detailed commits history (Commit hash, message, committed owner, committed date, files changed etc.) of the working branch.

Get names of all local branches

Command: git branch

Get names of all remote branches

Command: git branch -r

Get names of both local and remote branches

Command: git branch -a

Switch from one branch to another branch

Command: git checkout <local_branch_name>

Branching - Create a new branch from working / current branch

Command: git checkout -b <new_branch_name>

Branching - Create a new branch from another local branch

Command: git checkout -b <new_branch_name> <source_branch_name>

Branching - Create a local branch from a remote branch

Command: git checkout -b <new_branch_name> <origin/remote_branch_name>

Branching - Delete local branch

Command: git branch -d <local_branch_name>

Branching - Push local branch to remote

Command: git push origin <branch_name>
This will push the local branch to the remote which can be shared with the others.

Branching - Merge another local branch into current branch

Command: git merge <other_local_branch_name>
This compares the commit history of source branch with current branch and merges the changes from source branch into current.

Stashing - Saving Changes Temporarly

Stashing helps in saving the modified and uncommitted changes temporarly. Each stash will be stored with an index by following LIFO (Last In First Order). You can re-apply the saved stash or changes across all the branches. It supports deleting or dropping. You can create a new branch with the stash as well.

Stash the changes
command: git stash

Stash the changes with message
command: git stash save "<stash_message>"

Show all the saved stashes
command: git stash list

Re-apply most recent stash and keep it in your stack
command: git stash apply

Re-apply stash by index
command: git stash apply <index>

Apply most recent stash and then drop
command: git stash pop

Remove most recent stash
command: git stash drop

Remove stash by index
command: git stash drop <index>

Create a branch from stash
command: git stash branch <branch_name> stash@{index}

Get commit details by commit-hash

Command: git show <commit-hash>
This command gets the details of commit which are commit hash, message, owner, date, files changed along with changes.

Cherry-pick commit

Command: git cherry-pick <commit-hash>
Cherry-pick command copies the commit into the current branch. This we use to copy the commit from one branch to another branch.

What is a HEAD?

HEAD is a reference to the last commit in the currently check-out branch. When you do a new commit then HEAD will be pointed to the newly created commit.

Below command shows where and which commit the HEAD is currently pointing to
Command: git show HEAD

Show nth commit with the HELP of HEAD
Command: git show HEAD~<index>

How to rename local and remote branch?

1. Switch to the branch you want to rename
Command: git checkout <branch_name>

2. Rename the branch
Command: git branch -m <new_branch_name>

3. Push the renamed local branch to the remote and reset the upstream branch. This will create the new branch in remote with the new_branch_name and keep the old branch as it is.
Command: git push origin -u <new_branch_name>

4. Delete remote branch with the old_branch_name
Command: git push origin --delete <old_branch_name>

CSS Basic Selectors - Learn CSS | Html with CSS Tutorials | Tricks | Front-end Development

CSS selectors are useful in front end development. In this tutorial I am going to show you what are the CSS basic selectors.

Below are the four basic selectors which we use on daily web development

1. Universal Selector

2. Type Selector

3. Class Selector

4. ID Selector

1. Universal Selector

The universal selector matches all elements of any type in HTML document. Consider the below scenario in where we have div, span and paragraph for which I want to set a a green font colour for all of them.

CSS

*{

     font-color:green;

 }

<div>div content</div>

<span>span content</span>

<p>paragraph content</p>

User Interface

div content

span content

paragraph content

2. Type Selector

Type selector matches all the HTML elements by the given HTML element name. This selector travels throughout the HTML document and find out the elements which are matched with the given element name and apply the styles on them. Cosider below where we have to set a light green background colour for all the paragraphs.

CSS

p{

background-color: lightgreen;

}

<span>Paragraph 1</p>

<p>dotnetcookie.blogspot.com contains the regular updates on C#.NET for the followers</p>

<span>Paragraph 2</p>

<p>dotnetcookie.blogspot.com contains the regular updates on UI Technologies for the followers</p>

<span>Paragraph 3</span>

<p>dotnetcookie.blogspot.com contains the regular updates on SQL Server for the followers</p>

User Interface

Paragraph 1

dotnetcookie.blogspot.com contains the regular updates on C#.NET for the followers

Paragraph 2

dotnetcookie.blogspot.com contains the regular updates on UI Technologies for the followers

Paragraph 3

dotnetcookie.blogspot.com contains the regular updates on SQL Server for the followers

3. Class Selector

The class selector matches all the HTML elements by their class attribute value. If any HTML element class attribute value is matches with the given class name selector then the changes will apply to them. Consider the below scenario in which we want to apply a light green colour background to the success message and light  yellow colour message to info message.

CSS

.success {

background-color: lightgreen;

}

.info {

background-color: #f4ff54;

}

<div class="success">Congratulations! Your are successfully completed CSS basic selectors blog post</div>

<div class="info">You need to go through the other tutorials to become an expert in CSS</div>

User Interface

Congratulations! Your are successfully completed CSS basic selectors blog post

You need to go through the other tutorials to become an expert in CSS

4. ID Selector

The ID selector applies the styles to the elements based on the value of their id attribute. The HTML elements should be identified by the unique ids. Lets take two containers , apply the background colour for the div container which id value is equal to "warningMessage".

CSS

#warningMessage{

background-color: lightgreen;

}

<div id="warningMessage">HTML does not allow the duplicate id values.</div>

<div>Please go through the other tutorials on this blog to become an expert in CSS</div>

User Interface

HTML does not allow the duplicate id values.

Please go through the other tutorials to become an expert in CSS

Above are the basic selectors which we use regularly in our web development.

(ASP.NET MVC, AngularJS) - Installing AngularJS in ASP.NET MVC with Visual Studio

What this article covers?

How to Install AngularJS in your project?

Understanding Nuget Package Manager in VisualStudio.

How to use AngularJS library?

AngularJS Hello World Example

By the completion of this article you will get knowledge on how to install (or) integrate the AngularJS in your ASP.NET MVC application with Visual Studio.

Before proceeding I suggest you to refer my previous articles. 

AngularJS - Overview

ASP.NET MVC - Creating Hello World Application with Visual Studio 2017

How to Install AngularJS in your project?

You can install the AngularJS in your application with the help of the Nuget Package Manager Tool in the Visual Studio.

Open your project and go to the Solution Explorer, Right Click on the project and select Manage Nuget Packages option, it will open the Nuget Package Manager window. 

Click on the Browse menu.

Search for the AngularJS, then select the AngularJS library.

You have a provision to install specific version based on your preference. By default latest version will be selected, if you want to install specific version select it and then click on install, then it’ll be added to your application.

Please check the installation status in the Output window. If the plugin installation failed you can check the reasons for Installation failing.

So now all the AngularJS libraries will be available in Scripts folder in the project.

How to use AngularJS in your project?

If you want to use the AngularJS in one page you can directly add reference to the Angular.js file in your View.

Open the View and add the reference to Angular.js file as shown below.

Now the AngularJS will be loaded dynamically into your view while page loading.

AngularJS Hello World Example

Let’s add a small code snippet to your page. Add the html content to your View body as shown below.

Code Explanation:

In the above script ng-app tells the Angular that please initialize and then parse all the nodes within it.

Initializing the value of the message variable using the ng-init directive, and then binding the same message to the h1 element with the help of Angular Expressions.

Now run the application Angular will display the output as shown below.

AngularJS - Overview

- AngularJS is a JavaScript framework developed by Google.

- AngularJS empowers the traditional HTML by extending its current vocabulary.

- AngularJS is open source, client-side JavaScript framework that promotes a high-productivity web development experience.

- AngularJS applications are built around a design pattern called Model View Controller (MVC).

- AngularJS used in Single Page Application (SPA) development projects. 

- AngularJS extends HTML DOM with additional attributes and makes it more responsive to user actions.

- AngularJS is a part of new generation libraries and frameworks that came to support the development of more productive, flexible, maintainable, and testable web applications.


What You Should Already Know?

  You should be familiar with the basics of web development.

• HTML
• CSS
• JavaScript
• JSON

AngularJS Core Features

Model	The data shown to the user in the view
View	Responsible for displaying data to the user
Controller	Contains the business logic
Directives	Extends HTML with custom attributes and elements
Services	Reusable business logic independent of views
Filters	Formats the value of an expression for display to the user
Expressions	Binds application data to HTML
Templates	HTML with additional markup
Routing	Loads a single HTML page and dynamically updates that page as the user interacts with the web app
Dependency Injection	Simplifies the process of dealing with dependencies
Testing	It has many features which makes testing your applications easy
Validations	Offers client side validation
Scope	Object which helps in exchanging the data between controller and view.
Data Binding	Automatic synchronization of data between the model and view components