Course Outline
Semester: 01
From (Sep 2021) to (Dec 2021)
Web Design 1
DIWD2112
COURSE DETAILS
Course Location
Department
Program Name
Semester
Credits
Status
Contact hours
No. of weeks
Teaching Pattern
Pre-requisite
No. of assignments
Course Leader’ name
Lecturer
:
:
:
:
:
:
:
:
:
:
:
:
:
Lesotho
Faculty of Information & Communication Technology
Associate Degree in Multimedia and Software Engineering
DMSE2_1
3
Core Subject
3 hours
14 teaching weeks + 1 Final examination week + 1 week Midterm Break
Lectures & Tutorials/ Laboratories
N/A
2
Mr. K. Bhila
Mr. N. Nkhatho
Prepared by : Mr N. Nkhatho
Signature
:
Checked by : Mr. Bhila
Date
16/09/21
Signature
:
This document comprises the following:














Essential Information
Specific Course Information
Course Rules & Regulations
Grades
Plagiarism
Course Introduction
Course Aims & Objectives
Learning Outcome
Specific Generic Learning Skills
Syllabus + Lecture Outline
References
Assessment Schedule
Assessment Criteria
Specific Criteria
Other documents as follows will be issued to you on an ongoing basis throughout the semester:


Handouts for Assignments
Submission Requirements + Guidelines
1
R 01 - 06121 2
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology
Date 16/09/21
1.0
2.0
3.0
ESSENTIAL INFORMATION

All Courses other than electives are 'significant Courses'

As an indicator of workload one credit carries and additional 2 hours of self study per week. For
example, a Course worth 3 credits require that the student spends an additional 6 hours per
week, either reading, completing the assignment or doing self directed research for that
Course.

Submission of ALL assignment work is compulsory in this Course, in failure to do so; a DNS
(Did not submit) grade will be awarded. An overall grade of DNC(Did not complete)will be
awarded for those who fail to submit a major piece of assessment work(major assignment) or
sit for either the midterm examination or final examination. A student cannot pass this Course
without having to submit ALL assignment work by the due date or an approved extension of
that date.

All assignments are to be handed on time on the due date. Students will be penalised 10
percent for the first day and 5 percent per day thereafter for late submission (a weekend or a
public holiday counts as one day). Late submission, after the date Board of Studies meeting
will not be accepted.

Due dates, compulsory assignment requirements and submission requirements may only be
altered with the consent of the majority of students enrolled in this Course at the
beginning/early in the program.

Extensions of time for submission of assignment work may be granted if the application for
extension is accompanied by a medical certificate.

Overseas travel is not an acceptable reason for seeking a change in the examination schedule.

Re-submission of work can only receive a 50% maximum pass rate.

Supplementary exams can only be granted if the level of work is satisfactory AND the semester
work has been completed.

IEEE referencing and plagiarism policy will apply on all written assignments.
SPECIFIC COURSE INFORMATION

Attendance rate of 80% is mandatory for passing Course.

All grades are subject to attendance and participation.

Absenteeism at any scheduled presentations will result in zero mark for that
presentation.

Visual presentation work in drawn and model form must be the original work of the student.

The attached semester program is subject to change at short notice.
COURSE RULES AND REGULATIONS:
Assessment procedure:

These rules and regulations are to be read in conjunction with the UNIT AIMS AND
OBJECTIVES

All assignments/projects must be completed and presented for marking by the due date.

Marks will be deducted for late work and invalid reasons.

All assignments must be delivered by the student in person to the lecturer concerned. No other
lecturer is allowed to accept students’ assignments.

All tests/examinations are compulsory.

Students must sit the test/examination on the notified date.
2
R01 – 061212
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology
4.0

Students are expected to familiarize themselves with the test/examination timetable.

Students who miss a test/examination will not be allowed to pass.

Any scheduling of tutorials, both during or after lecture hours, is TOTALLY the responsibility of
each student. Appointments are to be proposed, arranged, confirmed, and kept, by each
student. Failure to do so in a professional manner may result in penalty of grades. Tutorials
WITHOUT appointments will also NOT be entertained.

Note that every assignment is given an ample time frame for completion. This, together with
advanced information pertaining deadlines gives you NO EXCUSE not to submit assignments
on time
GRADES
All Courses and assessable projects will be graded according to the following system. With respect
to those units that are designated 'Approved for Pass/Fail' the grade will be either PA or F:
Grade
Numeric Grade
Description
90 – 100
85 – 89
80 – 84
A+
A
A-
Pass with Distinction
75 – 79
74 – 70
65 – 69
B+
B
B-
Pass with Credit
60 – 64
55 – 59
50 – 54
C+
C
C-
Pass
47- 49
0 – 49
PP
F
Fail
EXP
Exempted
PP
Pass Provisional with extra work needed
X
Ineligible for assessment due to unsatisfactory attendance
D
Deferred
W
Withdraw
DNA
Did Not Attend Course
DNC
Did Not Complete Course
ANN
Results Annulled due to misconduct
3
R01 – 061212
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology
5.0
PLAGIARISM, COPYRIGHT, PATENTS, OWNERSHIP OF WORK: STUDENT MAJOR
PROJECT, THESES & WORKS
6.0
COURSE INTRODUCTION
In order to understand the capabilities of the Web and to evaluate trends and products, this course
introduces students to more advanced skills in web design and gives students real-life experience
in web development. It gives a thorough understanding of HTML, enabling you to evaluate the
various tools as they relate to your organization’s requirements. Style sheets are changing the way
Web sites are created and maintained. This important feature will be covered throughout the
course.
7.0
COURSE AIMS AND OBJECTIVES

To provide thorough understanding of the fundamentals of developing interactive content for
the World Wide Web

To enable the student to carry out Web design responsibilities at a professional level

To explain on how to interact with a Web page for any programming task
LEARNING OUTCOME
Students will acquire the abilities to:
9.0

Describe the two main graphic formats used on the Web, particularly the tradeoffs related to
compression techniques,

Use images creatively while minimizing download times

Explain the ways they can be used to improve a site in terms of performance and usability

Design and develop web pages using CSS for layout.
SPECIFIC GENERIC LEARNING SKILLS
At the end of the Course, students are expected to acquire the following skills:
•
Demonstrate their knowledge by designing complex web pages using HTML & CSS;
•
Know how to incorporate JavaScript into a web page.
•
Know how to embed media—such as audio or video—into a web page.
•
Have had experience uploading and managing a site live.
•
Gain a greater understanding of the roles played by aesthetics and functionality in Web design
10.0
PROGRESSION POLICY
Students can only enroll into a higher semester if they have passed all courses in the preceding
semester or have failed not more than two courses. A student cannot register for any course at a
higher level if they fail its lower level unit which in essence is a pre-requisite.
If student CGPA is less than 2.0 could not proceed to the next semester.
4
R01 – 061212
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology
11.0
UNIT SYLLABUS + LECTURE OUTLINE:
Week:
1
LECTURE 1: INTRODUCTION TO WEB DESIGN
Lecture Synopsis:
The World Wide Web
Web hosting
Websites in Lesotho
Starting Your Web Page
Creating a Title.
Creating Headings.
Understanding HTML5’s Document Outline
Grouping Headings.
Creating a Header.
Creating an Article.
Defining a Section.
Creating a Footer.
Starting a New Paragraph
Handout: Tutorial 1, Assignment 1, Notes, Course Outline
Week:
2
LECTURE 2: ALL ABOUT HTML 5
Lecture Synopsis:
Using lists
Creating tables
Selecting the correct image format
Using images
Manipulating images
Creating links
Basic menu
Handout: Notes, Tutorial 2
Week:
3
LECTURE 3: IMAGES AND LINKS
Lecture Synopsis:
Images links (hyperlinks)
About Images for the Web.
Getting Images.
Inserting Images on a Page.
Offering Alternate Text.
Specifying Image Size.
Scaling Images with the Browser.
Bulleted List
Scaling Images
Adding Icons for Your Web Site.
The Anatomy of a Link.
Creating a Link to Another Web Page.
Creating Anchors.
Linking to a Specific Anchor.
Creating Other Kinds of Links.
Handout: Notes, tutorial 3
Week:
4
5
R01 – 061212
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology
LECTURE 4: STYLING WITH CSS
Lecture Synopsis:
CSS Building Blocks
Constructing a Style Rule.
Adding Comments to Style Rules.
The Cascade: When Rules Collide.
A Property’s Value
Working with Style Sheets
Creating an External Style Sheet.
Linking to External Style Sheets.
Creating an Embedded Style Sheet.
Applying Inline Styles.
Handout:
Notes, tutorial 3 and due date for assignment 1
Week:
5
LECTURE 5: WEB FONTS & COLORS
Lecture Synopsis:
Working with Web Fonts
Downloading Your First Web Font
Working with @font-face
Styling Web Fonts and Managing File Size
Understanding Vendor Prefixes
A Quick Look at Browser Compatibility
Meaningful use of color
Color in css
Web safe colors
Creating your own color
Handout:
Notes,
Week:
6
LECTURE 6: ADVANCED CSS & MENUS
Lecture Synopsis:
Transformations & transitions
Text effects
Image effects
Image borders
Selecting particular elements
Using emphasis
Creating classes
Defining style for multiple elements
Visually enhanced menus
Building nested list menus
Handout:
Notes,
Week:
7
MID TERM EXAMINATION
Week:
8
MID SEMESTER BREAK
Week:
9
6
R01 – 061212
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology
LECTURE 7: WEB DESIGN LAYOUTS
Lecture Synopsis:
Layout with Styles
Considerations When Beginning a Layout
Structuring Your Pages.
Styling HTML5 Elements in Older Browsers.
Resetting or Normalizing Default Styles.
The Box Model.
Setting the Height or Width for an Element.
Setting the Margins around an Element.
Adding Padding around an Element.
Making Elements Float
Controlling Where Elements Float
Setting the border
.
Handout: Notes
Week:
10
LECTURE 8: DYNAMIC LAYOUTS & CONTENT FOR MOBILE
Lecture Synopsis:
Offsetting Elements in the Natural Flow
Positioning Elements Absolutely
Positioning Elements in 3D.
Determining How to Treat Overflow.
Aligning Elements Vertically.
Changing the Cursor.
Displaying and Hiding Elements.
Style Sheets for Mobile to Desktop
Mobile Strategies and Considerations.
Understanding and Implementing Media Queries.
Building a Page that Adapts with Media Queries.
Handout: notes, tutorial 4
Week:
11
LECTURE 9: RESPONSIVE WEB DESIGN
Lecture Synopsis:
Why responsiveness is necessary
Overview of bootstrap
Document setup
Grid across multiple devices
Stacked to horizontal
Offsetting and nesting columns
Navigation bars
Full website skeleton
Enabling less css
Week:
12
CLASS TEST
Week:
13
LECTURE 10:
VIDEO, AUDIO AND OTHER MULTIMEDIA
Lecture Synopsis:
Third-Party Plugins and Going Native.
Video File Formats
Adding a Single Video to Your Web Page.
Providing Accessibility
7
R01 – 061212
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology
Adding Audio File Formats.
Adding a Single Audio File with Controls
Adding Controls and Autoplay to Audio in a Loop
Preloading an Audio File.
Providing Multiple Audio Sources.
Adding Audio with Hyperlink Fallbacks.
Adding Audio with Flash Fallbacks.
Adding Audio with Flash and a Hyperlink Fallback
Getting Multimedia Files.
Embedding Flash Animation.
Embedding YouTube Video
Revision and group assignment submission
Week:
REVISON
14
Week:
17
FINAL EXAMINATION WEEK
Week:
18
FINAL EXAMINATION WEEK
11.0 REFERENCES
Andy Harris, HTML 5 and CSS3 all in one for dummies A WILEY BRAND,
John Wiley & Sons, Inc. Hoboken, New Jersey, 2014
12.0 ASSESSMENT SCHEDULE
Assignment description
issue date
due date
%
INDIVIDUAL ASSIGNMENT
Week 2
Week 6
15%
PRACTICAL TEST 1
Week 5
Week 5
20%
PRACTICAL TEST 2
Week 12
Week 12
25%
GROUP ASSIGNMENT
Week 5
Week 13
40%
TOTAL
100%
13.0 ASSESSMENT CRITERIA
Process of grading and criteria used to determine the grades, passes and high distinctions.
15.0 SPECIFIC CRITERIA

Each assignment will be handed out with the project brief and will vary, depending on the
teaching and learning objectives of the specific assignment.

Each student will receive a completed assessment sheet back with their marks, thereby giving
student feedback on each set criterion and the project as a whole.
8
R01 – 061212
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology

Marks for each project will be posted on the Bulletin Board with student number within 2 weeks
of hand-in date

Students will develop and complete projects based on information that they acquire in class
and Web Design tutorial sites
9
R01 – 061212
All Rights Reserved
No part of this document may be reproduced without written approval from Limkokwing University of Creative Technology