Question: 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
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 doesnt 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 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.
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 couldnt solve some technical 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 cant copy the whole templates and use it as your own project.
You need to design your page first before you actually start coding.
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 doesnt matter. We will not grade based on the content (for example, we wont 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.
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 wont 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.
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.
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
