Skip to content
This repository has been archived by the owner. It is now read-only.
Google homepage (for The Odin Project)
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.
assets
.gitignore
404.html
README.md
apple-touch-icon.png
build-this-webpage.html
favicon.ico
index.html

README.md

Google Homepage

My attempt to recreate the Google homepage, an example Google search result and the Google 404 page.

From The Odin Project's curriculum.

You can the site live here;

Easy Version: Google.com homepage.

Difficult Version: Google.com search results page.

Just for fun: Google.com 404 page.

What I learnt

This project took much longer to build than I expected, but it was a great way to develop my CSS layout skills as I couldn't use the Google page source to understand how the layout was done (as it was uglified and minified). This forced me to build out my own HTML structure for the page as well as write most of the CSS myself. I did use the Developer Tools in my browser occasionally when I got stuck. I did learn about using the CSS rule background-position as a clever way to use muliple parts of the same image. This is a good way to lower your number of HTTP requests. I used this technique in the search results navigation at the bottom of the page.

Tools used

  • Visual Studio Code for writing my code.
  • Safari, Chrome and Firefox developer tools for copying assets, font sizes etc.
  • PixelSnap for measuring elements and distances.
  • Sip for picking colours.
  • GitHub for version control.
  • Netlify for hosting.
You can’t perform that action at this time.