Skip to content
This is a page project The Odin Project
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Google Copy Homepage

From The Odin Project's curriculum


Easy Version: Build the homepage (the simple one with just a search box).

Inside your project folder, create your index.html file

1. Tips:
- DON’T BE A PERFECTIONIST! You’re just trying to make it look like, 
not actually function like it and it doesn’t have to be spaced exactly the same
way to the pixel. Any dropdown menus or form submissions or hover-highlighting 
should be ignored. 

- USE GOOGLE! You’ll probably run into roadblocks where you 
can’t figure out how to do something so do what all good devs do… Google it!

- If you’re frustrated with trying to get buttons or inputs to style the way you 
want (for instance, they seem to just not respond to any styles), look into the
 css property -webkit-appearance: none; or -moz-appearance if you’re using 
2. Start with just putting the main elements on the page
 (the logo image and search form), then get them placed horizontally.
  You can either download the Google logo or link directly to its URL
   on the web in your <img> tag.
3. Next do the navbar across the top, first building the content and then trying 
to position it. Check out how to build a horizontal CSS navbar if you’re lost.

4. Finally, put in the footer, which should be very similar to the top navbar.

5. In general, do as much on your own as you can before relying on the developer
 tools (or viewing the page’s source code) to help you along.
6. Push your project to Github using the instructions above!

Easy Version: Build the homepage View in Browser

You can’t perform that action at this time.