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:
- Create web pages which demonstrate a working knowledge of HTML, CSS, Web media, Web forms, error handling, and validation of user input
- Create and demonstrate functional and usable data-driven websites which comply with accessibility, usability, privacy, ethical and other web standards
Overview
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
- http://www.w3schools.com
- https://developer.mozilla.org/en-US/docs/Learn
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
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.
Content
- 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.
Header
- To identify the website as your dedicated website, provide a relevant heading / title banner and/or image/logo
Navigation
- 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.
Footer
- 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:
- Submit all your code files in a zip folder on Moodle.
- You can upload your website on any free hosting website and provide the link of the website in Moodle.
- Submit your files before the deadline to avoid late submission penalty.
Marking Rubric
| Criteria | Fail (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 omissions | Website meets some of the functionality specified with more than one major error or omission | Website meets most of the functionality specified with one or more major errors or omissions | Website meets most of the functionality specified with only minor errors or omissions | Website meets all of the functionality specified |
| Layout (6 marks) | The layout and navigation is confusing | The layout or the navigation is confusing | Good layout and navigation | Very good layout and navigation, closed to professional standard | The layout and navigation is professional |
| Rich media (3 marks) | No rich media included | Media included, but not the best choice of media and format (e.g. takes long to load | Media included, but an okay choice of media or format (e.g. takes long to load) | Good choice of media and format | Professional inclusion of rich media in the most optimal format |
| Total Marks out of 15 |
Visit:https://auspali.info/
Also visit:https://www.notesnepal.com/archives/767
YOUR COMMENT