Google Homepage Project Overview and Instructions
This guide gives an overview of the project requirements, including instructions for how to build the Google homepage with HTML and CSS.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

This is a fun section of the course, as now we're going to start building our project in HTML and CSS.

We are going to begin by replicating the Google homepage. If you see, this is a relatively simple webpage that combines a number of things that you already know such as working with images, creating buttons and text fields.

I'd strongly suggest you go to www.google.com, and try to replicate it yourself. This way, you learn better even if you struggle a little bit along the way.

That said, let's see what we're not going to build. First off, we're not going to build the scrolling "I feel lucky" button. Instead, creating two regular buttons would be enough. Next, we're not going to worry about the mic icon and the voice feature that it offers. Also, we're not going to build the little icon set that you see at the top right side of the page.

So, we're going to build content in the middle of the page that includes a text field. This is not our custom text field, so we'll have to override it a little bit. Also, we're going to create two nice rounded buttons using custom CSS. Next, we are going to create a header that sits at the top right hand corner of the page, and a sticky footer that contains links to help users navigate from page to page.

So, try to do this on your own, and in the next few videos, we'll see what my implementations looks like. Good luck!