Skip to content
A non-functional copy of the Google home page
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
index.html
style.css

README.md

A non-functional copy of the Google home page.

This is the project at the end of The Odin Project's basic HTML and CSS course. The project brief can be found here: (http://www.theodinproject.com/courses/web-development-101/lessons/html-css)

My goal with this project was to put into practice all the HTML and CSS skills I have learned during this course module. As per the project instructions, I did not aim to get every element placed pixel-perfect. I also did not add any hover elements, nor did I add any functionality.

What I achieved is a fair facsimile of the standard Google home page, as I would encounter it on most browsers while not being logged in.

A notable ommission is the voice search icon, which is only present in Chrome.

The page was tested on a desktop PC in Chrome, Firefox, and Edge. It behaves consistently across all three, with roughly the same quirks.

Edge inexplicably does not display the favicon on my locally-hosted page, regardless of whether the icon is located remotely or in the project folder.

My biggest headache was to get the centre elements placed correctly. My solution has them placed in the correct position most of the time, but the elements move when the window width gets too narrow. This is different to their behaviour on the real page, where those elements remain static.

I am wrapping this project up at this point, without addressing the above quirks, or making further tweaks.

You can’t perform that action at this time.