Day 7 - Session 1: Cloning the Google Front Page with HTML & CSS

#programming #css #frontend #html

Hello, Coders!

Today in our Day 7 session, we worked on an exciting real-world project — cloning the Google front page using HTML and CSS. This helped us apply all the basic concepts we've learned so far in a practical way.

Project Goal:

Recreate the layout of Google’s homepage including:

The Google logo
The search bar with icons
Search and lucky buttons
Footer links

How We Started:

We first opened the real Google page and used Inspect Element to understand its structure. Then we planned our layout step-by-step:

Top section for the logo
Middle section for the search box and buttons
Bottom section for the footer links

Technologies Used:

HTML for the page structure
CSS for layout, alignment, and styling

We used:

flexbox for centering
input tags for text fields
Proper use of margin, padding, and box-shadow for styling.

Key Learning Today: How to Perfect the Input Box like Google

One of the most important things I learned today was how to create a clean and modern input box just like the Google search box.

We used:

border-radius for smooth corners
box-shadow for subtle 3D effect
Removed default borders and outlines
Added spacing and icons inside the input field using CSS

This gave a very professional and polished look to our search bar.

Current Progress:

1.Logo added and centered
2.Input box and buttons styled
3.Footer layout mostly complete
X-Final alignment and responsiveness left for homework.

My Code:
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
   </head>
<body>
    <header>
        <nav>
            <ul>
                <li>Gmail</li>
                <li>Images</li>
                <li class="menu-icon"><i class="fas fa-grip"></i></li>
                <li><img src="./Assets/googleid.jpg" alt=""></li>
            </ul>
        </nav>

    </header>
    <div class="main-layout">
        <img src="./Assets/google logo.png" alt="">
        <div class="search-box">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text">
            <i class="far fa-keyboard"></i>
            <i class="fas fa-microphone"></i>
            <i class="fas fa-search"></i>
        </div>
        <div class="search">
            <p class="g-under"><a href="">Google Search</a></p>
            <p class="g-side"><a href="">Lucky is my side</a></p>
        </div>
        <div class="language">
            <p>Google இதில் வழங்குகிறது: <a href="">English</a> <a href="">हिन्दी</a> <a href="">বাংলা</a> <a href="">తెలుగు</a> <a href=""> मराठी</a> <a href="">ગુજરાતી</a> <a href="">ಕನ್ನಡ</a> <a href="">മലയാളം</a> <a href="">ਪੰਜਾਬੀ</a></p>
        </div>
    </div>
</body>
</html>

css

<style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
        }
        header nav ul{
            list-style-type: none;
            display: flex;
            justify-content: end;
            align-items: center;
            gap:15px;
            margin:10px;
            /* border:1px solid gray; */
        }
        header nav ul .menu-icon{
            /* border:1px solid gray; */
            padding:3px 7px;
            border-radius: 50%;
        }
        header nav ul .menu-icon:hover{
            background-color: rgb(243, 232, 232);
        }
        header nav ul img{
            /* border:1px solid gray; */
            width:40px;
            height:40px;
            border-radius: 50px;
            padding:4px;
            margin-top: 3px;
        }
        header nav ul img:hover{
            background-color: rgb(243, 232, 232);
        }
        header nav ul li{
            text-decoration: none;
            font-size: small;
            color:rgb(53, 48, 48);
        }
        header nav ul li:hover{
            text-decoration: underline;
        }
        .main-layout img{
            width: 280px;
            height:20vh;
        }
        .main-layout{
            /* border: 1px solid gray; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        } 
        .main-layout .search-box{
            display: flex;
            justify-content: center;
            gap:20px;
            border:1px solid gray;
            padding:15px 30px;
            border-radius:25px;
            box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }
        .main-layout .search-box input{
            width: 350px;
            border:none;
            outline:none;
            font-size: 16px;
        }
        .main-layout .search{
            display: flex;
            gap:50px;
            margin-top: 35px;
            font-size: 13px;
        }
        .main-layout .search .g-under,.g-side{
            padding:8px 10px;
        }
        .main-layout .search .g-under:hover,.g-side:hover{
             border:1px solid rgb(233, 207, 207);
             border-radius: 5px;
        }
        .main-layout .search a{
            text-decoration: none;
            color:rgb(77, 65, 65);
        }
        .main-layout .language{
            margin-top: 35px;
            font-size: 13px;
            color:rgb(77, 65, 65);
        }
        .main-layout .language a{
            color:blue;
            padding-left: 8px;
            text-decoration: none;
        }
        .main-layout .language a:hover{
            text-decoration: underline;
        }
    </style>

What I Learned:

UI planning from a real website
Using flexbox to build layouts
Styling input boxes like a pro
Improving our confidence in HTML & CSS

Work in Progress...

Today, I was able to complete most parts of the Google front page layout — including the header, logo, input box, and buttons. However, the page is not fully finished yet. A few things are still pending, such as: