Project Solution: Building the HTML Structure

I'm going to work on a Windows operating system for this project, just to show that the operating system doesn't matter when it comes to HTML coding. It only has an impact for server-side code such as Ruby on Rails and other programming languages, and not for front-end programming. To implement it on Windows, I'm using an editor called Visual Studio Code, but you can use anything that works for you.

To start off, I've created a directory called "Google", and inside this, I'm creating a file called "index.html".

large

In this file, we're going to start off with our basic HTML structure - <!DOCtype>, <head></head>, <body></body>. Let's call the title of this page as "Google clone." Much of our code is going to go inside our <body> tag.

If you switch back to the Google homepage, you'll see that it has three main components - header, content and footer. To implement it, let's use custom tags inside our <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <title>Google Clone</title>
    </head>

    <body>
        <header>          
        </header>

        <div id="content">
        </div>

        <footer>

        </footer>
    </body>
</html>

If you open this file on your browser, there's nothing in it yet except the title. However, if you right-click and choose "View page source" option, you'll see that it has all the code we've typed in so far.

Now, let's work on our header first. If you see there are three items, namely, Gmail, Images, and Sign in button on the Google homepage. To replicate this, we'll create an unordered list with an ID called "nav-right". Inside this list, we'll create three list items, like this:

<body>
  <header>
    <ul id="nav-right">
      <li>Gmail</li>
       <li>Images</li>
        <li>Sign In</li>
    </ul>          
  </header>

If you open it in the browser, you'll see three list items. Though they are nowhere close to Google, it's a good starting point.

Next, we're going to create links to "Gmail" and "Images", and here, we're simply going to have a "#" as the value for <a href> tag because we don't want it to go anywhere. Rather, we only want to create a hyperlink for now. The third item is going to be a button, and we're going to use an <input> tag for it.

<body>
  <header>
    <ul id='nav-right'>
      <li><a href="#">Gmail</a></li>
      <li><a href="#">Images</a></li>
      <li><input type="button" id="sign-in" value="Sign In" /></li>
    </ul>         
  </header>

The output would be like this:

large

Next, we'll move to the "content" section. Here, we'll create a <div> tag with an ID for the logo, but we'll not worry about bringing in the logo now. Then, we'll create another <div> tag for the search bar, and inside it have an <input> tag.

<div id="content">
  <div id="logo">
  </div>

  <div id="search">
    <input id="search-box" type="text" name="search" />
  </div>
</div>

Next, we'll create a <div> tag for our search buttons, and create two <input> tags for buttons. I want to have a class for these buttons, so we can reuse the same style.

<div id="search-buttons">
  <input type="button" class="button" name="google" value="Google Search" />
  <input type="button" class="button" name="google" value="I'm Feeling Lucky'" />
</div>

Now, we'll move on to the last section. For the footer, we are going to have two unordered lists - one for the right and one for the left. We'll call the first one "footer-left", and have three list items called "Advertising", "Business", and "About".

We'll call the second list "footer-right", and have the following list items - "Privacy", "Terms" and "Settings".

The output will be:

large

If you see, we have all the items we need. All that we have to do is some styling now. Before we finish this video, let's quickly bring the Google logo. You can grab it from "https://github.com/rails-camp/html-css-devcamp/tree/master/google/img", as I'll give you access to this location, so you can download the logo.png file. Alternately, you can copy the file or save it, create a subfolder called "img" inside your main "Google" directory, and paste this file inside it.

Now, include this image inside our <div id = "logo"> tag.

<div id="content">
  <div id="logo">
    <img src="img/logo.png" alt="Google Logo" width="350" />
  </div>

If you refresh your browser, you'll see this logo.

large

So, everything is good now!