MY PROJECTS
Project | 01
Homepage
Homepage website
Homepage using HTML, CSS, and JavaScript. It contains four different HTML pages, where index.html is the main page of the website, and it is possible to go from any page on the website to any other page following one or more hyperlinks. At least ten (10) distinct HTML tags are used in addition to <html>, <head>, <body> and <title>. And it is integrated with some features of Bootstrap and CSS file.
In this video, I explain how I did my problem set 8 (Homepage) of CS50.
Project | 02
Search
Search website
Front-end for Google Search, Google Image Search, and Google Advanced Search.
On the Google Search page, there are links in the upper-right of the page to go to Image Search or Advanced Search. On each of the other two pages, there is a link in the upper-right to go back to Google Search.
On the Google Search page, the user can type in a query, click “Google Search”, and be taken to the Google search results for that page. There is also an “I’m Feeling Lucky” button on the main Google Search page. Consistent with Google’s own behavior, clicking this link takes users directly to the first Google search result for the query, bypassing the normal results page.
On the Google Image Search page, the user can type in a query, click a search button, and be taken to the Google Image search results for that page.
On the Google Advanced Search page, the user can provide input for the following four fields (taken from Google’s own advanced search options):
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:”
In this video, I explain how I did my project 0 (Search) of CS50 Web.
Project | 03
Ecommerce
Ecommerce website
Design an eBay-like e-commerce auction site that will allow users to post auction listings, place bids on listings, comment on those listings, and add listings to a “watchlist.”
In this video, I explain how I did my project 2 (Commerce) of CS50 Web.
Project | 04
Wiki
Wiki website
Design of Wikipedia-like online encyclopedia.
Entry Page: Visiting /wiki/TITLE, where TITLE is the title of an encyclopedia entry, it renders a page that displays the contents of that encyclopedia entry. If an entry is requested that does not exist, the user is presented with an error page indicating that their requested page was not found.
Search: Allow the user to type a query into the search box in the sidebar to search for an encyclopedia entry. If the query matches the name of an encyclopedia entry, the user is redirected to that entry’s page. If the query does not match the name of an encyclopedia entry, the user is instead be taken to a search results page that displays a list of all encyclopedia entries that have the query as a substring. For example, if the search query were Py, then Python will appear in the search results.
New Page: Clicking “Create New Page” in the sidebar takes the user to a page where they can create a new encyclopedia entry. When the page is saved if an encyclopedia entry already exists with the provided title, the user is presented with an error message. Otherwise, the encyclopedia entry is saved to disk, and the user should be taken to the new entry’s page.
Edit Page: On each entry page, the user is able to click a link to be taken to a page where the user can edit that entry’s Markdown content in a text area.
Random Page: Clicking “Random Page” in the sidebar takes the user to a random encyclopedia entry.
Markdown to HTML Conversion: On each entry’s page, any Markdown content in the entry file is converted to HTML before being displayed to the user.
In this video, I explain how I did my project 1 (Wiki) of CS50 Web
Project | 05
Mail website
Design a front-end for an email client that makes API calls to send and receive emails.
In this video, I explain how I did my project 2 (Commerce) of CS50 Web.