Your Next Tech Partner

Git & Github: A Beginner's Guide

Akash Kadlag — Fri, 12 Aug 2022 05:32:46 GMT

Crash Course Overview

If you want to get started on learning about Git technology, you’ve come to the right place. This is a comprehensive beginner’s guide to Git.

Git and GitHub are two technologies that every developer should learn, irrespective of their field. If you're a beginner developer, you might think that these two terms mean the same thing – but they're different.

This Crash Course will help you understand what Git and version control are, the basic Git commands you need to know, how you can use its features to boost your work efficiency, and how to extend these features using GitHub.

Prerequisite

To get the most out of this article, we need the following:

A command line interface.
A text editor of your choice (I will be using VS Code).
A GitHub account.

What is Version Control System...?

Version Control Systems are software tools for tracking/managing all the changes made to the source code during the project development. It keeps a record of every single change made to the code. It also allows us to turn back to the previous version of the code if any mistake is made in the current version.

Without a VCS in place, it would not be possible to monitor the development of the project.

Types of VCS

The three types of VCS are:
1. Local Version Control System
  
  Local Version Control System is located in your local machine. If the local machine crashes, it would not be possible to retrieve the files, and all the information will be lost. If anything happens to a single version, all the versions made after that will be lost.
2. Centralized Version Control System
  
  In the Centralized Version Control Systems, there will be a single central server that contains all the files related to the project, and many collaborators checkout files from this single server (you will only have a working copy). The problem with the Centralized Version Control Systems is if the central server crashes, almost everything related to the project will be lost.
3. Distributed Version Control System
  
  In a distributed version control system, there will be one or more servers and many collaborators similar to the centralized system. But the difference is, not only do they check out the latest version, but each collaborator will have an exact copy (mirroring) of the main repository(including its entire history) on their local machines.
  
  Each user has their own repository and a working copy. This is very useful because even if the server crashes we would not lose everything as several copies are residing in several other computers.

What is Git...?

Git is a distributed version control system designed to track changes in a project’s files. Git was released in 2005 by Linus Torvalds.

With Git, you can revert to various states of your files (like a time-traveling machine). You can also make a copy of your file, make changes to that copy, and then merge these changes to the original copy.

Real-life projects generally have multiple developers working in parallel. So they need a version control system like Git to make sure that there are no code conflicts between them.

Why you should learn and use git?

More than 87% of developers use Git as a control system. Any developer needs at least a base knowledge of Git to be successful and relevant to the market.

Most companies, big and small, use Git as a repository, including:
- Netflix
- Reddit
- Lyft
- Shopify
- Facebook
- Atlasssian
- Google
- eBay

Git Workflow

Before we start working with Git commands, it is necessary that you understand what it represents.

A repository a.k.a. repo is nothing but a collection of source code.

There are four fundamental elements in the Git Workflow.

Working Directory, Staging Area, Local Repository, and Remote Repository.

If you consider a file in your Working Directory, it can be in three possible states.
1. It can be staged.
  
  This means the files with the updated changes are marked to be committed to the local repository but not yet committed.
2. It can be modified.

This means the files with the updated changes are not yet stored in the local repository.

It can be committed.

This means that the changes you made to your file are safely stored in the local repository.

git add is a command used to add a file that is in the working directory to the staging area.

git commit is a command used to add all files that are staged to the local repository.

git push is a command used to add all committed files in the local repository to the remote repository. So in the remote repository, all files and changes will be visible to anyone with access to the remote repository.

git fetch is a command used to get files from the remote repository to the local repository but not into the working directory.

git merge is a command used to get the files from the local repository into the working directory.

git stash is used temporarily to store modified, tracked files in order to change branches.

git pull is a command used to get files from the remote repository directly into the working directory. It is equivalent to a git fetch and a git merge.

Get started with Git

The Git software is a powerful command-line tool that you can install on your machine, whether you use Windows, macOS, or Linux.

Installing Git

If you are on a Mac, fire up the terminal and enter the following command:
```
  $ git --version
```
This will prompt open an installer if you don’t already have git. So set it up using the installer. If you have git already, it’ll just show you which version of git you have installed.

If you are running Linux(deb), enter the following in the terminal:
```
  $ sudo apt install git-all
```
If you are on Windows:
```
  $ get a mac 🙂
```
Just kidding… Relax… The number of people I triggered… Phew… Go to this link or this official website for more info on how to get it.
First time Configuration

The git config command allows you to set configuration variables that control how git looks and operates. The config command works on different levels:
1. Local-level: This means that all your credentials and configurations are only limited to your project’s directory. By default, git config writes to a local level when no configuration is passed.
2. Global-level: this configuration is specific to a user on the operating system; the configuration values live in the user’s home directory.
3. System-level: These configurations are placed in the system’s root path; it tracks all users and all repos on the operating system.

The first thing you configure after a successful installation is your email address and username; this will identify our contributions and changes in the project source code. To set up your user name and email, run the following in your command line:

git config --global user.name "YOUR_USERNAME"

git config --global user.email "YOUR_EMAIL_ADDRESS"

Git is a powerful tool, but some of the functionality is tied to having a text editor that can update settings, configure changes, or modify the contents of files. Because the defaults may not match your preferences, it’s important to specify the editor you want to use and the commands required to use it.

Personally, I enjoy using Visual Studio Code, so I use the following global default:

git config --global core.editor "code --wait"

Git offers differential treatment for line endings of files, in Windows & Linux. It is important to set the proper line endings for your git repository if you need to make it cross platform. If you don’t set line endings for your git commits, then the repository code will not work when checked out on another platform.

The simplest ways to configure line endings is to us git config command. Here is an example:

For Mac

git config --global core.autocrlf input

For Windows

git config --global core.autocrlf true

To check the info you just provided, run the following in your command line:

$ git config --global --list

What is GitHub...?

GitHub is a platform that can be used to host code online. Think of GitHub as a platform that stores the whole codebase in a remote repository. It comes with tools to collaborate on projects of any size.

GitHub lets you store your repo on their platform. Another awesome feature that comes with GitHub is the ability to collaborate with other developers from any location.

Why you should learn and use GitHub?
1. Git makes it easy to contribute to open source projects
  
  Nearly every open-source project uses GitHub to manage their projects. Using GitHub is free if your project is open source, and it includes a wiki and issue tracker that makes it easy to include more in-depth documentation and get feedback about your project.
  
  If you want to contribute, you just fork (get a copy of) a project, make your changes, and then send the project a pull request using GitHub's web interface. This pull request is your way of telling the project you're ready for them to review your changes.
2. Documentation
  
  By using GitHub, you make it easier to get excellent documentation. Their help section and guides have articles for nearly any topic related to Git that you can think of.
3. Integration options
  
  GitHub can integrate with common platforms such as Amazon and Google Cloud, with services such as Code Climate to track your feedback, and can highlight syntax in over 200 different programming languages.
4. Track changes in your code across versions
  
  When multiple people collaborate on a project, it’s hard to keep track of revisions — who changed what, when, and where those files are stored.
  
  GitHub takes care of this problem by keeping track of all the changes that have been pushed to the repository.
5. Showcase your work
  
  Are you a developer who wishes to attract recruiters? GitHub is the best tool you can rely on for this. Today, when searching for new recruits for their projects, most companies look at GitHub profiles. If your profile is available, you will have a higher chance of being recruited even if you are not from a great university or college.

Get Started with GitHub

To create your account, you need to go to GitHub's website and fill out the registration form.

Let's Git

Creating Remote Repo

Create a new repository on GitHub. Follow this link.

Step 1: Click on new

Step 2: Click on create repository

Give your repository a name, and description(optional), choose if you want to make it a public or a private repo(only you and the people you give access can see a private repo), and you can also add a readme and a license if you want. Otherwise, leave all that options as it is and click create repository.

✨Your repo is created
Creating Local Repo

I have created a folder on my desktop called git-and-github-tutorial. Using the command line, navigate to your new project's location. For me, I would run the following commands:
```
  $ cd Desktop/git-and-github-tutorial
```
If you are new to the command line and are still learning how to use it to navigate around your PC, then I would suggest using Microsoft's Visual Studio Code. It is a code editor which has an inbuilt terminal for executing commands. You can download it here.

After installing VS Code, open your project in the editor and open a new terminal for your project. This automatically points the terminal/command line to your project's path.
Initialize Git

Git is present in your system, but it is sleeping and it'll remain asleep until you'll wake him up. To wake him up and tell him to start working on a project, you have to use a command inside that project folder in the command prompt.

To wake Git up, the command is:
```
  $ git init
```
Running this command would initialize an empty Git repository in the current directory. A new subfolder named .git is created which contains several files and more subdirectories that Git will use to keep track of changes in the project.
Git Project Files

Let’s create the first file that we will be tracking using Git. Ensure you are still in the git-and-github-tutorial directory on your terminal, then run the following command:
```
  touch sample.txt
```
This will create a file named sample with the .txt extension.

Open the file in your editor and add the following lines to it:
```
  This is sample text.
```
Save and close this file.
Add files to the Staging Area for commit:

Now to add the files to the git repository for commit:
```
  $ git add .
```
The above command Adds all the files in the local repository and stages them for commit

OR if you want to add a specific file like this:
```
  $ git add sample.txt
```
Before we commit let’s see what files are staged:
```
  $ git status
```
The above command will list all new or modified files to be committed.
Commit Changes you made to your Git Repo:

Next, you need to make a commit with an accompanying commit message. Commit messages are short descriptive messages describing what changes were made.

Let’s commit the file that’s currently staged by running the following command: git commit -m "add sample.txt"
```
  git commit -m "add sample.txt"
```
This command saves a new commit with the message “add sample.txt”. Now, when you run git status, you will get a message indicating that your working tree is clean (no modified or untracked files).
Way to Uncommit Changes you just made to your Git Repo:

Now suppose you just made some error in your code or placed an unwanted file inside the repository, you can unstage the files you just added using:
```
  $ git reset HEAD~1
  # Remove the most recent commit
  # Commit again!
```
Ignoring Files

Sometimes there are untracked files that you would not like to add to your git index. These may be user-specific configuration files, like a .env file, or folders with large files, like the vendor folder for PHP projects or node_modules in JavaScript projects.

You can instruct git to ignore these files by adding glob patterns to a .gitignore file. This file will live in your project’s root directory and can contain any number of patterns. Any untracked file or folder that matches a pattern specified in the .gitignore file is ignored by git.

So in the above example, files like pycache, .DS_Store are used by the system to store information for faster access. This is not useful for other collaborators. So we can tell git to ignore them by adding a .gitignore file.

Use the touch command to create the .gitignore file:
```
  $ touch .gitignore
```
And you can add the following patterns to tell git to ignore such files.
```
  /*.cmake
  /*.DS_Store
  /.user
  /build

  # Config files
  .env
  .env.local
  /.vscode

  # Large folders
  /node_modules
  /vendor
```
Each line in a .gitignore file specifies a pattern. Lines that begin with a # sign are comments. The patterns here are similar to what you would typically see in a PHP or JavaScript project.

The following are examples of patterns used in a .gitignore file:
- *.env matches all files with a .env extension
- /vendor matches the folder named vendor, as well as its subfolders and files

build_output.log would match the .log file named build_output.
Connect Remote Repo with Local Repo:

Now each time you make changes in your files and save them, they won’t be automatically updated on GitHub. All the changes we made in the file are updated in the local repository. Now to update the changes to the master:
```
   $ git remote add origin remote_repository_URL
   # sets the new remote
```
The git remote command lets you create, view, and delete connections to other repositories.
```
  $ git remote -v
  # List the remote connections you have to other repositories.
```
The git remote -v command lists the URLs of the remote connections you have to other repositories.
Pushing code to GitHub

Once we have added the remote repository URL to our local one, we will want to push or upload our local code and its revision history to the remote repository. This can be done using git push.

The git push command will update the remote repository code with all the updates that were made in the local repository.

First, commit the .gitignore file we created earlier.
```
  git add .
  git commit -m "add .gitignore"
```
You can run the following command to push your code to the remote repository:
```
  git push -u origin master
```
And there you have it. You have successfully pushed your code to a remote repository.

How to Use Branches in Git

Git branching is a very powerful feature and an important one to know. We talked about Git's superpower to create identical copies of your project, and allow you to work on them separately; Git achieves this through branching.

With branches, you can create a copy of a file you would like to work on without messing up the original copy. You can either merge these changes to the original copy or just let the branch remain independent.

Before we go into using branches, I want to show you a visual representation of our repo which looks like this:

The image above shows our main branch with the last two commits (add sample.txt and the add .gitignore commit).

At this point, I want to make more changes but I am not yet sure whether I want them on main code. So I will create a new branch called test to see how would project look like with new changes.

To check branches in your project:

git branch

To create a new branch, run this command:

git checkout -b test.

I will break it down. checkout tells Git it is supposed to switch to a new branch. -b tells Git to create a new branch. test is the name of the branch to be created and switched to.

Now that we have a new branch created, this is what our repo will look like:

We created the new branch from the state of our last commit. Let's let's make some changes to this new branch.

touch README.md
git commit -am "Add README file"

To merge the new state to the main branch, you have to first stage and commit this branch. I will not go into details about how to do this as we did it twice in the last section.

You should try doing it yourself so you understand how it works. As a hint, add the file and then commit with a message (refer to the previous section for details showing you how to do that).

After committing your test branch, switch back to the main branch by running this command:

git checkout main.

Did you notice that we did not add -b ? This is because we are not creating a new branch but rather switching to an existing one.

Now we can merge the changes we made in the test branch into the main branch by running git merge test. At this point, you will see all the changes made in the test branch reflected on the main branch.

Here is a visual representation of our repo:

If you go on to push your repo to GitHub, you'll see that the test branch will not be pushed. It will only remain in your local repo. If you would like to push your test branch, switch to the branch using git checkout test and then run git push -u origin test.

Open-Source Tips

Always make a separate branch when you working with a new feature or fixing a bug in someone's else repository.
HEAD : It's just a pointer that means all the commits that you've made will be added on the head(the new branch).
To check when someone else commits to the main branch.
```
  git checkout main
```
For merging your code with the main code.
```
  git merge [branch-name]
```
For copying existing organization project use fork for that

clone that project in your repository.

  git clone [URL] (paste the URL of the forked project)

upstream URL: It's the URL from where you've forked the project.
```
  git remote add upstream [URL]
```
To make changes in the upstream (original project)

make a new branch
```
  git checkout -b [new-branch]
```
For making changes in the original project of the organization we use pull request.
NOTE: One Branch for One pull request We always make a new branch to make it easier to review our commit to the original project.

Bonus Section - Important Git Commands

git init

Initializes an existing directory as Git repository (.git directory).

git init

**git clone **

Retrieve an entire repository from a hosted location via URL.

git clone [url]

git add

add a file to your next commit(stage).

git add [file]

git rm

Deletes the file from project and stages the removal for commit.

git rm [file]

git mv

Changes an existing file path and stages the move.

git mv [existing-path][new-path]

git commit

Commits the staged contents as a new commit snapshot.

git commit -m "your commit message goes here"

git branch

List, Create or, Delete Branches(branches looks like an acyclic graph)

List branches
```
  git branch
```
Create a new Branch at the current commit
```
  git branch [branch-name]
```
Delete a Branch
```
  git branch -d[branch-name]
```

git status

Shows the paths of modified files in working directory.

git status

git diff

Show changes between commits.

to see diff of what is changed, but not staged
```
  git diff
```
to see diff of what is staged, but not commited
```
  git diff --staged
```
to see diff between 2 branches
```
  git diff BranchA...BranchB
```

git log

Shows the commit history for the currently active branch.

git log

git checkout

Switch Branches. Switch to another branch and, check it out into your working directory .
```
  git checkout [branch-name]
```
Switch to another branch(create if does not exist)
```
  git checkout -b [branch-name]
```

git merge

For joining two or more development histories together.

git merge [branch]

git fetch

Fetch branches and/or tags from one or more other repositories.

git fetch [alias]

You can use git fetch to know the changes done in the remote rep/branch since your last pull.

git pull

Fetch and merge any commits from the tracking of a remote branch.

git pull

git push

For making changes in your repository
```
  git push origin [branch-name]
```
Transmit local branch commits to the remote repository branch.
```
  git push [alias]
```

git rebase

Applies any commits of the current branch ahead of the specified one. It is used if you need to rewrite the history of a project.

git rebase [branch-name]

git revert

Reverts some existing commits.

git revert

git reset

If you want to delete the commits.
```
  git reset [hashcodeId]
```
you can get "haschodeId" by running git log (NOTE: the commits deleted will be in an unstaged area)
Resets current HEAD to the specified state.

Unstages a file while retaining the changes in working directory.
```
  git reset [file]
```
(NOTE: the commits deleted will be in unstaged area)
Clears staging area, rewrites working tree from specified commit.
```
  git reset --hard[commit]
```

git stash

Temporarily stores modified, tracked files in order to change branches. It's used when you don't want to commit your working files but wants to store them temporarily.

Save modified and staged changes
```
  git stash
```
List StackOrder of stashed file changes
```
  git stash list
```
Write working from the top of the stash stack or bring your temporarily stored files.
```
  git stash pop
```
Discard the changes from top
```
  git stash drop
```
For deleting temporary stored, modified, and tracked files.
```
  git stash clear
```

git remote

For adding the URL of your repository to your project
```
  git remote add origin [URL]
```
Remote means you're working with URLs and origin is the name of the URL.
Shows all the URLs attached with your project
```
  git remote -v
```

In closing

I hope that you’ve found this tutorial helpful...! If you have any questions or feedback, feel free to leave a comment below.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.

Other Resources

Check out some of these resources for a more in-depth look into Git and GitHub :

Want more..?

I write articles on blog.yntp.me, and also post development-related content on the following platforms:

Mastering CSS Position in 2022.

Akash Kadlag — Fri, 29 Jul 2022 13:03:41 GMT

Confused with CSS Position...?

In this article, I will be breaking down all CSS position properties and explaining everything you need to know about them. This includes even the more obscure concepts related to the position that most articles/videos ignore.

Prerequisite

To get the most out of this article, we need the following:

Basic understanding of HTML.
Basic understanding of CSS. (check out CSS Selctors)
Visual studio code or any IDE of our choice to code along.

CSS Positions

When building a webpage, there can be multiple elements on our page, each with their own positions, uses, and designs. It’s important to learn how we can arrange these elements and have control over their layout.

The position property in CSS determines how an element is positioned in a document. It specifies the type of positioning method for each element.

Values of CSS Positions

The position property can have any of these values:

static
absolute
relative
fixed
sticky

You can also specify the value of inherit, which means the value is determined from the parent element. The position value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.

Placement Properties

Position property on its own is not that useful. It only says how the position should be calculated. For example, relative to the normal position of an element.

But we also need to define where exactly the element should be placed, not only how. There are several properties we can use for that.

top
left
right
bottom
z-index

These define how much the element's position should be adjusted and in which direction.

Normal Flow

Before going into details, let's see how these elements automatically get their position on your page. To understand this, you need to understand the normal flow of the web page. Normal flow is how the elements are arranged on a page if you haven't changed their layout.

There are two types of elements on a web page. Block-level elements and inline elements.

Block-level elements such as

are contained on their own line. Because block-level elements start with a line break, two block-level elements can't exist on the same line without styling.

Inline elements such as , , , don't form their own blocks. Instead, they are displayed within lines. They line up next to one another horizontally; when there isn't enough space left on the line, the content moves to a new line.

Static Position

position: static is the default value provided by HTML. This means if we don’t declare position for an element in CSS, it will automatically be set to static.

Even though it is a default value, it can sometimes be useful to set it explicitly. For example, to override different position value, which is set elsewhere.

Elements that are statically positioned will follow the normal document flow and will position itself based on the standard positioning rules.

Unlike with other position values, when using static, placement properties such as top, left, bottom, right, or z-index have no effect.

Example to illustrate Static Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">
      One <br>
      position:static <br>
      top: 50px ( this has no effect )
   div>
    <div class="two">Twodiv>
    <div class="three">Threediv>
div>

And here’s the CSS we’re using:

.parent { 
   // No position set, so it's static 
} 
.one { 
   // No position set, so it's static 
   top: 50px; 
}

However, here is how it will look on a webpage:

View original code in Codepen

Since both elements have a static position, none of the layout CSS properties will do anything. This makes the top property have no effect on how the element with class="one" is displayed.

Relative Position

Relative position means that the element is placed relative to its original position in the page. A relative position element works exactly the same as static position, but you can now add z-index, top, left, right, and bottom properties to it.

If you make an element relative positioned without setting any of these extra properties you will notice it looks exactly the same as a static positioned element. This is because relative positioned elements also follow the normal document flow, but you can offset them using the top, left, right, and bottom properties.

Example to illustrate Relative Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">Onediv>
    <div class="two">Twodiv>
    <div class="three">Threediv>
div>

And here’s the CSS we’re using:

.one {
  position: relative;
  top: 15px;
  left: 15px;
}

However, here is how it will look on a webpage:

View original code in Codepen

As a result of an element being moved from its original position, there can be a situation, where multiple elements overlap each other. Fortunately, with z-index property, you can control which elements should be in the front and which in the back. We'll discuss this in more detail later.

Only relative position is not that useful as you do not usually want to offset an element without also moving all the elements around it. The main use cases for position relative are to either set the z-index of the element, or to be used as a container for absolute positioned elements which we will talk about next.

Absolute Position

The absolute position completely removes the element from the normal document flow. If you give an element position absolute all other elements will act as if the absolute positioned element doesn't even exist.

An element using position: absolute is positioned relative to the nearest ancestor. In other words, an element with position: absolute is positioned relative to its parent element.

If an element doesn’t have a parent element, it’s placed relative to its initial containing block. It can then be positioned by the values of top, right, bottom, and left.

Note : If we don’t specify helper properties, it’s positioned automatically to the starting point (top-left corner) of its parent element.

Example to illustrate Absolute Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">Onediv>
    <div class="two">Twodiv>
    <div class="three">Threediv>
div>

And here’s the CSS we’re using:

.parent {
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  right: 0;
}

However, here is how it will look on a webpage:

View original code in Codepen

By setting the blue parent element to a position of relative I am now forcing the absolute positioned child one element to be in the top right corner of the parent instead of the body. This combination of relative and absolute positions is incredibly common.

Fixed Position

The fixed position is a bit like absolute position in that it removes the element out of the normal flow, but fixed position elements are always positioned in the same place in the viewport (what’s visible on screen). This means that scrolling will not affect its position at all.

Example to illustrate Fixed Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">Onediv>
    <div class="two">
       Two <br>
       Ha ha! Scrolling can't get rid of me!!
    div>
    <div class="three">Threediv>
div>

And here’s the CSS we’re using:

.two {
  position: fixed;
  top: 0;
  right: 0;
}

However, here is how it will look on a webpage:

https://codepen.io/KadlagAkash/pen/PoRKEMG

View original code in Codepen

The pink fixed element will stay positioned at the top and right corner of the viewport. And if you scroll, the blue parent element and other child elements will scroll up normally, but the pink element will remain stuck to where we positioned it.

Tip: A fixed element must have a top or bottom position set. If it doesn’t, it will simply not exist on the page at all.

You have to be careful with fixed position usage. On a mobile device with a small screen, it can be a big deal if a large portion of your screen is always covered with a navigation bar or something similar. It dramatically reduces space for the actual content of your page and can significantly limit usability.

Sticky Position

The sticky position is a combination of both fixed and relative position and combines the best of them both.

An element with position sticky will act like a relative positioned element until the page scrolls to a point where the element hits the top, left, right, or bottom value specified. It will then act like a fixed position element and scroll with the page until the element gets to the end of its container.

In other words, elements set with position: sticky are positioned based on the user’s scroll position.

As of this writing, it is currently an experimental value, meaning it is not part of the official spec and is only partially adopted by select browsers. In other words, it’s probably not the best idea to use this on a live production website.

Example to illustrate Sticky Position :

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">Onediv>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    div>
    <div class="three">Threediv>
div>

And here’s the CSS we’re using:

.two {
  position: sticky;
  top: 0;
}

However, here is how it will look on a webpage:

https://codepen.io/KadlagAkash/pen/eYMEQJm

View original code in Codepen

sticky position is the perfect position for navbars that scroll with the page, headings in long lists, and many other use cases.

Z-index

When working with position other than static, elements can easily appear in position, where they overlap each other.

This is where the z-index property comes in. When you have elements overlapping, we use z-index to stack them. It controls the position of your elements on the z-axis.

You can use z-index like this:

 z-index: 1;

The z-index gives you the ability to decide how the elements should overlap each other, in which order. If you give a higher z-index value, that particular element will appear closer to the viewer. In other words, it will appear on top of the other elements.

Example to illustrate Z-index:

We are using the following HTML markup:

<div class="parent">
    Parent
    <div class="one">Onediv>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    div>
    <div class="three">Threediv>
div>

And here’s the CSS we’re using:

.first{
  z-index: 3;
}

.second{
  z-index: 2;
}

.third{
  z-index: 1;
}

.four{
  /* No z-index */
}

.fifth{
  z-index: -1;
}

However, here is how it will look on a webpage:

https://codepen.io/KadlagAkash/pen/jOzLQGg

View original code in Codepen

Summary

Let's sum it up. The position property allows you to determine how elements should be placed on the page.

You can define the exact location using top, bottom, right and left properties.

In case your elements overlap each other, you can change their order using z-index. The higher the index, the closer is the element to the user.

static

Default value
Positioning as usual, same as if you didn't specify the position

relative

The element is placed relative to its normal position on the page
The place occupied by the element is preserved at its original location

absolute

The element is removed from the normal flow and does not occupy space
The location is determined relative to the first parent set position (other than static)
If there is no such parent, it is determined relative to the whole page.

fixed

The element is removed from the normal flow and does not occupy space
The location is determined relative to the viewport
Elements keep their locations as you scroll

sticky

Elements are positioned relatively until you reach them by scrolling
Then the elements stick to one location, similar to fixed positioning
Not supported by all the browsers, you can check out the current support on CanIUse.com.

In closing

I hope that you’ve found this tutorial and code examples on CSS positioning helpful...! If you have any questions or feedback, feel free to leave a comment below.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.

Other Resources

Check out some of these resources for a more in-depth look into CSS Positions :

Want more..?

I write articles on blog.yntp.me, and also post development-related content on the following platforms:

Mastering CSS & CSS3 Selectors in 2022.

Akash Kadlag — Tue, 26 Jul 2022 10:06:45 GMT

Save time searching for the CSS selectors.

This blog will look at the different types of CSS selectors and how we can use them to build efficient CSS code.

Prerequisite

To get the most out of this article, we need the following:

Basic understanding of HTML.
Visual studio code or any IDE of our choice to code along.

CSS Selectors

CSS selectors are the opening part of a CSS ruleset. CSS Selectors are used to targeting specific elements on the web page.

CSS selectors are case-sensitive. They must match element names and attribute values precisely. For Example, .logo class selector is not the same as .LOGO.

It is advisable to use small letters to avoid making mistakes.

The syntax for CSS Selector is:

selector {
   CSS-property: value;
}

Types of CSS Selectors

Basic Selectors
Combination Selectors
Attribute Selector
Pseudo Element Selector
Pseudo Class Selector

Basic CSS Selectors

Basic CSS selectors are the most common type of CSS selectors. They style specific elements on a website. In basic selectors, we have selectors such as:

Universal Selector

I refer to this selector as the god selector, the mother of all selectors, one selector to rule them all. That is how powerful it is.

The universal selector selects every tag on the page so we can style every tag or element with one rule.

The asterisk (*) character represents Universal selectors.

The syntax for Universal Selector is:
```
  * {
    CSS-Property: value;
  }
```
Example of Universal Selector:
```
  * {
    margin: 0;
    padding: 0;
    outline: 0;
  }
```
In the above ⬆️ example, we override the default styling applied by browsers.
Element Type Selector

Type Selectors are the most common basic CSS selectors. They select HTML elements based on the element name.

The Element type selector selects all instances of a tag or element on a page.

The syntax for Element Type Selector is:
```
  element {
   property: value;
  }
```
Example of Element Type Selector:
```
  p {
  text-align: center;
  font-size: 20px; 
  }
```
In the above ⬆️ example, all paragraph
elements will align to the center, and have a font size of 20px.

However, here is how it will look on a webpage:

https://codepen.io/KadlagAkash/pen/OJvjaqG

View original code in Codepen

Class Selector

The class selector is probably the most useful and versatile selector. The class selector is best used when you want to reuse a style for multiple elements.

To select elements with a specific class, write a period (.) character, followed by the class name.

The syntax for Class Selector is:
```
 .class-name {
 property: value;
 }
```
Example of Class Selector:

In the example below ⬇️ the
element has a class="text"
```
 Text goes here....p>
```
To select the
element using the CSS class selector, we:
```
 .text {
 text-align: center;
 font-size: 20px; 
 color: skyblue;
 }
```
All HTML element with class="text" will align to the center, have blue text color and a font-size of 20px.

However, here is how it will look on a webpage:

%[https://codepen.io/KadlagAkash/pen/xxWLQoP]

View original code in Codepen
ID Selector

ID attributes are specific to one element only. The ID selector identifies an element based on its ID attribute.

To select an element with a specific ID, write a hash (#) character, followed by the element's ID.

This selector is the most powerful in terms of CSS Specificity.

The syntax for ID Selector is:
```
  #id-name {
   property: value;
  }
```
Example of ID Selector:

In the example below ⬇️, the
element has an id="tagline"
```
  Tagline goes here....
```
To select the element using the ID selector, we: css #tagline { text-align: center; font-size: 25px; font-style: italic; color: red; letter-spacing: 2px; }
In the example above ⬆️, the CSS rule will apply to the HTML element with id="tagline".

However, here is how it will look on a webpage: %[https://codepen.io/KadlagAkash/pen/WNzELNv]

View original code in Codepen

\> Use ID selectors rarely and only on elements that need always to appear the same.

Combination CSS Selectors

Combination Selectors select elements based on a specific relationship between them. In Combination selectors, we have selectors such as:

Descendant Selector

Descendant selectors match all elements that are descendants of a specified element. Descendant selectors select the children, grandchildren, etc., when used.

It uses the white space as a separator between the elements.

The syntax for Descendant Selector is:
```
 selector1 selector2 {
 property: value;
 }
```
Example of Descendant Selector:

In the example below ⬇️, the
element has multiple nested
elements.
```
 <div>
 Paragraph 1p>
 
 Paragraph 2.1p>
 Paragraph 2.2p>
 p>
 Paragraph 3p>
 div>
```
To select all
elements using the descendant selector, we use:
```
 div p {
 text-align: center;
 font-size: 20px;
 font-style: italic; 
 color: teal;
 }
```
In the example above ⬆️, the CSS rule will apply to the
child elements of
.

However, here is how it will look on a webpage:

%[https://codepen.io/KadlagAkash/pen/mdxMaQy]

View original code in Codepen
Direct Child Selector

Direct Child Selector selects all the specified direct children of the parent.

Like a descendant selector, the direct child selector is for selecting child elements. Still, the main difference is the direct child selector will only select an element that is the direct child of the first parent selector.

We use the greater-than sign (>) character to represent a child selector.

The syntax for Direct Child Selector is:
```
 Parent-selector > Child-selector {
 property: value;
 }
```
Example of Direct Child Selector:

In the example below ⬇️, the
element has multiple nested
elements.
```
 <div>
 Paragraph 1p>
 
 Paragraph 2.1p>
 Paragraph 2.2p>
 span>
 Paragraph 3p>
 div>
```
To select all
elements using the direct child selector, we use:
```
 div > p {
 text-align: center;
 font-size: 20px;
 font-style: italic; 
 color: lightgreen;
 }
```
In the example above ⬆️, the CSS rule will apply to the only
elements that are a direct child of
.

However, here is how it will look on a webpage:

%[https://codepen.io/KadlagAkash/pen/BardvEL]

View original code in Codepen
Adjacent Sibling Selector

The Adjacent sibling selects an element directly after another specific element.

In other words, this selector selects the elements that follow and share the same parent. They must immediately follow each other.

The tilde (+) character represents adjacent sibling selectors.

The syntax for Adjacent Sibling Selector is:
```
  first-sibling-selector + second-sibling-selector {
   property: value;
  }
```
The second sibling element comes after the first sibling element and it's the targeted element. The targeted element is the element you intend to style.

Example of Adjacent Sibling Selector:

In the example below ⬇️ the
element has
elements and

Your Next Tech Partner

Git & Github: A Beginner's Guide

Crash Course Overview

Prerequisite

What is Version Control System...?

Types of VCS

What is Git...?

Why you should learn and use git?

Git Workflow

Get started with Git

Installing Git

First time Configuration

What is GitHub...?

Why you should learn and use GitHub?

Get Started with GitHub

Let's Git

Creating Remote Repo

Creating Local Repo

Initialize Git

Git Project Files

Add files to the Staging Area for commit:

Before we commit let’s see what files are staged:

Commit Changes you made to your Git Repo:

Way to Uncommit Changes you just made to your Git Repo:

Ignoring Files

Connect Remote Repo with Local Repo:

Pushing code to GitHub

How to Use Branches in Git

Open-Source Tips

Bonus Section - Important Git Commands

In closing

Other Resources

Want more..?

Mastering CSS Position in 2022.

Confused with CSS Position...?

Prerequisite

CSS Positions

Values of CSS Positions

Placement Properties

Normal Flow

Static Position

Relative Position

Absolute Position

Fixed Position

Sticky Position

Z-index

Summary

In closing

Other Resources

Want more..?

Mastering CSS & CSS3 Selectors in 2022.

Save time searching for the CSS selectors.

Prerequisite

CSS Selectors

Types of CSS Selectors

Basic CSS Selectors

Universal Selector

Element Type Selector

Class Selector

ID Selector

Combination CSS Selectors

Descendant Selector

Direct Child Selector

Adjacent Sibling Selector

General Sibling Selector

Or Selector

And Selector

Attribute CSS Selectors

Has Attribute

Exact Attribute

Begins With Attribute

End With Attribute

Substring Attribute

Pseudo Element Selectors

1. Textual Pseudo Elements

First-Letter Selector

First-Line Selector

2. Generated Content Pseudo Elements

Before Selector

After Selector

and two
elements. ```html

and two
element. ```html