https://github.com/lonyasha/cs50w-search
A web application designed to replicate Google’s search interface with HTML and CSS, part of CS50's Web Programming with Python and JavaScript course.
https://github.com/lonyasha/cs50w-search
cs50w css frontend google-search html search-engines user-interface web-development
Last synced: 7 months ago
JSON representation
A web application designed to replicate Google’s search interface with HTML and CSS, part of CS50's Web Programming with Python and JavaScript course.
- Host: GitHub
- URL: https://github.com/lonyasha/cs50w-search
- Owner: lonyasha
- Created: 2025-01-09T11:58:06.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-09T13:53:22.000Z (9 months ago)
- Last Synced: 2025-01-21T09:14:44.341Z (9 months ago)
- Topics: cs50w, css, frontend, google-search, html, search-engines, user-interface, web-development
- Language: HTML
- Homepage:
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Search
Search is a front-end web application created as part of **[CS50's Web Programming with Python and JavaScript](https://cs50.harvard.edu/web/2020/)** course offered by Harvard University. This project replicates and extends Google’s search functionality, allowing users to perform regular, image, and advanced searches with a custom interface styled to resemble Google’s aesthetics.
## About the Project
This web application includes three main pages:
1. **Google Search**:
- A search bar where users can type queries and be directed to Google's search results.
- Includes a link to **Image Search** and **Advanced Search** in the upper-right corner.
- The "I'm Feeling Lucky" button, when clicked, redirects users to the first Google search result.
2. **Google Image Search**:
- Allows users to search for images on Google by typing a query.
- Includes a link to go back to the **Google Search** page.
3. **Google Advanced Search**:
- Provides input fields for advanced search criteria:
- Find pages with "all these words".
- Find pages with "this exact word or phrase".
- Find pages with "any of these words".
- Find pages with "none of these words".
- Includes a link to return to the **Google Search** page.
## Features
- **Responsive Design**: The layout is optimized for both desktop and mobile browsers.
- **Minimalistic User Interface**: Inspired by Google’s clean and user-friendly design.
- **Navigation**: Simple navigation between Google Search, Google Image Search, and Google Advanced Search pages.
- **"I'm Feeling Lucky"**: A button on the Google Search page that directs users straight to the first search result.
## Technologies Used
- **HTML**: For the structure of the pages and forms.
- **CSS**: For styling the layout and making the interface visually appealing, closely resembling Google's aesthetic.
- **GET Parameters**: Used to pass search queries in the URL to replicate Google’s search functionality.
## Getting Started
To run this project locally, follow the steps below:
1. **Clone this repository**:
```bash
git clone https://github.com/lonyasha/cs50w-search.git
2. **Navigate into the project directory**:
```bash
cd cs50w-search
3. Open `index.html` in your browser to view the Google Search page. You can also navigate to `image-search.html` and `advanced-search.html` for the other pages.
Simply open the HTML files in your browser by double-clicking on them.
Alternatively, you can view the live version of the project on GitHub Pages:
[CS50 Web Search Project](https://lonyasha.github.io/cs50-web-search/)
---
This project is part of **[CS50's Web Programming with Python and JavaScript](https://cs50.harvard.edu/web/2020/)** course by Harvard University. The assignment helped deepen my understanding of front-end development and form handling in web applications.
Thank you for visiting! 🎉