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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s