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.


First project on The Odin Project where I have to recreate their landing page with the search button. And here's my attempt on creating this beauty of a search engine we all came to love -

Getting Started

  1. Created a folder for the project called "google-homepage."
  2. Created a GitHub repository.
  3. Cloned the GitHub online repository to my local computer with the help of the Terminal commands.
  4. Made and nice introduction about the page with a file.
  5. Setup my preferred IDE which is Visual Studio Code
  6. Fished for the correct icons and images.
  7. HTML5 was laid out semantically.
  8. Made the page come to life with the help of CSS3.
  9. In between milestones, I would: Git add > Git commit -m "" > Git push --all origin.
  10. Made sure everything is working without errors and pushed the completed version to GitHub. Voila!


With the magic of GitHub and their system. I deployed my project to the master repository. By doing this, people who are interested in changing and/or there to give me pointers would be welcome to do so simply by pulling the master branch over to their local Git repository.

Skills used

I used a handful of basic skills in this project as I am still learning every time I write code. Learning the Command Line recently, it was a nice touch using the Terminal so I can showcase my skills and really put them to the test. I was comfortable and confident in my learnings by creating a local repository on Git and then being able to push them to GitHub's remote repository. It was a good feeling and seemed like this is a vital tool that every developer should be executing for all their projects. Though this project is a simple, recreating Google's landing page took me a good 4 hours total. After sitting on a blank page on Visual Studio Code I was very sure of the HTML5 elements I was going to be using to visualize the DOM. With all the symantics in place the only thing left to do was to add 'life' to the page with good ol' CSS3. When replicating a webpage, it's important to have everything align to almost a T! Having a good sense of what font-size, margin, color, padding, etc the original desinger/developer used can spare you a great amount of time. With this, being able to use the web browser's Inspector tool allowed me to optimize the trail and error that would've been done without such great tool.

Built With

Sharing is caring

From The Odin Project's curriculum


Started the project on February 1st, 2019 Ended the project on February 3rd, 2019 Hours worked on 5 hours

You can’t perform that action at this time.