Recreating Google
I decided to take upon this project as it would seem like a good refresher back into the Web developer world. First, I started with simple sketches to create a visual ideation of how I would break out the code. Essentially, my brain came up with this:
After a few trial and errors, I decided to use CSS Grid for the top part, Flexbox for the middle part and footer.
For the top part, there were 6 links so I decided to create 7 columns: 1 column would serve as a spacer. Imagine it as a grid:
| About | Store | Gmail | Images | Logo | Sign In |
The empty cell would serve as spacer, where it’s part of the grid but it holds no content.
The ‘top’ section was the most difficult, as I’m less familiar with CSS grid than I am with flexbox. But, in the middle and footer sections, I breezed through using flexbox:
The reasoning was that the main div was the container holding 4 items. When I first set the container to display div, it would look like this:
A simple flex-direction: column; in the stylesheet would fix that.
For the search bar, a challenge I had was overlaying the search icon and microphone icon over the text input.
The question came about on how to overlay divs on top of each other? Luckily, CSS has a tool for that: z-index. I extracted the two icons from the actual google site, and positioned them in a flexbox div. I justified the contents as space-between so that they would be on opposite sides of each other. Then, I used z-index and gave the flexbox div a higher z-index value so it would be on top of the input field.
Naturally, I would break down how I built the footer but I used the same ideas that I had used to create the middle section. Instead of using flex-direction: column;, I had the flexbox remain in its default orientation of row, and positioned the divs so they were appropriately spaced away from each other.
This was a fun and simple project. It was reviewing things I had already known while introducing news ways of thinking.
Difficulty: 3.0/10.0