The Google Search Page in HTML & CSS is one of the most common beginner projects for aspiring web developers. It’s a great exercise that helps you understand basic layout techniques, positioning, and responsive design using only HTML and CSS. In this post, we’ll walk through creating a simple yet visually accurate clone of the Google homepage using clean, semantic code.
1. Why Recreate the Google Search Page?
Recreating well-known websites is a popular method to improve your frontend skills. The Google homepage is minimalistic but polished, making it ideal for learning the following:
- HTML5 structure and semantics
- CSS Flexbox or Grid for layout
- Centering elements vertically and horizontally
- Responsive design basics
2. Tools You’ll Need
Before we begin, here are the tools and technologies needed:
- A code editor (like VS Code, Sublime Text, or Atom)
- A modern web browser (such as Chrome or Firefox)
- Basic knowledge of HTML & CSS
No JavaScript or frameworks are required for this tutorial.
3. HTML Structure
Here’s a simple HTML boilerplate for the Google search page layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<section>
<nav>
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><a href="#"><img src="../img-folder-name/google-apps.png" class="bars"></a></li>
<li><a href="#"><img src="../img-folder-name/your-profile.jpg" class="profile"></a></li>
</ul>
</nav>
<!-- Navbar Ended -->
<div class="search-area">
<img src="../img-folder-name/google-logo-image.png" alt="">
<div class="search">
<img src="../img-folder-name/Searc-Icon.jpg" class="icons">
<input type="text" name="" id="" placeholder="Search Google or type a URL">
<img src="../img-folder-name/Mic-image.jpg" class="icons">
</div>
<div class="buttons">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
<div class="languages">
<span>Goolgle Offered in: </span>
<a href="">Soomaali</a>
<a href="">العربية</a>
</div>
</div>
<!-- Search area Ended -->
<div class="footer">
<div class="rows">
<div class="row1">
Somalia
</div>
<hr>
<div class="row2">
<div class="left">
<a href="">About</a>
<a href="">Advertising</a>
<a href="">Business</a>
<a href="">How Search Works</a>
</div>
<div class="right">
<a href="">Privacy</a>
<a href="">Terms</a>
<a href="">Settings</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>4. CSS Styling
Now let’s add the CSS to style the page like the real Google homepage:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
section{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: #202124;
}
section nav{
display: flex;
justify-content: flex-end;
position: absolute;
top: 15px;
right: 18px;
}
section nav ul{
display: flex;
align-items: center;
}
section nav ul li{
list-style: none;
margin-left: 20px;
}
section nav ul li a{
display: flex;
justify-content: center;
text-decoration: none;
font-size: 13px;
color: #fff;
}
section nav ul li a:hover{
color: #6495ed;
}
section nav ul li a .bars{
margin-left: 15px;
width: 20px;
}
section nav ul li a .profile{
width: 35px;
border-radius: 50%;
}
section .search-area{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 600px;
}
section .search-area .search{
width: 100%;
height: 50px;
border-radius: 30px;
margin: 15px;
display: flex;
justify-content: space-between;
border: 1px solid #303134;
}
section .search-area .search:hover{
background: #303134;
}
section .search-area .search .icons{
width: 20px;
margin: 15px;
cursor: pointer;
}
section .search-area .search input{
width: 100%;
border: none;
outline: none;
font-size: 15px;
color: #fff;
background: transparent;
}
section .search-area .buttons button{
padding: 10px 15px;
margin: 12px 8px;
background: #303134;
color: #fff;
border-radius: 3px;
cursor: pointer;
border: none;
font-size: 15px;
}
section .search-area .buttons button:hover{
outline: 1px solid #5f6368;
}
section .search-area .languages{
color: #fff;
font-size: 13px;
margin: 15px;
}
section .search-area .languages a{
text-decoration: none;
color: #6495ed;
margin-left: 10px;
}
section .search-area .languages a:hover{
text-decoration: underline;
}
section .footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background: #111;
transition: all 0.5s;
}
section .footer .rows{
display: flex;
flex-direction: column;
color: #84868d;
width: 100%;
}
section .footer .rows hr{
border: 1px solid #303134;
}
section .footer .rows .row1{
margin-top: 10px;
margin-left: 30px;
height: 35px;
}
section .footer .rows .row2{
margin: 15px 30px;
height: 35px;
display: flex;
justify-content: space-between;
}
section .footer .rows .row2 .left a, .right a{
margin-right: 15px;
text-decoration: none;
color: #84868d;
font-size: 15px;
}
section .footer .rows .row2 .left a:hover, .right a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 720px){
section .footer{
height: 130px;
}
section .footer .rows .row2{
flex-direction: column;
align-items: center;
}
section .footer .rows .row2 .right{
margin-top: 15px;
}
section .search-area{
width: 90%;
}
}5. Final Output
Once you link the HTML and CSS files together and open the HTML file in a browser, you’ll see a very similar look to the original Google homepage. This version is simple but captures the essential layout and interactivity.
6. Tips to Customize Further
To make this project more interactive or visually advanced, you can:
- Add a responsive design using media queries
- Integrate simple animations with CSS
- Use JavaScript to handle actual search behavior (optional)
7. Conclusion
Creating the Google Search Page in HTML & CSS is a great way to practice your frontend development skills. It’s simple, familiar, and gives you an immediate visual result. Projects like these help build muscle memory with HTML/CSS and boost your confidence to move on to more complex pages.
If you’re just starting out with web development, keep practicing by cloning other minimalist websites. Every line of code you write takes you closer to becoming a skilled developer.
