New project: Building the Google homepage in HTML and CSS

A screenshot of my Google homepage project.

In my quest to learn front end web development I’ve been bouncing around some different free courses online. The Odin Project seems to be a very good, free collection of resources to learn web development.

I had previously gone through a bit of their HTML & CSS resources as well as some of their JavaScript and jQuery resources. As part of Odin, the course has students build some different projects. I had previously skipped the HTML/CSS project around building a copy of the Google.com homepage as I’ve already been using HTML for ten years. Big mistake. When I finally decided a few weeks ago that I should build the project, I had a mild “oh shit” moment looking at the blank page in my text editor, Sublime Text. Apparently just going through courses online, via Codecademy and others, is a lot easier than actually building a project from scratch. I had no idea how to actually start a CSS file! Some furious Googling and a lot of humility later, I managed to figure it out!

I got the project completely finished, but as soon as I resized my browser window, all of the elements on the page moved out of order and generally looked terrible. Dang it! I spent hours trying many different methods to get the elements to stay in place and to move together in unison when resizing the browser window, all to no avail. I eventually went to StackOverflow to ask for help and submitted my code to JS Fiddle. I got some decent answers, but eventually couldn’t get it to work perfectly.

I ended up realizing I should completely scrap my code and start over. Let me rephrase that: I did a very good job using comments in my HTML to explain the different sections of code, which made it easier for me to find which code referenced the specific sections that weren’t working correctly. I didn’t truly throw out my old code: I simply made a new file and only copied over the parts that weren’t working. By isolating the problem code in a new file, I could play around with it and try different methods to get it to work. Once I got it working I was able to copy over the working sections to the new file.

In addition to learning CSS and learning how to build a CSS file from scratch and one that’s connected to an HTML file, I learned some more GitHub basics. I had learned some a few months ago, but I forgot a lot of what I had learned. After finally getting my project to work, I uploaded to my personal GitHub, then pushed the code public via GitHub Pages. Check out my Google homepage project here or click the image at the top of this blog post!