/cs50w-Project-0-Search

My first web50 project 🌐

Primary LanguageHTML

Project 0: Web50 - Google Search Page 🦇

Live Solution ✔️

Description

This repository contains my solution for Project 0 of the Web50 course at Harvard, where the task was to recreate the Google Search page along with Google Image Search and Google Advanced Search pages. The project focuses on HTML and CSS to achieve the desired functionality and aesthetics. 🤠

Project Requirements

  1. Three Pages:

    • index.html (Regular Google Search)
    • image_search.html (Google Image Search)
    • advanced_search.html (Google Advanced Search)

  2. Navigation Links:

    • On Google Search: Links to Image Search and Advanced Search.
    • On Image Search and Advanced Search: Link to go back to Google Search.

  3. Google Search Page:

    • Centered search bar with rounded corners.
    • Centered search button beneath the search bar.
    • Ability to type a query, click "Google Search," and view the search results.

  4. Google Image Search Page:

    • Ability to type a query, click a search button, and view the image search results.

  5. Google Advanced Search Page:

    • Input fields for:
      • All these words
      • Exact word or phrase
      • Any of these words
      • None of these words
    • Stacked vertically and left-aligned like Google's Advanced Search.
    • Blue "Advanced Search" button with white text.
    • Clicking the button should lead to the search results page.

  6. I'm Feeling Lucky Button:

    • Added to the main Google Search page.
    • Clicking it takes users directly to the first Google search result, bypassing the normal results page.
    • Note: Redirect notice might occur due to Google's security feature.

Implementation Details

  • HTML and CSS files for each page.
  • Utilized Bootstrap to enhance responsiveness and styling.
  • Responsive design resembling Google's aesthetics.
  • Consistent use of colors, fonts, and styling as per Google's CSS.

Usage

  1. Clone the repository: 
    git clone https://github.com/xSarscov/cs50w-Project-0-Search.git
  2. Open the desired HTML file in a web browser.

Screenshots

  1. Google Search Page image
  2. Google Image Search Page image
  3. Google Advanced Search Page image

Credits

  • This project was completed as part of the Web50 course at Harvard.

Feel free to explore the code and provide feedback! 👍