The Google Homepage Mini Project

This is a project from the Odin project for the HTML/CSS section.

The project is to recreate the Google homepage. It aims for you to use developer tools to identify how the page is put together and then to utilise the skills already learnt to create the page.

Some of the skills that are utilised for the project are: To locate background color on a page, Move div on a page, make a form, attach CSS styles to HTML, use classes and IDs, center elements and place a div at the bottom of a page.

From The Odin Project's curriculum

During this project I was able to gain a better understanding on how to layout the HTML and CSS in the documents. I utilsed the position property to place images and text and I also made use of the margins and padding for certain images. I made use of the IDs for single use items and Classes for items that I would be using multiple times. I made use of divs, but found that the header, nav, section and footer tags were easier to layout the HTML.

The main challenge I faced was with the links and buttons using rover, I also had some styling difficulties with these.I am now more confident with setting out images and text on pages and feel more familiar with the CSS properties.