INFO101: Website Project

发布时间：2024-05-23

Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

INFO101: Website Project [30%]

Due: 5pm Tuesday 28^st May 2024

(Your company name)

Former university friends Luca Smith, a professional chef passionate about sharing his culinary skills, and Aria Patel, an e-commerce expert, have teamed up to create a unique company dedicated to offering virtual cooking classes for a wide range of individuals, from beginners to seasoned cooks. Their vision is to streamline the learning process for aspiring chefs of all levels by providing a "one-stop-shop" platform where customers can easily book virtual cooking sessions. These sessions are designed to cater to various skill levels and culinary interests, including premium classes led by well-known chefs for those looking for an elevated cooking experience. Participants can select a class based on their skill level, preferred cuisine, dietary requirements, and lesson schedule (i.e. day and time). This innovative approach allows individuals to enhance their cooking skills, learn new recipes, and experience the joy of cooking within the comfort of their own kitchens.

Your Task for this Project

Aria and Luca have enlisted you to develop a website for their company. You are expected to effectively use your INFO101 skills to do this and to help them realise their goals. This includes coming up with the company name and appropriate branding, showcasing the services offered by the company, and creating the content, functions, and layout of the website.

The website should have a clear target audience and purpose, it should be informative and offer clear insight into the company and its values, and it should be easily navigable by the user.

The pages of the website should be consistent (i.e., font, colour, and formatting) to give a comfortable user experience. The brand design and logo for the website should also be clear and consistent with the goals of the company. Include a map of the company’s headquarter on one of your website pages.

Importantly, the user should feel that their experience is unique, which means that you’ll need to get creative. Try to set your design apart from the design of websites for other organisations.

You are expected to showcase the use of a variety of HTML, CSS, and JavaScript, as learnt in INFO101 throughout your website. Under no circumstances should you use a template for this project as this would not be a demonstration of your coding skills learnt in INFO101. You will be required to provide informative comments on your coding to demonstrate your understanding.

The website MUST contain the following FOUR html pages:

1. A home page – the HTML document should be titled “index.html”. On this page you should write a brief “who we are” story (150 words maximum) about the company and the company’s mission. Include company contact information on this page. You need to make this up – be creative!

2. A services page - the HTML document should be titled “services.html”. This page should display the range of services provided, including details of charges, available lesson time slots, cuisines and instructors.

3. A frequently asked questions (FAQ) page – the HTML document should be titled “faq.html”. It should show a list of answers to questions customers frequently ask, e.g., “What ages are appropriate?”, “How many attendees are allowed per lesson?”, “What if plans change?”. At the end of this page, you should add a form that enables customers to provide feedback to the company or ask any questions not addressed in the FAQ. Please remember to add your own questions in addition to those given here.

4. A registration and rental page – the HTML document should be titled “regpay.html”. This page should contain four things.

(i) A form that allows customers to register as a customer/create a site account and enter their details for future use.

(ii) Customers should be able to enter address details including mobile phone contact details.

(iii) Customers should be able to select the type of lesson they want to have, including the date, time, skill level and the preferred cuisine.

(iv) A form that permits customers to pay for lessons they have arranged via the website. Two or more functioning ‘buttons’ should be present (e.g., “register” and “pay now”), and they should each call a separate JavaScript function.

You are not expected to create fully functioning forms that can actually register people or take payments, but the buttons should display the appropriate messages that indicate that a JS function has been accurately used (for instance a correct result from a calculation operation and a message such as, “Thank you for registering!”).

You are expected to integrate content from your Workshops and Workshop Guides. As outlined in the marking rubrics the skills you have learnt in the workshops will form the basis of the assessment of your project. You are welcome to integrate HTML, CSS and/or JavaScript elements from outside of the workshop guides, in addition to what you have learnt in this course. In that case, you are required to reference any ‘borrowed’ code, and to make sure you are doing that correctly. You also need to add a comment to tell us if you are using coding skills from previous web projects/courses; we need to know where your knowledge comes from so that we can be sure to assess your work accurately! Note that effectively implementing what has been covered in the workshop guides will be sufficient to obtain full marks of the coding requirements of this project; you do not need to do ‘extra’.

Project Submission Instructions

In your Website Project folder on Nuku there is a Zip folder containing: 4xHTML, 1xJS, and 1xCSS documents. To use the files correctly, you will need to extract the zipped folder and save the individual files within the same folder in your computer. You may choose to use this as a starting point, or you can begin on your own. Do not create and submit more than the number of documents stated here (e.g., more than 4 HTML documents). If you do, the extra documents will not be considered (see “Limits on number of files that will be marked”).

If there is any part of this brief, project, or code you are not sure of, please refer to your workshop materials and/or post questions on the Nuku discussion board. Please pay attention to the following:

1. When uploading your file please follow the submission guide on Nuku. This guide is in the same content area as this assignment brief and submission link.

2. Please remember to check your @myvuw email address in the weeks following your website submission. You will be contacted through that address if there are errors which require you to resubmit.

3. We strongly advise you to submit your work a few days before the deadline. We recommend that you use Google Chrome, Microsoft Edge, or Firefox browser to submit this assignment. Alternative browsers may result in errors.

4. We cannot ‘pre-mark’ assignments (i.e., tell you, in advance, whether your assignment is likely to achieve a passing grade). We do recommend that you perform a self-assessment before submitting your attempt, using the rubric as a ‘checklist’.

5. Any projects submitted after the due time will incur a late penalty of a 10% deduction in the available grade per day, and any submissions made 5 days (or more) after the due date will not be accepted for grading.

6. A reminder that a ‘credible attempt’ of this assignment is a mandatory course requirement (MCR). This means that, in order to pass the course, you MUST submit this assignment, with an obvious attempt to address ALL of the requirements stated throughout this project brief. No submission means that you will have effectively failed INFO101.

Website Project Marking Rubric

Content	Grade Contribution [10 marks]
Target & Purpose: A user should be able to understand what the company does from reading the "who we are” blurb and information about the company information on the Home Page.	3 marks
Information: All information on the website should offer accurate and clear insight to the user about the company and the services they offer.	3 marks
Text: The fonts and effects should be stylistically appropriate, and professional in presentation.	2 marks
Spelling & Grammar: All text on the site should be readable to the user and exhibit no spelling or grammar errors.	2 marks

Structure and Layout	Grade Contribution [8 marks]
paConsistency: The user should experience a consistent layout (colour, text, format) across the whole website.	2 marks
Branding: The user should see a connection between the brand and the design features e.g., the logo and company name used.	2 marks
Creativity: Website should feel unique to the user.	2 marks
Navigation: The user should be able to navigate the website easily (e.g., go to different web pages & return to the home page).	2 marks

Code Elements	Grade Contribution [12 marks]
HTML: A variety of HTML elements are provided and documented throughout the website (images, hyperlinks, maps, tables etc.).	3 marks
CSS: A variety of CSS elements are provided and documented throughout the website.	3 marks
JS (Register and pay page): A correct and working use of JavaScript has been provided and documented. The function contains an “if” statement, a variable (“var”) and an operator (e.g., +, -, *, /, %).	2 marks
Lesson Booking Window: Ability to select a specific date and time frame for the lessons	2 marks
Comments: Insightful comments showing clear understanding of code elements included throughout	2 marks

Limits on number of files that will be marked

Please note: The following criteria will be applied if you submit more than the number of files required for this project (i.e., more than 4 HTML files, 1 CSS file and 1 JS file). Only the HTML files that match the pages listed will be marked and only the first alphabetical CSS and JS files will be marked. No other files will be considered.

Website Project Marking Rubric – Extended Version

Assessment Areas		Exceeds Expectations	Meets Expectations	Below Expectations	Missing/Not appropriate
Content [10 marks]	Target and purpose	>1.9 to 3 - The user can very easily understand what the company does from reading information on the home page. This clearly derived from the project brief.	>1.4 to 1.9 – The user can understand what the company does from reading information on the home page. This is derived from the project brief.	>0.9 to 1.4 – The user can somewhat understand what the company does from reading information on the home page. This is derived from the project brief.	0 to 0.9 - The user cannot understand what the company does from reading information on the home page / This is not derived from the project brief.
	Information	>1.9 to 3 - All information on the website offers accurate and clear insight for the user about the company and the products offered	>1.4 to 1.9 - Accurate information about the company and its products is offered although his could be clearer in some pages.	>0.9 to 1.4 - Information about the company and its products is offered. Could have major clarity issues or limited information.	0 to 0.9 - Incorrect information / Information is not derived from the project brief.
	Text	>1.4 to 2 - The fonts and effects are stylistically appropriate, and professional in presentation	>0.9 to 1.4 - The fonts and effects are stylistically appropriate in presentation. Some minor issues.	>0.4 to 0.9 - There are some major readability issues with the fonts and effects used.	0 to 0.4 - The fonts and effects / styles are not readable due to poor contrasts.
	Spelling and Grammar	>1.4 to 2 - All text on the site exhibits good language use with no spelling or grammatical errors.	> 0.9 to 1.4 - Some spelling and grammar errors are noticeable, but generally okay.	>0.4 to 0.9 – The work needed to be revised for major spelling and grammar errors.	0 to 0.4 No readable text / gross grammatical errors throughout.
Structure and Layout [8 marks]	Consistency	>1.4 to 2 - The user experiences a consistent layout (colour, text, format) across the whole website.	>0.9 to 1.4 - The user experiences a mostly consistent layout (colour, text, format) across the whole website.	>0.4 to 0.9 – There are many issues with layout consistency (colour, text, format) across the whole website.	0 to 0.4 - The user does not experience a consistent layout (colour, text, format) across the whole website.
	Branding	>1.4 to 2 - There is an excellent connection between the brand and the design features e.g., the logo, company name, and colours used	>0.9 to 1.4 - There is a good connection between the brand and the design features e.g., the logo, company name, and colours used	>0.4 to 0.9 - There is a limited connection between the brand and the design features e.g., the logo, company name, and colours used	0 to 0.4 - The user does not see a connection between the brand and the design features e.g., the logo, company name, and colours used
	Creativity	>1.4 to 2 - Website feels unique to the user	>0.9 to 1.4 - Website feels mostly unique to the user	0.4 to 0.9 - Some elements feel too familiar	0 to 0.4 - Website does not feel unique to the user (i.e., copied from a template)
	Navigation	>1.4 to 2 - The user can navigate the website easily (e.g., follow links, go to different web pages and return, no dead links)	>0.9 to 1.4 - The user can navigate the website somewhat easily (one link may be problematic)	>0.9 to 1.4 – There is limited navigability. The user encounters some broken or dead links.	0 to 0.4 - The user cannot navigate the entire website. Navigation bar does not work/not there, and all pages are not linked.
Code Elements [12 marks]	HTML	>1.9 to 3 – A variety of HTML elements have been provided throughout website	>1.4 to 1.9 - Some HTML elements have been provided throughout website	>0.9 to 1.4 - Some key HTML elements are missing.	0 to 0.9 – Only one HTML element provided
	CSS	>1.9 to 3 - A variety of CSS elements have been provided throughout website	>1.4 to 1.9 - Some CSS elements have been provided throughout website	0.4 to 0.9 - Some key CSS elements are missing.	0 to 0.9 – CSS missing throughout the website
	JS (Register and Pay Page)	>1.4 to 2 - A correct and working use of JS has been provided in the registration or payments form (or both). This JS function contains “if” statement, variable (“var”) & operator (e.g., +, -, *, /, %).	>0.9 to 1.4 - A mostly working use of JS has been provided in the registration or payments form (or both). The function must contain some of the following: “if” statement, variable (“var”) & operator (e.g., +, -, *, /, %).	0.4 to 0.9 - There is a clear attempt to provide working JS features, but some errors have been made that prevent everything from running as intended.	0 to 0.4 - No JS features provided / JS file is missing / JS has been used but does not address the question (e.g., JS has been used to create interactive dates, time, calendar etc.)
	Lesson Booking Window	>1.4 to 2 – Ability to select type of lessons required, and specific date and time window is available. Looks professional.	>0.9 to 1.4 – Ability to select type of lessons required, specific date and time window is available. However, presentation is amateurish.	0.4 to 0.9 – Clear attempt at lessons selection, and date and time window but some functionality is lacking.	0 to 0.4 – No ability to enter type of lessons required or date and time window.
	Comments	>1.4 to 2 – Insightful comments demonstrating clear understanding of code elements used are included throughout.	>0.9 to 1.4 Comments are included and generally show understanding of code used with some gaps.	0.4 to 0.9 - Comments tend to be generic and do not demonstrate full understanding of code used.	0 to 0.4 - Comments are missing or patchy and do not demonstrate understanding of code used.