Learn how to create a Google search page clone using HTML and CSS in this beginner-friendly tutorial. Follow step-by-step instructions to build your own web development project.
Table of Contents
We've all seen the Google homepage on our computers when we're surfing the web. What if that same site was made with CSS? Now it can be! Not only will you be able to learn about HTML and CSS for future projects, but you'll also be able to see how practical it is for having your own Google, LOL.
In this tutorial, you'll learn how to create a Google search page clone using HTML and CSS. This beginner-friendly tutorial is perfect for anyone who is just starting out with web development and wants to learn how to create a simple project using these two programming languages.
By the end of this tutorial, you'll have a better understanding of how HTML and CSS work together to create a functional website, and you'll have a cool new project to show off to your friends and colleagues.
Let's start making an amazing google clone using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Google search page clone.
The document includes several elements such as the <!DOCTYPE HTML> declaration, which specifies the version of HTML being used, and the <html> tags which define the start and end of the document. The <head> section includes metadata about the document such as the title, character encoding, and links to external files such as a CSS file with the href attribute.
The <body> section includes the visible content of the web page, which can include various elements such as headings, paragraphs, images, links, and more. The code snippet also includes a <header> element, which is a section that typically appears at the top of the page and can include branding, navigation links, and other content.
The <ul> element is an unordered list, which contains a series of <li> elements that define each item in the list. In this case, the list is part of the top bar and includes links to Gmail and Images. The code also includes an SVG graphic with the path elements that define the shape of the image.
Overall, HTML provides a structured way to organize and present content on the web, and this example illustrates some of the basic building blocks of an HTML document.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our Google search page clone using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the Google search page clone is in place, the next step is to add styling to the Google search page clone using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our Google search page clone. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our Google search page clone an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
font-family: arial,sans-serif;
margin:0;
font-size: 13px;
}
header .topBar{
text-align: right;
padding: 5px;
font-size: 12px;
color: rgba(0,0,0,.54);
}
header .leftOptions li{
display: inline-block;
margin-right: 12px;
vertical-align: middle;
}
header .leftOptions li a{
text-decoration: none;
color: #0f0f0f;
}
header .leftOptions input{
border: 1px solid #4285f4;
font-weight: bold;
outline: none;
background: #4285f4;
background: -webkit-linear-gradient(top,#4387fd,#4683ea);
background: linear-gradient(top,#4387fd,#4683ea);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4387fd,endColorstr=#4683ea,GradientType=0);
padding: 6px 12px;
font-size: 10px;
color: white;
border-radius: 1px;
}
header .leftOptions input:hover{
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.15);
box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.topBarIcon{
display: inline-block;
position: relative;
height: 14px;
width: 14px;
vertical-align: middle;
}
.topBarCircle{
height: 50px;
width: 50px;
}
section .searchArea{
text-align: center;
margin-top: 55px;
}
section .searchArea .logo img{
height: 72px;
}
section .searchArea .searchBox{
display: flex;
}
section .searchArea .searchBox .searchBar{
width: 120px;
flex: 1;
align-self: center;
}
section .searchArea .searchBox .searchBar .search{
background: #ffffff;
border: 1px solid #dfe1e5;
box-shadow: none;
border-radius: 24px;
z-index: 3;
height: 32px;
margin: 15px auto;
width: auto;
padding-left: 10px;
padding-right: 10px;
}
section .searchArea .searchBox .searchBar .search input{
border: none;
background-color: transparent;
margin: 0;
padding: 0;
color: rgba(0,0,0,.87);
word-wrap: break-word;
outline: none;
-webkit-tap-highlight-color: transparent;
height: 100%;
width: 24em;
font-size: 16px;
}
section .searchArea .searchBox .searchBar .search:hover{
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
border-color: rgba(223,225,229,0);
}
section .searchArea .searchButtons button{
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
color: #5F6368;
font-family: arial,sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 30px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
}
section .searchArea .searchButtons button:hover{
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
background-color: #f8f8f8;
border: 1px solid #c6c6c6;
color: #222;
}
section .searchArea .languageBar{
margin-top: 20px;
font-size: 9pt;
}
section .searchArea .languageBar a{
margin-left: 5px;
}
.inlineDisplay{
vertical-align: middle;
display: inline-block;
}
.searchIconSize{
height: 18px;
width: 18px;
}
.voiceIconSize{
height: 20px;
width: 20px;
}
.voiceIconSize:hover{
cursor: pointer;
}
footer .footerData{
position: absolute;
bottom: 0;
background: #f2f2f2;
line-height: 30px;
border-top: 1px solid #e4e4e4;
min-width: 400px;
width: 100%;
font-size: 9pt;
color: rgba(0,0,0,.54);
}
.leftText, .rightText{
display: inline-block;
}
.footerData .countryBar{
margin-left: 30px;
}
footer .footerBottom{
border-top: 1px solid #e4e4e4;
}
footer .footerBottom a{
text-decoration: none;
color: rgba(0,0,0,.54);
margin-left: 30px;
}
footer .footerBottom .rightText{
float: right;
margin-right: 30px;
} Final Output:
Conclusion:
Congratulations on completing this tutorial on how to create a Google search page clone using HTML and CSS! By now, you should have a better understanding of how HTML and CSS work together to create a functional website.
Don't forget to take what you've learned here and apply it to your own web development projects. The more you practice, the better you'll get!
If you have any questions or need further assistance, don't hesitate to reach out to the web development community. There are many resources and forums available to help you on your journey.
Thank you for following along with this tutorial, and we hope you found it helpful and informative. Good luck with your future web development endeavors!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
