Skip to content

RudolphMare/search-engine-homepage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

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.