Intro to Code Part Three – CSS Challenge Workshop

The Google Homepage we'll clone with our CSS skills

Our search functionality will be… limited

For part three of our Intro to Code series, we’ll be getting our hands dirty. Today’s class will be almost entirely dedicated to one project: cloning the Google homepage using the CSS skills we’ve been developing over the last couple of weeks.

Now don’t worry, your page doesn’t have to be functional, it just needs to look like the original. That being said, we’re going to nail the visuals. Take a good, long look at the Google homepage. We need to clone every part of it. All the text in that thin header up top, the search buttons, the text box… everything.

You might not feel confident doing all this, but that is only natural. A lot of you haven’t done anything like this before. That’s okay. Part of learning development is getting comfortable with tackling jobs you don’t one-hundred percent know how to do at the beginning. Have faith in your ability to figure stuff out.

Your first step is to really think about how this page breaks down. Where do you want to place your divs? What images will you need? (Hint: you can just right click any image on the page and download it.) Start small. Try just placing one element on the page, and build from there.

CSS Positioning is going to be the key skill in this project, and don’t be afraid to use the real Google for hints if you get stuck. We’ll also have our mentors in class, so raise your hand and keep them from getting bored.

You’ll need a lot of different positioning tricks for this challenge, including CSS rules for centering elements, laying lists out horizontally, and maybe even floats. This isn’t an easy project and will easily take the full two hours of the class, and maybe more. Don’t feel bad if you spend five or even six hours on this project, the most important thing is just to finish it!

We’ve been publishing links to online resources that can help you with this assignment all week, but the best ones can be found in last weeks blog post.

For extra credit, try publishing your Google-clone page to Github Pages and be sure to post the link to comments.

Code on!

Leave a Reply

Your email address will not be published. Required fields are marked *