This is the first mini-project as part of The Odin Project curriculum.
- I tried to go for a mobile-first design strategy, and from what I saw in resizing the browser window on Google's page, the footer is really the section that changes the most (along with the width of the search bar)
- Some of the icons/images aren't exactly the same as Googles
- The waffle grid for Google apps is slightly different
- The user profile icon is different, but I think of my version as more of a mockup, and I think it's sufficient in its purpose as that
- The leaf image in the "Carbon neutral" link seems smaller in Google's version. I saved the image directly from their page, so I'm not sure why the sizing is different, but that's something that can probably be adjusted on the .png file itself
- I used a mixture of Grid and FlexBox for the layout of the page. My original plan was to only use Grid, because that's what I've learned most recently and it's fresher in my mind. But I struggled with the footer being responsive and re-ordering, so I switched to FlexBox for that section.
- This project was more fun than I had anticipated, and I'm proud of the results so far. On to part 2...
Part 2: "Difficult Version (optional): Build the Google.com search results page"
- Based on what I saw, there really wasn't any mobile-responsive changes that occurred with search results page
- I used a mix of Grid and FlexBox, I still tend to prefer Grid, and don't fully understand the right time to use each, but it all works how I want it to
- The part that I struggled with the most was the page navigation at the bottom
- I had a really hard time aligning all the letters of "Google" with their page numbers.
- I saw that Google uses a table structure and background images, and so I opted for that, with a mix of Grid
- I'm sure there are better ways to structure that part of the page, but I feel proud that I was able to get somethign that I think looks pretty close to real
- This project was also a lot more fun than I thought. I definitely learned a lot, like using "filter" on svg files to adjust their colors. Thanks to this CodePen
- I'm eager to keep learning and move on to learning and incorporating JavaScript into my knowledge