Learn CSS: Create the Git Logo

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Git logo:

• Transform to rotate an image
• position relative and absolute
• pseudo classes ::before and ::after

What we will be creating

We will create the Git logo in pure CSS. It will look like this:

Create our starter files

Let’s start by creating two files called index.html and style.css. In your index.html file add the following starter code:

In the style.css file add the following starter code:

body{ padding: 0; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: azure; }

Dissecting our Logo

The Git logo is an orange square that is rotated 45 degrees. Inside the square are two lines.

The first line reaches the edge of the square. It has a circle at the end of the line. It also has another circle in the middle of the line.

The second line runs vertically down the middle of the square. The line has a circle at the end.