To create a clone of the Google Search Results page Odin Dashboard using HTML and CSS.
- Don't be a perfectionist
- The page is just supposed to look like
Google'sThe Odin Project's page, not function like it - Spacing just needs to similar, not down to the pixel.
- Dropdown menus, form submissions, and hover-highlighting should be ignored
- Do as much as you can before viewing the page's source code or relying on Dev Tools
- When complete, project should be pushed to GitHub. Git should be used for Version Control.
- Submit a pull request to contribute this solution to The Odin Project.
- Should the project be mobile responsive?
This project is designed to facilitate practice towards mastery of HTML and CSS. In addition, it allows for practice creating and modifying a Version Control project with Git and GitHub. This is comparable to the "hard" version of the Google page project.
The usual project is to create a clone of the Google Search Results page using HTML and CSS. However, I already did this a couple of years ago. Now that I'm a 2nd-year Computer Science student, I decided to pick back up where I left off. However, I don't want to jump right back into the middle of Ruby on Rails without refreshing myself on the fundamentals of HTML, CSS, and JavaScript, so I decided to redo the early projects from scratch. In the case of this project, however, I wasn't eager to do the exact same page again, so after a bit of thinking I decided to do a comparably complex page, and what better page to do then the Odin Project dashboard?
This project was a lot of fun. I essentially haven't used HTML or CSS in two years, but The Odin page was different enough from the original Google project that I could use my old work as reference material without it being "cheating", and was able to pick it all back up very quickly - while the syntax might be rusty, I still remember how things work, what can be done, and where to find great reference materials. Additionally, due to the differences between the two pages, I was able to implement some additional features that aren't present in the Google page, such as implementing a custom font, the replacement effect of the completion indicator, or the popout icon in the bottom right.
Speaking of the popout icon, unfortuately I wasn't able to get the popouts to work 100% correctly. Due to the limitations of CSS, you can modify sibling elements that occur later in the DOM, but not ones that appear before. As a result, if you hover over the uppermost popout icon (which is the one that appears later in the HTML), the lower icon will retreat. This functionality could be easily implemented using JavaScript, where you can modify anything in the DOM at will, but this project is meant to be done with HTML and CSS only, so I did the best I could with the tools available.
As with my previous Google Search Results page, you can test the mobile responsiveness by resizing the browser window.
Read more about this project at The Odin Project's Web Development curriculum.