Google Search Front-End

A front-end clone of Google Search focusing on using GET parameters, form submission and user interface.

This project was completed as part of an online web development course and consists of a front-end recreation of Google's Search, Image Search and Advanced Search pages. It replicates Google's interface and the searches result in real Google endpoints.

Tech Stack:

• 
• 
• 

Features:

Google Search

• Classic Google layout with centered search bar
• 'Google Search' button submits a query using 'q='
• 'I'm Feeling Lucky' button directs to the top result adding '&btnI=1' to the query
• Navigation links to Image and Advanced Search

Image Search

• 'Google Search' button submits a query using 'q='
• Query is submitted to Google Images

Advanced Search

• Three input fields for more specific searches
• Fields include: all of these words, this exact word/phrase and none of these words
• 'Advanced Search' button submits a query including " for exact word and - for none of these words
• Search bar on results page shows the queries layout

Skills Gained:

• Recreating real world user interface layouts based on existing websites
• Understanding GET parameters and query strings
• Building multi-page websites with consistent styling
• Using HTML forms to submit data to external servers
• Understanding Google's search query structure
• Constructing advanced search queries
• Implementing search redirects using JavaScript

How To Run:

1. Download/clone repository
2. Open 'index.html' in any modern browser
3. Ensure JavaScript is enabled and internet is available

---

Demo:

Google Search

---

Google Advanced Search

---

Date Developed: August 2026