Google Layout HTML/CSS Project

I am (still) working on the web development 101 section of the Odin Project curriculum.

The first project you are tasked with is using your basic HTML and CSS knowledge to copy the design and layout of the Google Homepage (easier task) and/or the Google Search Results page (difficult task).

Screen Shot 2018-11-22 at 18.24.37.png
You have to build this webpage as part of the Odin Project curriculum

I wrote about finishing the easier page just before Halloween. It’s taken me almost a month, but I finally finished the Hard challenge after a full day coding at home today.

The Process

I started from planning out the layout on paper and figuring out what I needed to do, how the page would be divided and what sections I would need to create.

IMG_2968.jpg
Image © Rebeccode

Then, I started coding and trying things out.

I also had a chance to practice my terminal and git skills to keep versions of the data as I added and changed things.

I had a hard time getting my head around layouts, so I tried to make the Homepage using floats. And then make the search page mostly using flexbox. It was tricky but I found using cheat sheets like this one helped a lot.

Quick Tip:
A lot of times I was confused about why something worked or didn’t work. I tried commenting out the CSS (by hitting Command and /) to see what effect taking out the code made.

The Result

I’m really happy with the result and it is the first time I really “built” something substantial using my coding skills since I was a kid, so it’s a really proud moment!

Screen Shot 2018-11-22 at 18.25.56.png

It’s live here.

Advertisements

Android Logo in CSS

Following the Odin Project syllabus I followed along with this video on Code Player (a website where you can watch and download other people’s code).

I made the Android logo entirely with CSS and it’s arms, legs and head move when you hover over them.

I tried it out first on CodePen (an online tool for writing code which I was introduced to by someone at a coding meetup a few weeks ago).

I reviewed my Git and GitHub by tracking my html and css documents with git and then pushing them to GitHub, editing it and making commits here.

I enjoyed creating something – even though it was copying something someone else made.

I’m thinking at the moment if there’s anything else I could make in a similar way just to practice my CSS!


See the Pen Android Logo in HTML/CSS by rebeccode (@rebeccode) on CodePen.