Recreate the Google Home Page

Let’s get our HTML/CSS skills out of the browser and build our first website. Where better to start than with the Kingpin of the internet—Google. In this project, you will need to recreate the Google homepage. In other words, type in “google.com” in your browser. See what’s there? Try recreating that from scratch! That’s the challenge. And to be clear, do not worry about recreating any drop downs; instead, you should exclusively focus on reproducing the static content on the page. That means recreating the navbar (minus dropdowns), the sign-in button, the main body of the page, and the footer. It also means positioning and styling each of these elements so that they basically resemble the original.

1. Create a Local Project Directory: On your computer, create a directory (folder) in which you’ll keep your projects. Create it in your home directory. On a Mac, go to Finder and then open the directory with your username on it and create it in there. On a PC, open My Documents and then create it there. My folder is called “Projects,” but call your’s whatever you’d like.

2. Inside your Local Project Directory, create a new directory called “GoogleClone,” or some other name you’d like to use. Note: When choosing file and directory names, as a general rule, always avoid using spaces.

3. Go to Google.com. Right click on the Google logo and select “Save Image As”. Save the logo in the folder you created in step 3.

4. Open your text editor of choice and embrace the blank page that awaits! Create a and save a new file entitled index.html. Unsurprisingly, this file will house your html code.

5. In the text editor, create a second file named main.css. Shocker! - This file will hold your style rules for this project.

6. In order to easily make your code cross-browser compatible, include a “CSS Reset.” The most popular CSS reset is Eric Meyer’s, which you can copy here and paste in at the very top of your main.css. And in case you missed it, there’s a brief discussion of CSS resets here in the Beginner’s Guide.

7. Now the hard part. It’s up to you to fill up your html and css files with code that will generate a visual result that looks like the original.

8. If you get stuck, before looking at the original source code, first try seeking out help from your colleagues via Google+ or by digging into StackOverflow. Communicating problems you’re encountering is a core developer skill and getting help from others is a key part of being a good developer! You can also bring up any challenges with your mentor, but if you do so, please consider posting to the G+ community, as it’s likely at least one of your colleagues is facing similar challenges.

9. It’s alive! Once you’re happy with your project, publish it live on the web using a public Dropbox folder. Navigate to your local Dropbox folder. If you don't see a folder called "Public", click here to enable your public folder. Now, copy your GoogleClone folder into your local public Dropbox folder. Then, navigate to your index.html file inside your Dropbox folder, right click, and choose "Copy Public Link". Congrats! Your page is live on the web, and you can share this link with others so they can see it!