CS50 Web Development Project 0

Introduction

Welcome to the CS50 Web Development Project 0 - Google Search Website! This beginner-friendly project offers an ideal introduction to the world of web development. By undertaking this project, you'll embark on a journey to create a simple website that emulates the essential functionality and aesthetics of Google's search pages. As you follow the specifications and steps outlined below, you will gain valuable hands-on experience in working with HTML and CSS.

Screencast

Table of Contents

• Project Overview
• Live Demo
• Getting Started
• Author
• License

Project Overview

Pages

1. Google Search Page

   • Key Features:
     • A centered search bar with rounded corners.
     • A centered search button positioned below the search bar.
   • Users can enter a query, click "Google Search," and browse search results.
   • Quick access links to "Google Image Search" and "Google Advanced Search" in the upper-right corner.

2. Google Image Search Page

   • Key Features:
     • Users can enter a query, click a search button, and view Google Image search results.
   • A convenient link is provided to return to the "Google Search" page in the upper-right corner.

3. Google Advanced Search Page

   • Key Features:
     • Input fields for four search options:
       • "All these words"
       • "This exact word or phrase"
       • "Any of these words"
       • "None of these words"
     • Options are neatly stacked vertically with left-aligned text fields.
     • A Google-inspired CSS design featuring a blue "Advanced Search" button with white text.
   • Clicking the "Advanced Search" button directs users to search results for the specified query.
   • A link is included to navigate back to the "Google Search" page in the upper-right corner.

4. Main Google Search Page (Optional)

   • Key Features:
     • The inclusion of an "I'm Feeling Lucky" button.
     • Clicking this button takes users directly to the first search result, bypassing the regular results page.
     • Please note that users may encounter a redirect notice, which is expected due to Google's security features.

Live Demo

For a hands-on experience, you can explore a live demo of this project here.

Getting Started

To get started with this project, you can download or clone the repository using the following command:

git clone git@github.com:Vidhi0229/CS50W-Project0.git

Author

• Vidhi Srivastava
• GitHub
• LinkedIn

License

This project is licensed under the MIT License, granting you the freedom to use, modify, and distribute the code as long as you provide the appropriate attribution and disclaimer.

Conclusion

In conclusion, CS50 Web Development Project 0 - Google Search Website offers an excellent starting point for web development beginners. It provides valuable hands-on experience in crafting web pages, applying CSS styles, and implementing fundamental functionality. Feel free to explore and expand upon this project to further hone your web development skills. If you find this project helpful or interesting, please consider giving it a star!