https://github.com/johnftitor/google-homepage

This is an Odin Project, only meant to learning. All comments are well received as part of the learning process. Thanks so much!!
https://github.com/johnftitor/google-homepage

Last synced: about 3 hours ago
JSON representation

This is an Odin Project, only meant to learning. All comments are well received as part of the learning process. Thanks so much!!

• Host: GitHub
• URL: https://github.com/johnftitor/google-homepage
• Owner: JohnFTitor
• Created: 2021-06-23T20:43:22.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-21T22:41:33.000Z (over 3 years ago)
• Last Synced: 2024-11-05T23:43:37.711Z (about 2 months ago)
• Language: CSS
• Size: 26.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
First set-up of google Homepage README.md.

 

The project I'm about to build is, as the name stands, a non-functional google homepage, to set the basics in HTML and CSS.

23/06/2021: I created tha base structure of the page, using the resources provied by the odin project. I set the navbar and search form. The footer was declared but yet created. As for the CSS, I like to use grid to set the sticky navbar, so I created one for the body element and one for the main content (Which contains the form and footer). I followed this tutorial for that: https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/. I also defined the positioning of the anchors in the navbar, but I have to modify them as I didn't include them in a list. 

24/06/2021: All the base CSS structure of the page has been set, the only thing left is to add the special styling (colors, when :hover, etc) to the page. One note to take into account, don't work in the CSS unless you have already set all (or almost all) of the HTML, at least for me it was the case in this project. An don't be way to perfeccionist during the bulding process. This notes are more for myself. 

25/06/2021: Final setup of the project. Somethings needed to be adjusted, like the padding of some objects, font-sizes, colors, overflow and screen response. It was quite interesting how to edit the cancel button in the search bar (Though its funcionality could be better) based in editing the webkit background with the svg image required. Now all that's left is to add the microphone to the search bar and the shadow boxes of the objects when hover. Almost done.

28/06/2021: Comming back after weekend. Version 1.0 of the project is now completed, with some of the shadow boxes and similar icons to google homepage. It's not exactly the same, but for the exercise it looks alike. I might come back to improve this later.