Assignment Instructions

Purpose of the assignment: It is an individual assignment that provides an opportunity to practice again techniques and skills involved in designing webpages using HTML5 and CSS..

Swinburne University of Technology
Faculty of Science, Engineering and Technology
Web Development COS10024
Assignment 2, TP3, 2020
Due Date Tuesday 19th January 2021 at 23:59
Submission Method CANVAS
Contribution to Final Assessment 15%
cc JavaScript will be used to validate user input data before they are submitted to the server for processing. Moreover, JavaScript will be used to add more interactivity to the webpages.
Requirements and Specifications
The assignment requires that you develop a website for Bruno Pizzeria, a pizza store. The director of Bruno Pizzeria, Mr. Bruno, is interested in developing a website that allows users to register and place orders for pizzas online.
Task 1: Website Design
After several meetings with the Mr. Bruno, it is agreed that 3 webpages will be developed, the home page, the registration page and the order page.
1.1 Folder Structure
The directory structure shown in Figure 1 is to be created.
Figure 1: Directory structure
1.2 Additional files may be added depending on your own design. Website Structure
Choose your own webpage structure. A fully functional navigator must be provided on each webpage. Users should be able to access all 3 webpages using the navigator.
1.3 Webpage Layout
You need to design an appropriate webpage layout for Bruno Pizzeria. Following structural elements must be used:
• header
• nav
• main
• footer
• aside
• article
• section
You are free to use other structural elements, e.g., div .
Task 2: Website Development
2.1 HTML 5 Webpages
The three webpages must be developed using HTML5. All pages must not contain any deprecated elements/attributes. The content requirements for each webpage are as follows:
• Page index.html is the homepage of the website. It should provide introductory information about Bruno Pizzeria, its history, menu, location, available types of pizzas, etc. Feel free to refer to real-world pizza store websites for example. Information about at least three types of pizzas must be provided, with at least three original or explicitly referenced images.
• Choose the right types of input elements for different required information in the forms, e.g., a textbox for username and a group of checkboxes for favourite pizzas.
• Other input elements can be used in your forms if necessary and appropriate for the content. Set the method attribute of the form to POST and the attribute action to: http://mercury.swin.
• All webpages must be fully validated.
• Page registration.html is for users to register. A form must be provided, which contains different input elements that allow users to enter registration information, e.g., username, password, gender, email, favourite pizzas, etc. The following input elements must be used: o label o textbox o password o radio button o checkbox o select list o submit button o reset button
• Page order.html is for users to place orders. A form must be provided to allow users to enter the following data to place an order:
o Delivery or pickup o Delivery address (only if delivery is selected) o Billing address o Contact number o Email for receipt o Pay on pickup or online
o Credit card information (only if pay online is selected)
: CSS Files
At least one CSS file is to be created to style all three HTML pages. Use any CSS properties you deem necessary and appropriate for the presentation. The following CSS properties must be used:
• font-family
Other CSS properties can be used. You are encouraged to be creative in your design. You will be marked not only on the use of the abovementioned CSS properties and CSS selectors, but also on how professional, beautiful and creative your webpages look.
Make sure the styles of all three webpages are consistent.
You CSS file(s) must be fully validated.
• background-color
• background-image
• border
• text-shadow
• box-shadow
• margin
• padding
• float
The following types of CSS selectors must be used:
• element e.g., h1 {}, p {} • class, e.g., .image {}, .highlighted
• id e.g., #tbName {}
• grouping e.g., h1, h2, h3 {}
• contextual e.g., ul li {}
• pseudo-classes e.g., :hover {}
2.3: JavaScript File
A JavaScript file must be created for the registration and the order pages to validate the input data before forms are submitted to the server for processing. The JavaScript must check that none of the required input fields are blank. check that the password is at least 8-character long; check that the postcode is 4-digit.
show an alert or inline error messages to display all the errors in the input fields;
allow the form to be submitted only if all the input data are valid.
Task 3: Website Enhancement
3.1 Features
Implement the following 3 features using appropriate HTML, CSS and JavaScript:
• Highlight the menu item in the navigator corresponding to the current webpage.
• In page order.html, create a checkbox with label “same as delivery address” somewhere appropriate near the fields for billing address. When this checkbox is checked, the fields for billing address will be filled with the delivery address automatically. If the delivery address is not completed when this checkbox is checked, display an alert or inline message: “Please enter your delivery address first”.
• Allow users to choose from three types of credit card: Visa, MasterCard and American Express. Based on the type of credit card, limit the length of the credit card number, 16 digits for Visa and MasterCard, 15 digits for American Express. Features Page
Create a fourth page named features.html and incorporate it into the navigator. On this webpage, list the features that you have implemented and provides hyperlinks to indicate where those features are implemented.
Task 4.0 Submission
Before submitting the assignment, please ensure that you have completed or considered the following:
• Check your assignment against the attached marking scheme.
• Check Canvas for announcements related to the assignment;
• Ensure that all HTML and CSS files can be fully validated;
• The assignment is your original work. If your assignment is not your original work, your result will be 0 marks for this assignment;
• Provide references for all third-party contents used on your webpages;
• Test your web pages on the Mercury server. If your assignment cannot be displayed on Mercury properly, penalties will apply; and
• Make sure you contact your convenor before the due date, if you are having trouble in submitting the assignment on time.
The assignment should be submitted as an individual work through CANVAS and mercury server on or before the deadline.
• Compress all your HTML, CSS, JavaScript and image files into a zip file named “” to submit via CANVAS.
• Make sure you keep a copy of the assignment.
Marking Scheme
The assignment will be marked out of 100.
Mark Requirements
10 Pages
CSS 10
JavaScript 40
Highlighted Menu Item 10
Input of
20 Billing
Credit Card 10 Length
• Used all required HTML elements
• At least 3 HTML webpages (2)
• Webpages fully validated against HTML5 (3)
• Source code properly indented and organised (1)
• Source code properly commented
• At least 3 pizza images (1)
• All required CSS properties used.
• All required CSS selectors used.
• Appropriate and fluid page layout.
• CSS files fully validated against CSS3 (1)
• CSS code properly indented and organised (1) • CSS code properly commented (1)
• Consistent styles for all web pages
• Professional, beautiful and creative webpage style (1)
• No errors in code. (10)
• Fields validated as required. (20)
• Form submitted only when entered data are valid. (2)
• All error messages displayed in an alert or as inline messages. (4)
• Code properly indented and organised. (2)
• Code properly commented. (2)
Feature properly implemented (5)
Feature properly implemented
Feature properly implemented (5) Deductions
• Web pages not fully validated against HTML5
• Web pages not displayed properly
• Not enough web pages
• Lack of required HTML elements
• Lack of required contents
• Deprecated HTML elements/attributes used
• Embedded or inline CSS
• Links on web pages not working
• Lack of required images
• Images too large or too small
• CSS files not fully validated against CSS3
• CSS files not properly applied to web pages
• Inappropriate web page layout
• Inappropriate contrast between foreground and background text colour
• No comments or inadequate comments
• Lack of required CSS selectors
• Lack of required CSS properties
• Inconsistent styles for different web pages
• Webpage style too simple
• Fields not validated as required.
• Form submitted with invalid input data.
• Error messages not displayed as required.
• No comments or inadequate comments.
• Used inline or embedded script
Feature not properly implemented
Feature not properly implemented

Calculate Price

Price (USD)

This assignment has been solved!

Place your order for a custom solution to this or a similar paper.

Why Choose Us For Your Assignment?


We value all our customers' privacy. For that reason, all information stays private and confidential and will never be shared with third parties.


With our service you will never miss a deadline. We use strict follow-ups with our writers to ensure that all papers are submitted on time.


We have no tolerance for plagiarism. All papers go through thorough checking to ensure that no assignments contain plagiarism.

Money Back

You feel unsatisfied with your results? No worries. We offer refunds to our customers if any paper is not written according to the instructions.

Clients Love Us

Client #121678
Client #121678
Read More
This is by far the best I have ever scored in a custom essay. I am surprised the writer handled this assignment so well despite the short notice. I will definitely use your service next time.
Client #21702
Client #21702
Read More
When I was recommended to you by my friends, I wasn't sure you could deliver excellent results for Masters research papers until I submitted my first order. I am all yours now.
Client #20730
Client #20730
Read More
Excellent Services! You are the only assignment helper I can rely on. I have worked with many before and your services are exceptional. I have recommended you to my friends and the results are similar.
Client #20387
Client #20387
Read More
I rarely write reviews online but your services are worth promoting. My paper was so urgent I was sure I was gonna miss the deadline but you turned things around. You are awesome!
Client #20189
Client #20189
Read More
I am a satisfied customer. I know I should have given a 5 star because you deserve it but I will give 4.6 because I almost missed a deadline because of a revision. Luckily it was minor and the writer acted promptly.
Client #20187
Client #20187
Read More
Great paper but there is still some room for improvement. I am impressed by your fast responses and how you tacked my concerns professionally. Thank you for being among the few genuine essay writing service providers.
Client #19783
Client #19783
Read More
I can't thank you enough for being a great part of my college life. I recommended you to two more of my friends. I am sure they will be making their orders soon. I love the fact that you offer free pages for referrals. I will be referring a few more and maybe I won't have to pay for my next two paper, LOL.