Information Technology

ICT726 Web Development

27 April 2023 16:21 PM | UPDATED 1 year ago

ICT726 Web Development :

ICT726 Web Development
ICT726 Web Development
ICT726 Web Development   Assignment 1 Static Website
              March 2023

Individual Assessment:

Weightage: 15%

Submission deadline: Week 6

This assessment relates to the following Learning Outcomes:

  1. Create web pages which demonstrate a working knowledge of HTML, CSS, Web media, Web forms, error handling, and validation of user input
  2. Create and demonstrate functional and usable data-driven websites which comply with accessibility, usability, privacy, ethical and other web standards


In this assignment, you are required to design and develop a personal blog website. The labs will help you to acquire the basic knowledge to complete the website. It is highly recommended that you complete your lab work each week. You can also refer to online resources. The following are two great websites to check while coding


Website Requirements

You must adhere the following requirements when developing your website.

Home Page Requirement

  • The filename for homepage should be “index.html”.
  • The purpose of the website should immediately be clear from homepage
    • It must contain the short introduction of yourself and the purpose of blog. Example: “Sara Carter”. Personal Trainer. Exercise isn’t punishment, here I’ll share the tips and methods to get best of your exercise.”
    • A short paragraph (20-50 words) about the different topics discussed in the blog.
  • Make this page more creative than the rest of your web pages. Add images, visually appealing design
  • Try to reflect your style and personality (with the focus on your career ambitions). First impressions count!

Contact Page Requirements

  • Give this page an appropriate filename, title, heading (and subheading if required).
  • You should include relevant text with links to contact you such as email and social media.
  • This page must have an HTML Contact Form using the
    element: It must:
    • Be well-designed and styled with CSS, and its intent must be clear;
    • Use HTML5 built-in form validation and/or JavaScript to validate the data;
    • Output error messages/user feedback when there is user input errors or form submission success.

Requirements of additional web pages

  • In addition to the home and contact pages, you are given creative freedom to design and develop the rest of your blog website yourself with only a few specific requirements.
  • You need to design and develop three more web pages for your personal website for a total of five that specifically reflect the purpose of the website.
  • Some suggestions (but you may think of your own) are shown below:
    • About, Articles, Archive, Client Stories, Experience, Gallery, Hobbies, Journal, Ideas, Photography, Portfolio, Testimonials. It depends on the type of blog you are creating.

Note that some of these suggestions above would technically require server-side scripting to fully function. In these cases (such as an article, archives, etc.), create a prototype of this web page, focusing on design and layout, with sample content in place. You don’t need to worry about the dynamic data.


  • Give appropriate filenames, titles, headings (and subheadings if required) related to their content. Use at least three pieces of media (image/video/audio).
  • There should be one gallery page which showcase some photos/videos related to your blog content.
  • The gallery must have some interactive visual features such as thumbnail images that display larger version when clicked.


  • To identify the website as your dedicated website, provide a relevant heading / title banner and/or image/logo


  • There should be a clear, intuitive and consistent navigation structure on the website.
  • You need to think about how you will provide navigation to the user, and whether some pages may be categorized together or not.


  • An appropriate and intuitive footer must be included on your website.

General Requirements

  • You are not allowed to use any existing templates, or frameworks such as bootstrap etc. You will receive a ZERO score for HTML and CSS marking criteria if you do so.
  • You are expected to create your own website from scratch using HTML, CSS and JavaScript. (Lab and lecture materials and resources can be used to get help BUT do not use design or layout form lab exercises).
  • This assignment is to develop static website so do not use any server-side scripting languages, such as PHP, ASP, etc.
  • Your design should focus on design rules learned during this course such as
    • Rules of good visual design;
    • Usability guidelines related to color, typography, placement of objects, readability and balance.
    • A solid understanding of the use of other elements such as; contrast, white space, layout, alignment, etc.
  • All text should follow the rules of writing for the web.
  • Images, sound, and other media file sizes optimized for download and display.
  • Well-designed unique and creative websites will be awarded appropriately.

HTML Requirements

  • All your html files must use HTML5 syntax.
  • The structure of your website should be built using HTML5 tags styled with CSS where applicable. Avoid a <div> where a standard semantic tag would be appropriate and use id and class where necessary.
  • Any HTML <form> used on the site should be well-designed and styled with CSS. Functionality of such forms may be limited (no PHP), and only have partial functionality, but should be fully designed, and may contain data validation, error messages, user feedback etc. (either in a pop-up window, simple dialog boxes written with JavaScript, and/or built-in HTML5 validation)

CSS Requirements

  • All content should be formatted and styled using an external cascading stylesheet (CSS). A max of 2 external stylesheets are allowed. Lower scores awarded if you exceed this.
  • Must incorporate at least THREE of the CSS3 styles in a way that improves your web design: Transitions, Transforms (scale, skew, and/or rotate), Rounded Corners, Multi- Column, Opacity, Shadows, or Gradients

JavaScript / jQuery Requirements

  • JavaScript, jQuery and their libraries are allowed to be used (and some image galleries may require these languages) as long as it is all functional on the client side.

Submission Guidelines:

  1. Submit all your code files in a zip folder on Moodle.
  2. You can upload your website on any free hosting website and provide the link of the website in Moodle.
  3. Submit your files before the deadline to avoid late submission penalty.

Marking Rubric

CriteriaFail (0 – 49%)Pass (50 – 64%)Credit (65 – 74%)Distinction (75 – 84%)High Distinction (85 – 100%)
Functionality (6 marks)Website              is barely functional with major errors or omissionsWebsite meets some of               the functionality specified with      more than one major error or omissionWebsite meets      most of                  the functionality specified with one or more major     errors or omissionsWebsite meets most of the functionality specified with only        minor errors             or omissionsWebsite meets all of the functionality specified
Layout (6 marks)The layout and navigation is confusingThe      layout or               the navigation is confusingGood     layout and navigationVery         good layout         and navigation, closed            to professional standardThe         layout and navigation is professional
Rich        media (3 marks)No rich media includedMedia included, but not the best choice of         media and format (e.g.      takes long to loadMedia included, but an               okay choice            of media            or format (e.g. takes long to load)Good choice of media and formatProfessional inclusion        of rich media in the            most optimal format
Total      Marks out of 15     


Also visit: