How To Make A Google Logo Using Simple HTML and CSS?

Google’s Logo Isn’t It Cool? Today we will learn to create Google’s Logo using HTML and CSS.

Creating a Google Logo will be a fun project for you as a beginner. You will learn to use pseudo-elements, CSS positions, and many more.

If you are a beginner in learning HTML & CSS then you can practice these it in your own.

We have divided this tutorial into two section i.e. Section A – HTML & Section B – CSS.

Section A focuses on how you structure your logo. Similarly, Section B helps you decorating google’s logo.

Before diving straight into the code section, first, create a new folder (with any name) in your local drive. Now, open the folder inside a text editor. Create an index.html page and style.css page.

Section A – Structuring With HTML

At First we will provide structure to our webpage using HTML.

Now, Inside your text editor open a page called index.html. Here you will create a div element with an id “logo”.

The next step is to link up the our stylesheet i.e. CSS file with the index page. To linkup your stylesheet use the “<link>” element as shown in the code snippets below.

<!DOCTYPE html>
<html>
    <head>
        <title>Google Logo Design - HTML & CSS</title>
        <link type="text/css" rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="logo"></div>
    </body>
</html>

Code Explained

The above code snippet contains HTML syntax. Using these markups we create structure for our webpage.

The code starts with a document type declaration which tells the web browser the version of HTML that the current page is using. Next, we have the root element “<html>” which is the entry point to our HTML journey.

Inside head element we have title and link. With the help of title tag we can provide a suitable title to our webpage.

Through link tag we can connect the stylesheet in our current webpage which helps in beautifying our webpage.

Wait! Want to enhance your web development career? Then I have prepared something especially for your. Please go through the article once.

3 Best Book To Learn Web Development For Beginners

Section B – Cascading Style Sheet

Section B is all about beautifying our webpage using Cascading Style Sheet(CSS). Once you are done with HTML you can copy the css from the code snippets below and paste it into your style.css file.

Once you finish writing the css, open the index.html page in the web browser where you will see “G” symbol as output.

#logo{
    position: relative;
    border-top: 100px solid #ea4335;
    border-right: 100px solid #4285f4;
    border-bottom: 100px solid #34a853;
    border-left: 100px solid #fbbc05;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    margin:  50px auto;
}

 #logo::before{
    content: "";
    position: absolute;
    top: 50%;
    right: -95px;
    transform: translateY(-50%);
    width: 235px;
    height: 100px;
    background: #4285f4;
} 

#logo::after{
    content: "";
    position: absolute;
    border-top: 200px solid transparent;
    border-right: 200px solid #fff;
    top: -100px;
    right: -100px;
    width: 0;
    height: 0;
} 

Code Explained

Do you remember that we provided div with the id “logo” in our index.html page. An id is represented by a hash character in-front of the name.

At first we will style the id attribute. Here we will specify the css properties like position, border, height, width & margin.

Next, we will style the pseudo-elements With the use of pseudo-elements we can style the specified parts of an element. Here “::after” & “::before” are the pseudo-elements. For both pseudo-elements, we will provide specific styles as in the above code snippets.

Video Tutorial On Creating Google Logo Using HTML & CSS

Don’t worry we have also prepared a video tutorial for you. You’re free to skip the above contents and get involved in our video tutorial.

This video tutorial is a code-lapse where you can see how these styles works when you save your code. Here we have presented two screen for your ease.

Once screen shows you the code snippets while the other displays the result.

Conclusion

Okay, this is how we create a Google’s Logo using HTML & CSS. If you have any other way to create the Logo please feel free to share with us.

Also, if you have any query regarding the post or any of the content that we created, please let us know.