Reverse Engineer the Google Homepage

What it is

It is finally time to take everything you’ve been learning and put it to use writing your first website! Starting from scratch is a daunting task: you understand HTML & CSS, but staring at the blank white screen, where do you even begin?

To make it a little easier, we’ll copy an existing website. This way, we won’t get distracted worrying about content and design and instead can focus on the coding.

This closely mimics how Web Developers work in the real world: usually, it is a Web Designer’s responsibility to create the content and aesthetic. They sketch ideas and eventually come up with a mockup of the site, often as an image made with Photoshop. Then, it's the Web Developer's job to then take that mockup and convert it into the appropriate HTML & CSS.

For this project, we are going to copy the Google.com homepage. Treat the project as if a designer had just handed you a picture of Google and asked you to implement it- As much as possible, write your own HTML & CSS instead of just copying Google's code out of the developer tools.

Why it matters

This’ll be your first chance to take the things you’ve learned and see if you can translate them into a practical skill.

I bet you’ll find that even though the lessons were understandable, this task is still quite difficult: thats the fluency illusion at work. This is why they say that the only way to learn to code is by coding.

What you'll learn

The reason it’s tricky is because you’ll have to figure out all the dozen little random tasks that aren’t covered in the lessons, like figuring out to do when your CSS isn’t working the way you expect. Learning quickly requires the proper combination of the structure of the lessons and practice on real projects.

The Project

This project is outlined here, on a site called The Odin Project.

Don’t worry about setting up a server, just open the HTML file right in your browser like we did in the first lesson.

Skip everything about git, and use whatever text editor you want. We’ll go into more depth setting up your computer’s developer environment (the day to day programs and tools you'll use) in the next section.

If you need help, there are a bunch of other students’ solutions linked on the page that you can use as some worked examples. Let me know how I can help.

Tips

I recommend starting by making index.html and styles.css and linking the two together. You can check that the CSS is working by making an obvious rule, like body { background: red }.

Download the google logo and save it to the project folder, and add it to the page. Review the Interneting is Hard lesson on links and images if you can’t figure out how to get the image to show up.

Once you have all of the files you need, write the plain HTML markup first. Then go back and add the CSS rules to style the page section by section. Good luck!

If you can't figure out how to style something on your own, you can use the Developer tools to see how Google has structured their HTML & CSS, or go peek at one of the other student's solutions. Understand that the more you copy, the less you'll learn. Struggling on this is the whole point.

For some of the smaller images on the page, such as the microphone icon, Google doesn't use an <img> tag. instead, they use a <span> with a background image. Instead of downoading a separate file, the image is encoded directly as a base64-encoded string. See how number systems come up everywhere? For simplicity, you can just copy the icon element directly from the developer tools or omit it entirely.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.