07 Jan 2020 »

recreating the google homepage

One of the first projects that is encountered in the Odin Project curriculum is to attempt to recreate the www.google.com homepage. This project is part of the Web Dev 101 course and is intended to be hands-on introduction to basic HTML and CSS syntax and structure.

The current version of my attempt to mimic the Google Search homepage can be found on this page of my website. I found myself restarting from scratch after my first two attempts. The struggles in each attempt helped me rethink how to structure the HTML of the website to make styling via CSS simpler by using class for broad formatting of elements within a section and id attributes for specific elements.

I have gotten my version to a good facsimile of the original. I think I will also attempt the suggested follow-up exercise of trying to reproduce the search results page.

Another thing I want to attempt is implementing a simple javascript button element that mimics the “I’m Feeling Lucky” hover feature of scrolling through a list of different variations of “I’m Feeling (…)” string. I have seen some examples of this implemented by using a ul element that is randomly transformed a certain set distance from the initial li to a later li to mimic the scrolling effect.