School of Computing and information Systems

PROGRAMME: BSC BUSINESS INTELLIGENCE AND DATA ANALYTICS

BSC COMPUTER SYSTEMS ENGINEERING

BSC APPLLIED BUSINESS COMPUTING

Web & Multimedia Development Year 1 Semester 2

ASSIGNMENT

Hand out Date: 10 March 2025 Hand in Date: 25 May 2025

Total Marks: 100

Instructions to candidates

1. Candidates must attempt ALL questions.

2. You are to make your submission on turn-it-in. You may consult with your tutor/lecturer on how this will be done.
3. Your Assignment submission must have a cover page with full student details. The cover page will be provided to
students when the Assignment is issued out. On the cover page, you will find an acknowledgement statement which
must be signed by the student as proof or admission or affirmation of one own’s work being submitted.
4. Ensure that you have an account on turn-it-in by going to www.turnitin.com. Use the credentials provided for your
account, for accessing this system. If you do not have your turn-it-in account credentials get hold of the module
tutor/lecturer as soon as possible.
5. Ensure that you have your GitHub account set up and that you have your assignment repository created, where you
will upload your website files.
6. Any work with a plagiarism level above 30 % will not be marked. It is your responsibility to make sure that the
plagiarism level detected in your work is within this level. Monitor the plagiarism rating of your work on regular bases.
If you share your solution with others, chances of the plagiarism rising above this level are high.
7. It is your responsibility to ensure that the Web & Multimedia Development module is in turn-it-in and
that you able to see it before the submission date, so you can submit your report on the module
link/bin. Consult with your tutor/lecturer if this is not the case.
8. Save the file name using the following convention or format surname_firstname_cohort_assignment
code.docx or .pdf e.g., smith_david_april2025_A01.docx
9. Note that this assignment may be subject to change or amendment and that care shall be taken
to ensure that any such amendment or change shall not prejudice or disadvantage you/the
candidate/the student.
Appendix 1: Assignment submission cover sheet

ASSIGNMENT SUBMISSION COVER SHEET

Student Id:

Student names:

Student email:

Cohort: 2025

SCIS WMD_2025 A01

Assignment title:

Date of submission:

Programme of Study:

YEAR 1
Year of Study:

Intellectual property statement

By checking the box below, I certify that this assignment is my own work and is free from
plagiarism. I understand that the assignment may be checked for plagiarism by
electronic or other means and may be transferred and stored in a database for the
purposes of data-matching to help detect plagiarism. The assignment has not
previously been submitted for assessment in any other unit or to any other institution. I

have read and understood the Botswana Accountancy College plagiarism guidelines
policy.

☐ Agree Signature…………………………………….

Date………………………………………….

Page 1 of 8
Objectives & Outcomes

This assignment has two Tasks, Section 1 and 2. You are required to consult with your Tutor in
order to acquire any clarifications for this assignment. You can also consult with the module
leader.

Aims/Objectives

This assignment is intended to:

• Give students some insights into the Website Design Process.

• Ensure that students understand and appreciate the strength and power of website
planning and benchmarking through practical use
• Develop students’ ability to apply CSS based designs for page layout

Section A – Website Planning & Documentation [40 marks]

As a student developer, your task is to plan, document and develop a website for a company
and/or brand of your choice. You initial task is to follow the Website Design Process as defined
in Chapter 3 of the module. You are required to ensure that all elements of the Website
Development Process are defined. You are therefore required to follow the structure below;

Page 2 of 8
 1. Website Specifications: [10 marks]
a. State the website objective, its goals in relation to the business.
b. State the target audience, showing their demographics and technical aptitude.
c. You must identify the type of website or content you will be designing for the users
2. Information Design & Taxonomy: [5 marks]
Your documentation should then provide the information architecture, showing how
information is categorized and its navigation paths (i.e. Site Map) – all necessary page
navigation across the website must be documented. Plan your site by creating a
storyboard flowchart.
3. Page Template Design: [5 marks]
this part should focus on the page template design, showing how the final webpage for
the website will look like. REMEMBER that Wireframes offer a more complete view of
what the final design will look like
4. Technical Brief: [5 marks]
you are to state any technologies you will use in developing this website and any other
resources (software tools, graphics tools etc). Remember to choose software tools that
match the complexity needs of your website.
5. Quality Assurance: [5 marks]
You are to provide detailed Test samples of your website. These shall include browser
compatibility tests, mobile device tests. These should be in form of screenshots
illustrating where the website was being tested.
6. Publishing & Promotion: [4 marks]
Indicate how your website is hosted, the tools and methods you used to host your website
– this should encompass your GitHub commands and tools used to upload your website
on GitHub Pages. Include the website link address on this part for reference.
7. Future Developments/Recommendations: [3 marks]
There are always ways to improve work – kindly use this part to demonstrate how you
would improve the website in the future.

Report Writing is very key [3 marks]

Guidelines to writing your report: A good and effective report presents and analyses facts and
evidence that are relevant to the specific problem or issue of the report brief. The style of writing
in a report is usually less discursive than in an essay, with a more direct and economic use of
language. A well written report will demonstrate your ability to:

• understand the purpose of the report brief and adhere to its specifications;
• gather, evaluate and analyze relevant information;

Page 3 of 8
 • structure material in a logical and coherent order;
• present your report in a consistent manner according to the instructions of the report
brief;
• make thoughtful and practical recommendations where required
• The report word count must be 1,200

Section B – Website Design & development [60 marks]

As a web designer and developer, for this assignment, you have been tasked with the design and
development of a website for any brand and/or company of your choice..

Below are a few key features that the website must have;

• adhere to the W3C standards

• support and use fully HTML 5, CSS3 and JavaScript
• display on a number of browsers like Opera, Mozilla Firefox, Google Chrome, Safari
• ability to display on mobile devices and multiple screen resolutions
• Good use of images and other multimedia objects.
• Page uniformity (consistent page display)

In general, the website you design must have at least five (5) pages inclusive of the index.html
and feedback page (with HTML form).

The pages on the website MUST be interlinked and ensure that there are no broken links across
the website

NB: You can add any other pages that you as the developer see fit.

You are required to be more creative to ensure the website appeals to the target audience. This
will require you to create good graphics, imagery or banners to entice the website visitor. Use
Gimp or any image editing software to create pictures, logos and icons.

Before you undertake the design and Development look at these issues;

Planning & Documentation

You are required to provide Documentation for the Planning, Design and Development of the
website.

Page 4 of 8
Documentation is used to visually plan the site while taking into account the purpose, audience
and content, to design the site structure, content and interactions that are most suitable for the
website. Documentation may be considered a prototype for the website – a model which allows
the website layout to be reviewed, resulting in suggested changes, improvements and/or
enhancements. This review process increases the likelihood of success of the website.

The first step may involve information design and taxonomy (content planning) in which the
content is categorized and the information structure is formulated. The information structure is
used to develop a document or visual diagram called a site map (required). This creates a visual
of how the web pages or content will be interconnected, and may help in deciding what content
will be placed on what pages. The second step will involve graphics design and page template
creation in order to craft the look and feel of the site starting with the wireframe and graphically
designing the look and feel of the site using GIMP or any tool, before the construction and
content development of the site. The third step will involve the construction and content
development in which HTML5, CSS3 and JavaScript will be used for coding the web pages and
validation of the site. The last step will involve quality assurance in which you will test the website
for cross-browser compatibility.

Your work for the website will be assessed using the criteria as indicated on Pages 7-9

Submission Requirements

1) A MS Word processed Documentation Report containing;

a. Section A– Website Planning & Documentation
b. Provide a URL link to the GitHub Pages website on your final document for
viewing by the assessor.
e.g. https://[your_username].github.io/[your_repository]/

2) The copy of the website folder (together with necessary files i.e. images, CSS and
javascript). The repository must be named with your SCIS number e.g. ABC19-001.
a. Hint: Make sure you test your site for any “broken links”.

Use the criteria below for grading.

Page 5 of 8
 Section A
Scale
Criteria
Excellent Very Good Above Average Average Below Average Poor

1. Website Specifications: 10 pts 8 pts 6 pts 4 pts 2 pts 0 pts

State the website objective, its Included facts, Included facts, Included a A report with very Includes a few POOR to NO
goals in relation to the business. quotes, and quotes, and mixture of facts, few facts, some opinions, with a lot Introduction
paraphrasing from paraphrasing quotes, and paraphrasing with of information
State the target audience, reliable sources. from reliable paraphrasing information from taken as is from
showing their demographics and Included research sources. from reliable as unreliable sources. unreliable sources.
technical aptitude. from subject-matter well as unreliable
experts sources.
You must identify the type of
website or content you will be
designing for the users
2. Information Design & Taxonomy 5 pts 4 pts 3 pts 2 pts 1 pts 0 pts
information architecture, showing All page details are Some page Some page few page details Very little page A poor
how information is categorized identified, Clear details are details are are identified, a details, a structure presentation of
and its navigation paths (i.e. Site structure of pages identified, Clear identified, Clear structure of pages of pages with information
Map) with easy access to structure of structure of with access to access to content.
content. 3clicks rule pages with easy pages with easy content.
maintained access to access to
content. 3clicks content.
rule maintained
3. Page Template Design 5 pts 4 pts 3 pts 2 pts 1 pts 0 pts
page template design, showing An excellent An very good An minimalistic A very simple A very simple A poor design or
how the final webpage for the presentation design, presentation and simple presentation presentation NOT Done
website will look like. indicating a very design, presentation design. No clear design. No clear
good placement of indicating a very design, indication of indication of
content on the page. good placement indicating content sections content sections
Clearly define content of content on the placement of with little Active with NO Active
sections with Active page. Clearly content on the White space White space
White space between define content page. No clearly between between
elements. sections with indication of elements. elements.
Active White content sections
space between with little Active
elements. White space
between
elements.
4. Technical Brief 5 pts 4 pts 3 pts 2 pts 1 pt 0 pts
state any technologies you will use A detailed and A very detailed A descriptive text A brief text of the A shallow listing of A poor
in developing this website and any insightful text and descriptive of the software software tools, tools and presentation of
other resources (software tools, describing the text of the tools, graphic graphic tools and resources without facts to the
graphics tools etc) software tools, software tools, tools and any any other any description of issue.
graphic tools and any graphic tools other resources resources needed what each is to be
other resources and any other needed to to complete the used for.
resources assignment

Page 6 of 8
 needed to complete needed to complete the
the assignment complete the assignment
assignment
5. Quality Assurance: 5 pts 4 pts 3 pts 2 pts 1 pts 0 pts
detailed Test samples of your A very good illustration A very good A good A simple illustration An illustration of Poor Work or NO
website. These shall include of test, with detailed illustration of test, illustration of test, of test, with little test, with narrow Work Done
browser compatibility tests, mobile descriptions of what with good with some descriptions of descriptions of
device tests. each test was carried descriptions of descriptions of what each test what each test
on, and variations, if what each test what each test was carried on, was carried on,
any was carried on, was carried on, and variations, if and variations, if
and variations, if and variations, if any any
any any
6. Publishing & Promotion 4 pts 3 pts 2 pts 1 pt 0 pts
Indicate how your website is Excellent use of Some good use Evidence of use of use of the GitHub Poor Work or NO
hosted, the tools and methods you N/A the GitHub of the GitHub the GitHub technology for Work Done
used to host your website – this technology, with technology, with technology, with submission, with
should encompass your GitHub good use of the use of the GIT little use of the GIT little to no use of
commands and tools used to GIT commands commands to commands to the GIT
upload your website on GitPages. to monitor monitor changes monitor changes commands
changes across across the across the
the development development of development of
of the website the website the website
7. Future 3 pts 2 pts 1 pts 0 pts
Developments/Recommendations N/A N/A A very clear brief A clear brief on A narrow brief on Poor Work or NO
demonstrate how you would on how the how the website how the website Work Done
improve the website in the future website can be can be improved can be improved
improved
Writing Style (Report Formatting) 3 pts 2 pts 1 pts 0 pts
A very good A good structured A logical and Poor Work or NO
N/A N/A structured material in a coherent order Work Done
material in a logical and
logical and coherent order An attempt to
coherent order present the report
a consistent according to the
a consistent presentation of instructions of the
presentation of the report report brief;
the report according to the
according to the instructions of the
instructions of the report brief;
report brief;

Page 7 of 8
 Section B
Student #: ___________________ Full Name: ________________________
Aspect Max mark Mark Comments
A: Word Processed Report (marked from Assignment submission): Only one (1) file to be submitted
Website Planning & Documentation 40
//Transfer from Turnitin

B: The Website : Website files in GitHub Repository

è Website Live on GitHub Pages [7]
o Working GitHub repository 4
o Website Hosted on GitHub Pages 3
è Content: Branding, Logo Designs and Motto. [8]
Is content (images, flash animations and/or video) easily accessible or 5
available,
Where images are used, the alt, width and height shall be awarded [1 mark]
each. [2 marks for provision of imagery and other multimedia.

Structure of the content, as well as content placement. Design

matching the one specified on the wire frame. 3
è Structural Layer: The Design layout / Page Layout and Theme [15]
o Page Uniformity 5
o Correct Choice of the Design to Complement the Information
(Balance content with the Design) 5

o Navigation links (no broken links, consistent navigation design) 5

è Presentation Layer: Use of CSS3 to craft the look and feel in respect of the wireframe [15]
o Create & Use of own external CSS 5
o Meaningful CSS selectors 3
o CSS Structure 2
o Good Use of Bootstrap Framework 5

Behavioural Layer: The form design, with all fields marked as required 5
and validated using the HTML 5 annotations.
è Assignment Presentation [10]
o 0 = Needs work.
o 4 = Satisfactory. 10
o 6 = Commendable.
o 10 = Exceptional.4

------End of Paper-

Page 8 of 8