In this project, you need to use HTML/CSS and JavaScript to build a simple websi

ID: 3722312 • Letter: I

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 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 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 couldn’t 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 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.

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.

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.

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 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 (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!

Explanation / Answer

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Resume Template</title>

<style>

html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}

</style>

</head><body class="w3-light-grey">

<br><h2>RESUME</h2>

</div>

<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>

<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>Germany</p>

<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>mailtotest</p>

<hr>

<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>

<p>Adobe Photoshop</p>

</div>

<p>Photography</p>

</div>

<p>Illustrator</p>

</div>

<p>Media</p>

</div>

<br>

<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>

<p>English</p>

</div>

<p>Spanish</p>

</div>

<p>German</p>

</div>

<br>

</div>

</div><br>

</div>

<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>

<h5 class="w3-opacity"><b>Front End Developer</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2018 <span class="w3-tag w3-teal w3-round">Current</span></h6>

<p>Hi, I am happy to introduce myself as John started working on front-end development tools recently.I am interested in exploring technologies such as: HTML,CSS and Bootstrap</p>

</div>

<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Alumni</h6>

<p>Web Development and much more!</p>

<hr>

</div>

<h5 class="w3-opacity"><b>MASTERS</b></h5>

<p>Master Degree from Harvard University</p>

<hr>

</div>

<h5 class="w3-opacity"><b>School of Coding</b></h5>

<p>Bachelor Degree</p><br>

</div>

</div>

</div>

</div>

<p>Find me on social media.</p>

<p>Powered by Self Learning</p>

</footer>

</body></html>

Basics:

Read me Instructions:

#NOTE: For further doubt clarification, just drop comment in comment section. Thank you!

Navigate

In this project, you need to learn how to create, execute, and terminate process

In this project, you need to use HTML/CSS and JavaScript to build a simple websi

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

In this project, you need to use HTML/CSS and JavaScript to build a simple websi

Question

Explanation / Answer

Related Questions

Navigate