Professional Documents
Culture Documents
CW weighting 40%
Results date and type of feedback Marking week 4 marks published via SRS
6. To create simple web page using text editor and appropriate software;
7. To evaluate site designs and structures.
Task overview
This is an individual task. You are required to design and build a simple website on a topic specified
below using any appropriate software (e.g. Sublime Text, Notepad++, Atom, Dreamweaver,
FrontPage, or any open source software). Together with the website, you will be required to submit a
report.
Instructions
Website (60 marks)
Note: the site must have sensible content, i.e. the pages must have some meaning. Your pages must
not be crude, offensive or defamatory.
Your website must comply with rules and guidelines provided below.
1. Topic
Create your website based on one of the following topics:
2. Pages
Number of pages
Minimum number of pages: 3
Recommended: 5 pages
Maximum: 10 pages (any pages above this limit might not be marked)
Required pages
Home page (index.html)
About page with your student ID and brief explanation of website purpose (about.html)
The rest of pages is up to you
Page structure
Each page must follow the structure of proper HTML document, which requires:
Document type declaration
HTML root element
Head and body elements
Title element
Naming
Each page must have proper file name and title:
Files must be named without any spaces or capital letters. You can use dashes - or
underscores _ instead of spaces
Both file name and page title must be meaningful and describe page content
2. Layout
Page layouts should consist of semantic layout elements introduced in HTML5 standard. These
elements include:
<header> <section> <aside>
<nav> <article> <footer>
3. Main navigation
Must be present on each page
Must allow accessing Home page and any major section of the website in 12 clicks
Current page/section should be visually distinguished
5. Content
Text and images
Should be placed where appropriate
Text should be informative, interesting and fit website topic
Images should illustrate topic well, be of good quality and not distorted
At least one image should be used
Text and images should be properly sized and formatted and fit to websites overall
design
Table
At least one table (22 cells minimum) with some tabular data relevant to the topic.
Each table cell must contain either text or an image
Video/audio
At least one video or audio should be embedded. You can use either:
o dedicated HTML5 element (<video> or <audio>) AND/OR
o <iframe> embedding from YouTube or other video/audio hosting
External links
At least three links to other websites opening in new browser tab or window Commented [AR1]: If they have reference at the end of
every page and it opens in new tab it could be considered
A mailto link to webmasters email address. as external link. I think we can require them to implement at
least three external links.
o Email address must include your student ID
Commented [EL2R1]: Changed from one link to three
o You can use your email for Turn-it-in account links
o Do NOT use email address which contains your name, even partially Commented [AR3]: Please specify that it SHOULD NOT be
their personal address (it was the case in previous year CWs).
Could be their ID, e.g. 00007777@wiut.uz
Usage of Bootstrap or other CSS frameworks/templates is not allowed Commented [AR6]: AGREE
7. JavaScript
All scripts must be stored externally in scripts folder.
Simple JavaScript functions should be used to add some dynamics or/and special effects to the
website, e.g. animations, slideshows, dynamic menus.
If jQuery or other JS libraries/frameworks are used, they must be referenced in comments and inside
the report.
8. Validation
Validate your HTML and CSS code to ensure that you have not violated any standard:
HTML validation: https://validator.w3.org/
CSS validation: https://jigsaw.w3.org/css-validator/
Recommendations
Use simple backgrounds text layered over complex or busy backgrounds is difficult to read
Use web-safe fonts, preferably sans serif for main text. Sans serif fonts, such as Arial,
Helvetica or Verdana, are easier to read on screen than serif fonts, such as Times New
Roman.
Resize and compress images in your pages, so the web page gets loaded fast.
Test how your web pages render in popular browsers (Google Chrome, Mozilla Firefox, Opera
or Internet Explorer).
Introduction (5 marks)
Briefly describe what your website is about and what software you have used in order to create your
website and why.
Note: You are allowed to use graphical templates (in PSD or any other graphics format), but you
MUST NOT use any HTML/CSS pre-made templates available online.
Include fragments of the code followed by detailed explanation. If this part is missing, the mark will be
substantially reduced.
Conclusion (7 marks)
What did you learn while doing this coursework? What was the easiest part of your work and what
was the hardest one? How would you improve this website if you had more time and skills?
Submission requirements
All your files should be arranged into the following folder structure and be compressed into one ZIP
archive. E.g.:
0000####.zip
0000####.docx
name-of-your-website
images
(all image files)
styles
(all CSS files)
scripts
(all JS files)
media
(only if you store video/audio files locally)
index.html
about.html
(the rest of HTML pages)
No need for hard copy submission, but you must submit your ZIP archive electronically at both
Intranet and Moodle. The details for submission to both systems will be provided before the deadline.
In addition, it is your responsibility to put word-processed report (Word file) through the Turn-it-in anti-
plagiarism software before submission. The details for Turn-it-in submission will be provided before
the deadline as well.
Your name should not appear anywhere neither in report, nor on the website.
Report formatting
Font either Arial, Times New Roman, or Calibri; size 12pt
Line spacing is between 1.2 and 1.5 lines; spacing 8pt after paragraph
Include standard cover page (available at Intranet Documents) with your ID number, module
title and ML name
Include a contents page giving the headings and page numbers of each section
Use Westminster Harvard method of referencing
Pages should be numbered
Your ID number should be present on each page
Include a contents page giving the headings and page numbers of each section.
Assessment criteria
Website 60
Navigation
7
Main navigation and sitemap are well-designed and conform CW requirements.
Content
Text is informative, interesting and fits website topic.
Images illustrate topic well, are of good quality and are not distorted.
At least one table is given with tabular data relevant to the topic.
At least one video OR audio is embedded and it fits website topic. 11
At least three links to other websites opening in new browser tab or window are
given.
A mailto link to webmasters email address is given (has ID, but not student
name)
Validation
HTML and CSS code conform HTML5 and CSS3 standards respectively no validation
errors/warnings are found when checking with validation services 15
Markup Validation Service (https://validator.w3.org/#validate_by_input)
CSS Validation Service (https://jigsaw.w3.org/css-validator/#validate_by_input)
Report 40
Introduction it is clear what the website is about, what software have been used in
5
order to create the website and why.
Sketches for each page with distinct layout and content are included. The layout is
8
clear. Screenshots are NOT used, and drawings/presentation are accurate.
It is clear how visual design was created. Source(s) of inspiration are described and it is
5
clear how they influenced design. Any re-used graphical templates are mentioned.
Code fragments are included and clarified for the following parts:
Navigation
10
Any re-used code
JavaScript
Reference list includes entries for all re-used information, be it code, graphical
template(s), text, image(s), video(s)/audio(s), etc. It is written using Westminster 5
Harvard referencing format and is sorted alphabetically.
Marking schema
See the Excel file attached. Commented [AR9]: We should not make it available for
students.
Assessment criteria is enough
Commented [EL10R9]: Yes, this section will be removed
from task description for students.