In this last guide for Project 1, we'll see how to add a cool auto-select feature. If you go the Google page, you'll see that it automatically puts the focus on the search box, so users can start typing into it directly. We're going to implement the same in our page too.

Before implementing it, I want to quickly increase the size of our input text field to about 25px.

Now for our auto-focus, there are many ways to do it, but the easiest way is to put some JavaScript in the header. Since we've never used JavaScript before, I'm not going to talk about what it is in this tutorial. Rather, I'm only going to walk you through on what we can do to bring auto-focus using JavaScript.

Every time we want to use JavaScript, we have to use a tag called <script>, and mention it to be of type JavaScript. Inside this tag, we'll create a small function called focusIt().

  <script type="text/javascript">
      function focusIt()
      {
        var my_search_box = document.getElementById("search-box");
        my_search_box.focus();
      }
      onload = focusIt;
   </script>
</header>

In this function, we're using a few built-in JavaScript methods to turn the focus on the search-box.
After this function, we're calling the focusIt() method every time the page loads. This code should give us the effect we want.

With this, we've successfully cloned the Google homepage. Hopefully, you've gained some hands-on experience with this project, and I also hope you can appreciate the different elements that go into creating a clean user-interface.