Course Project Solution

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 cre 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 or videos.



Website has 1 homepage and at least 3 subpages; the homepage and subpages have a horizontal menu that leads to the other pages.



The homepage has picture carousel animation (slideshow effect, for example, pictures in this page http://oregonstateparks.org/ (Links to an external site.)Links to an external site.)



Have a scroll box in one page. You can put anything inside the scroll box.



One page has unordered HTML list with several entries.



There is a 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 technic difficulty after some research. Check out the resource link page on Canvas for more information (https://oregonstate.instructure.com$WIKI_REFERENCE$/pages/useful-




links) and also W3School for short tutorials (https://www.w3schools.com/ (Links to an external site.)Links to an external site.). 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.




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 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 gr



(for example, we won’t look at your CV attachedwhether it inis your we a good one). So just put something meaningful there, and if you want to make your website real, you can update the content later.

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 th 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.










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 best website links will be published at the end of the term on the code sharing session.










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 toes aget starte little bit as you develop it from the original one you propo 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 nee 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 (Links to an external site.)Links to an external site. https://it.engineering.oregonstate.edu/where-do-i-put-my-personal-webpages (Links to an external site.)Links to an external site.




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 (20%): 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 (80%): put all your files in a zip file and submit it on Canvas. Name the zip file as Project-2018Spring-LastName-FirstName. In the textbox, enter the link to your website. It is your responsibility to make the link working before the grading is done.