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
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 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.