In this project, you need to use HTML/CSS and JavaScript to build a simple website and publish it online. You can build a personal website for yourself, or a website of a small business or organization like a farm, a restaurant, a park, a hotel, a baseball club, or a website of some tutorials, showing skills that you have expertise in and want to share with others. You have a lot of freedom to determine the details of your website as long as you meet the requirements.  The theme doesn’t need to be real. Be creative! You will have three weeks (w6-w8) to work on this project. 

 

Requirements:

The webpages should be presentable as a whole; the interface should be user friendly (text should be easy to read).
The website should contain pictures and/or videos, and they should be presentable as well (placed in a proper place, easy to see, have proper size and resolution).
Website has 1 homepage and at least 3 subpages; the homepage and subpages have a horizontal menu that leads to the other pages. This means 4 total pages will be required.
The homepage has picture carousel animation (slideshow effect, for example, pictures in this page http://oregonstateparks.org/). This needs to autoscroll and have forward and back buttons.
Have a scroll box in one page. You can put text only or text with pictures inside the scroll box.  The scroll box should have something like a scroll bar to allow users rolling it up and down. Some students have scroll boxes show up after submitting the form, if this is the case make sure you add a comment to the grading TA letting them know.
One page has a form either submit via get or post (enter the email and subscribe, a short survey, etc.)  You can set it to be submitted to http://web.engr.oregonstate.edu/~zhangluy/tools/class-content/form_tests/check_request.php or your own link as long as it is working. Forms that do not actually transmit the data somewhere will not receive full marks.
One page has unordered HTML list with several entries. The horizontal menu does not count for this requirement.
There is one button to download files (map to the farm, menu in the restaurant, a personal CV, etc.) The downloaded file can either open in the browser or download to the local computer.
There is a link that you can click and leads to outside webpages (LinkedIn, Yelp, email, etc.)
You are allowed to add other features not listed above to your website as long as they are functional and serve some purpose in your website.
You should use at least HTML/CSS and JavaScript in your project.
 

Things to keep in mind:

You need to search online or read books to learn the skills you need for this project by yourself. You can post questions on Piazza if you couldn’t solve some technical difficulty after some research. Check out the resource link page on Canvas for more information (Start Here - Useful Links) and also W3School for short tutorials (https://www.w3schools.com/).  You are allowed to use other existing APIs (like Bootstrap for CSS) for your project.  If you are not sure about certain resources, ask us on Piazza.
You are not permitted to use frameworks such as Angular and React.
There are a lot of website templates online. You can learn some features or settings from these templates, but you can’t copy the whole templates and use it as your own project.
You need to design your page first before you actually start coding. Remember that your pages should be presentable.  It doesn't need to look like a professional website to get the full grade, but when we look at the pages, we should be able to tell that you have put some efforts to design your pages.
You can build a simple website that meets the requirement first, and add more features later if you have time. 
If you use pictures/videos from other resources (not owned by you), please cite the resources to avoid any copyright issue.
The content of your website doesn’t matter. We will not grade based on the content (for example, we won’t look at your CV attached in your website to see whether it is a good one).  So just put something meaningful there, and if you want to make your website real, you can update the content later.
You should spend less time designing and making things pretty and spend more time on implementing interesting code. You can challenge yourself to implement some more advanced features, such as a form that needs to submit somewhere, a picture with a border, some backend admin features controls.
Many website functions rely on the database access which will be taught in CS340. We will touch it a little bit in week 9.  We won’t require you to implement the database related functions in this project.  Try to use all the skills you learned so far in this course to build your website.  If your website only uses HTML/CSS without JavaScript code, your project will be deduct 10% points.
For a few of you who take this course together with CS340, you are allowed to use part of your code from that course project for this project, but don't submit an identical project for both courses.
 

Grading and Extra credit:

As long as your website meets the requirements listed above and your program has good coding style, you will get full points.  TAs will pick several best website candidates from their grading group and put these links in a poll on Piazza.  The whole class will vote for the best projects and the ones that get the most votes will receive 10% extra credit as a reward.  To select the best website candidate, we will count how many different features are included in your website and the technical difficulty in implementing these features. We will also look for the good layout of the webpages and the design of the website as a whole.  

The project allow late submission.  But if you submit it late, you won't get the opportunity to compete for the extra credit poll. 

 

What to do and expect:

Stage 1: During the first week of the three week period, you need to choose a theme for your website, plan it, design it, collect materials, learn new skills, and submit a proposal which briefly describes the structure and features of your website.  You should have a sketch of your website before you actually start coding.  Put your thoughts on paper first and finalize it.  You can submit the proposal as soon as it is done and go ahead to work on your website.  The purpose of submitting a proposal is to push you to start as early as possible and don’t wait until the last week to get started. If your website changes a little bit as you develop it from the original one you proposed, you don’t need to submit a new proposal.

Stage 2: You can build the layout of your webpage now.  Write the homepage first, and then the subpages.   Add different features one by one.  At this stage, you don’t need to worry about the appearance (text color, typography, etc.) and content too much.   

Stage 3: After the main part of the webpage is done, you can adjust the details to make the webpages more presentable, such as theme colors, text typography and animation effect.  You can also replace the text content with something more meaningful.  After finalizing the webpages, publish your website online.  You can host your pages on ONID or the engineering server following the instructions in the link:

http://oregonstate.edu/helpdocs/accounts/onid/using-your-onid/onid-personal-website-information#connect-home

https://it.engineering.oregonstate.edu/where-do-i-put-my-personal-webpages

Stage 4: Your project should be complete after stage 3.  But if you are interested, you can add more features and even the database supported functions after the course is ended.  If it is a personal website, you can even use it for job hunting! 

 

What to submit:

Proposal (10%): use one or two pages to briefly describe your website design. Submit it as a PDF file on Canvas. It is due in week 6.
Project (90%): put all your files in a zip file and submit it on Canvas. Name the zip file as Project-2020Spring-LastName-FirstName. In the textbox, enter the link to your website and also give your website a name, for example, Tom's personal website.  It is your responsibility to make the link working before the grading is done.