Using HTML & CSS design a web app with the Google Search, Google Image Search and Google Advanced Search functionalities (as close as possible to original Google Search).
- Pages: website with three pages: one for Google Search, one for Google Image Search, and one for Google Advanced Search.
- Google Search page, has links in the upper-right of the page to go to Image Search and Advanced Search. On each of the other two pages, there's a link in the upper-right to go back to Google Search.
- Query Text: on the Google Search page, the user is able to type in a query, click “Google Search”, and be taken to the Google search results for that page.
- Query Images: on the Google Image Search page, the user is able to type in a query, click a search button, and be taken to the Google Image search results for that page.
- Query Advanced: on the Google Advanced Search page, the user is able to provide input for the following four fields:
| Fields |
|---|
| Find pages with… “all these words:” |
| 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:” |
- Appearance: the four options are stacked vertically, and all of the text fields are left aligned.
- Lucky: an “I’m Feeling Lucky” button on the main Google Search page.
- Aesthetics: the CSS closely matches Google’s own aesthetics. This repository contains all FREE Frontend Mentor projects. Strengthening front-end skills by building real projects. Solving real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
- HTML & CSS
- Visual Studio Code
To get a local copy up and running:
- Clone the repo
https://github.com/sandramsc/CS50w-Google-Search-app--HTML-CSS-work.git
- Download .zip file and view unzipped file on localhost
