For this Johns Hopkins Center for Talented Youth course (Advanced Web Development), I was instructed to develop mock website for a juice company. The project uses HTML, CSS, and JavaScript. There are 6 main pages on this website. The website is built with a tropical theme.
The "home page" has a multi-column layout with a side bar. The main content area containing the multi-column layout displays new and important information for visitors, like the purpose of the store and updates about new locations. The sidebar contains 3 special drinks. The user can click on these drinks to learn more about them, such as pricing and ingredients.
The "contact us" page contains a form for the user to fill out in order for the company to contact them. However, the information entered in the form does not send anywhere, as this was not taught in the course.
The "locations" page uses Javascript to integrate the Geolocation API. This map displays a map of Florida, along with 3 landmark icons that the user can click on to reveal the locations of the stores.
Like the contact us page, the "mailing list signup page" is a form. However, once the user submits the form, they are taken to a different page where they can print out a coupon for a free drink.
The "frequently asked questions page" lists out 5 commonly asked questions and answers to them.
Finally, the "how to page" shows site visitors how to make a simple drink.