recreating the google search results page

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. Today, I finished my attempt at the “difficult” version of the initial project: recreating the page that results when searching the term “build this webpage”. My facsimile can be accessed by using the google search button on my imitation of the homepage. Alternatively, it can be directly accessed here.

For comparision, the official google version can be seen here. This page may have changed since my recreation of it, so I’ll put a cached version in my google-search-results repository on GitHub.

I feel that I successfully created a passable imitation of the original. However, close inspection will reveal some webpage functionalities that are missing because due to the lack of Javascript. I think Javascript handles the pinned header of the google search bar when scrolling, as well as the drop down functionalities of the ‘People also ask’ accordian-type boxes. My version also does not contain the small webpage icons before each result, mainly because I am tired of working on this and I think I’ve achieved the learning objectives.

I am much more confident in my ability to structure and style webpages that before I began. I have also learned the value of doing CSS styling resets on all html tags so that a webpage structure can be built from scratch without having to fiddle with all sorts of preset box spacings. Trying to duplicate different element arrangements has solidified the box model concept in my mind. I have a more intuitive understanding of what tags are within what other tags and I am more easily able to identify what attribution I need to alter to produce a desired effect in the layout.

Onwards to Javascript!