Git Product home page Git Product logo

w1-bl-google-homepage-takehome's Introduction

Workshop #1 Take-Home Boss Level: Google Homepage Clone

Instructions

Your goal for this takehome assignment is to create a replica of the Google Homepage using basic html and css (don't worry, it doesn't actually have to function at all, you just want to create a webpage that looks similar!)

We have provided you with the necessary image files and the html shell code. If you try loading our index.html shell code, you will get a very ugly looking Google homepage. Your goal is to use css to style the homepage to look as close to the Google Homepage as possible (just use the default google.com website with no chrome themes or add-ons). The person who is able to get closest to the actual homepage will get a VH Tumbler! A lot of the css that you might need will not have been covered during our workshop, so make sure you refer to online resources if you need help styling things. For example, a quick Google search will tell you how to center images on the screen, how to underline text, how to change the color of different things, etc.

You will also see in the html shell code we've provided that we refer to an image called "images/headshot.jpeg" For this, upload your own profile picture to the image folder inside the directory we gave you. If the profile picture name is something other than "headshot.jpeg", make sure to update the html code accordingly.

Feel free to modify the index.html file we provided you if you want.

Challenge: change the hover state of the buttons, search bar, and header links to mimic the real google.com homepage. For example, the header links should be underlined when you hover over them and the cursor will change to a pointer. Similarly, the buttons under the search bar will change color when you hover over them.

To enter for a VH Tumbler, you must:

  1. Fork this repository
  2. Push your submission (with your own work) to your forked repository by Monday, March 21st at 11:59 PM.

Note: The cool thing about CSS is that there are many, many different techniques to style a page. As such, we will disqualify submissions that are very similar to Google's own stylesheets.

One winner will be selected, and this will be announced at the start of our second workshop!

Before Styling

Screenshot

After Styling

Screenshot

w1-bl-google-homepage-takehome's People

Contributors

karolinagroszewska avatar kevjin02 avatar richardwsong avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.