Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

google-homepage (easy)

This page recreates the layout of the search engine without function, and also not same way to the pixel.

This is the first page that I created, using the elements that I learnt in a few classes the Odin project, therefore it looks kind of rough. And English is not my mother tongue, so feel to stop reading :)

The things I learnt while I am making this page as below:

  1. (Html) using id and class tag for individual elements. They are important where the CSS elements to locate from. Id can only used once in a html document, where class can use more than one time.

  2. (Html) div and span tag. div and span tag both can be used to divide elements groups. Div is very useful, when using position: absolute and relative in CSS. And for span, at this moment, I know it can not nested in a ul element.

  3. (CSS) speaking of position: absolute and relative. When you positioned relative for the father element, then position absolute for the son element (plus left right bottom top discription), the son element can stick to a certain place insde (+) or outside (-) the father element.

  4. (html and CSS) make navigation bar or footer using ul element. set the li elements display block, if for a vertical bar, keep it as it is. If for a horizon bar, set li float and ul overflow: hidden.

  5. CSS reset is very important.

  6. (html and css) using :hover and make the page have an interact effect. For example, when place the indicator on certain object, the underline will appear, or the color of font or opacity of the picture can be changed.

things need to improve (there are certainly many, but the one I think the most) is the footer. When using one un-order list for the footer appear both on the left side and the right side. I used the float to make them around both parts of the page. But when I used positon absolute and bottom in CSS, try to put them on the bottom of the page, the two parts stick together in the bottom on the left side. At last, I changed to use position relative, and bottom -550px instead. I had to use bottom -550px not bottom 0, otherwise the footer will appear on the upper middle of the page.

*Summary: Must keep practising in order to be more proficient.

You can’t perform that action at this time.