MISSION OF CAVENDISH UNIVERSITY

To transform and inspire students to reach their full potential in employment,

entrepreneurship, and ethical leadership (TI-PEEEL)

SYLLABUS AND COURSE GUIDE

FACULTY AND DEPARTMENT

SCHOOL OF BUSINESS AND INFORMATION TECHNOLOGY

CODE NUMBER AND NAME OF COURSE

COM322 Web Design and Development

Lecturer - Facilitator: Oscar Correia

Office: Glass Campus
Office Hours: 8:00 HRS – 09:00 HRS (Monday –Friday)
Telephone: +254733332733
Lecturer’s E-mail: [email protected]

Course Description

Embark on an exhilarating journey into the dynamic realm of web design and
development with our immersive introductory course! Unleash your creativity as you delve
into hands-on examples, crafting content tailored to organizational needs. This course
isn't just about theory; it's a hands-on experience where you'll wield popular web
development tools like Visual Studio Code and Notepad++ to construct compelling
websites.

Dive into the building blocks of the web as you grasp the essentials of HTML5, Cascading
Style Sheets (CSS), and JavaScript. Elevate your skills by exploring advanced
technologies such as jQuery, React.js, PHP, Laravel, and Node.js. Navigate the
landscape of content management systems with in-depth explorations of WordPress and
Joomla, mastering the art of crafting seamless and functional websites.
But that's not all – uncover the secrets of design thinking to refine your creative process,
infusing your work with innovative and user-centric design principles. Beyond the
technical, gain insights into the ethical considerations of web design, ensuring your
creations align with responsible and sustainable practices. Join us on this exhilarating
adventure, where you'll not only learn the tools of the trade but also cultivate a mindset
that defines the future of web design!

Prerequisites
None.

MOOC
• How to Create a Website in a Weekend! (Project-Centered Course) on Coursera:
https://www.coursera.org/learn/how-to-create-a-website/
• Programming Foundations with JavaScript, HTML and CSS on Coursera:
https://www.coursera.org/learn/duke-programming-web
• React Basics (Meta) https://www.coursera.org/learn/react-basics
• Building Web Applications in PHP https://www.coursera.org/learn/web-
applications-php#outcomes

Required Books, Articles and Case Studies

1. Michael Bradek (2017) WordPress Beginner’s Guide.

2. Jennifer Kyrnin (2018) HTML, CSS, and JavaScript.

3. Eric Tiggeler (2013) Joomla! 3 Beginner’s Guide.

SUMMARY OF REQUIREMENTS AND WEEKLY WORK

1. Read all notes and slides for each topic before attending class.

2. At the beginning of the semester please enroll in the CUZ Coursera Learning.

3. The CA 1 assessment will depend on whether you are a Day or a DL / Evening

student:

a) Day Students will need to complete Assignment 1 Nourishing Western Kenya

(NWK) Brand Creation – Marketing Strategy for 10% of their overall grade
(100% of CA 1) by the CA 1 due date.

b) DL & Evening students will need to enrol and complete the Coursera course,
React Basics (Meta) for 10% of their overall grade (100% of CA 1) by the CA 1
due date.
3. Your Continuous Assignment 2 (CA 2) will have 4 parts that will all be due by the CA
2 due date:

a) Enrol in the CUZ Coursera Learning Program and complete the Coursera course,
Programming Foundations with JavaScript, HTML and CSS. The Coursera
course will account for 10% of your overall grade. (33.3% of CA 2).

b) Enrol in the CUZ Coursera Learning Program and complete the Coursera course,
How to Create a Website in a Weekend. This will account for 5% of your overall
grade (16.7% of your CA 2 grade).

c) The third part of CA2 will depend on whether you are a Day or DL/Evening
student:

• Day students will need to complete Assignment 2 Nourishing Western Kenya

(NWK) Brand Creation – Marketing Communications for 10% of your overall
grade (33.3% of CA 2).

• DL & Evening students will need to enrol and complete the Coursera course,
Building Web Applications in PHP. This will account for 10% of your overall
grade (33.3% of CA 2).

d) Complete all quizzes (with a pass grade) and surveys on the platform that are
due by Week 12 for 5% of your overall grade (16.7% of your CA 2 grade).

4. Demonstrate your ability to use Word and PowerPoint in meeting the requirements
for this course.
General Learning Outcomes for Employability, Entrepreneurship and Ethical
Leadership:
1. Communication skills:
• Students should be able to summarize concepts learned in each course as
part of the effort to develop strong verbal and written communication skills.
• Students should be able to make effective oral presentations.
• Students Should be able to write persuasively and clearly in standard
English.
2. Collaboration and Teamwork:
• Students should be able to demonstrate teamwork through active
collaborative learning that culminates in group presentations of work
produced by teams.
• Students should be able to collaborate in problem-solving.
3. Critical Thinking:
• Students should be able to demonstrate critical thinking skills by demanding
evidence and asking questions using the heuristic approach of the 5Ws and
1H, i.e., what, when, where, who, why, how. And suspend judgment until
there is sufficient evidence or adequate reason to believe.
4. Creativity and Design Thinking:
• Students should be able to identify problems and to create solutions using
a design thinking approach.
• Students should be able to develop new ideas and to design new products
of various kinds.
• The five stages of design thinking are: Empathize, Define, Ideate, Prototype
and Test.
5. Digital literacy:
• Students should be able to demonstrate mastery of common information
technology applications.
• Students should be able to design and deliver Excel and PowerPoint
presentations.
• Students should be able to compare, contrast and select appropriate online
resources and to defend their choice of such resources.
6. Learning how to learn:
• Students should be able to demonstrate use of online resources in learning
as part of the process of learning how to learn and becoming lifelong
learners.
• Students should be able to identify credible online learning resources and
to distinguish them from questionable online sources.
7. Analytical skills and Research:
 • Students should be able to demonstrate appropriate use of analytical tools
such as Excel and other appropriate software for data management and
analysis.
• Students should be able to identify problems, and to find or to create
potential solutions to those problems through research and
experimentation.
8. Entrepreneurship:
• Students should be able to “sell” themselves confidently through a highly
practised-short introduction known as an elevator speech (who you are,
your qualifications, skills, ideas and dreams or plans) in less than 2 minutes.
• Students should be able to create and show their online LinkedIn profile.
• Students should be able to demonstrate the ability to select ideas from each
course and to brainstorm on potential commercial applications of those
ideas.
• Students should be able to identify problems worth solving and to use
design thinking in creating potential solutions. The five stages of design
thinking are: Empathize, Define, Ideate, Prototype and Test.
• Students should be able to demonstrate use of online templates in creating
CVs and business plans.
9. Time Management
• Students should be able to demonstrate time management through
arriving in class on time and completing assignments and projects on time.
10. Ethical Leadership:
• Students should be able to demonstrate ethical awareness and to apply
ethical principles such as honesty, truth-telling, integrity, moral-obligations,
moral-courage, and confidentiality in their decisions and actions.
• Students should be able to classify decisions and actions as good or bad;
fair or unfair; equitable or inequitable; just or unjust.
• Students should be able to compare and contrast honesty with corruption,
and to critique corruption.
• Students should be able to list and to demonstrate qualities of effective
leaders such as self-awareness, personal development, development of
others, innovation, effective communication, and strategic thinking.
Specific Learning Outcomes for this course

By the end of this course, the student should be able to:

1. Describe the key concepts of web applications.

2. Identify the tools to perform content management using WordPress and Joomla.
3. Undertake more advanced website designs and developments using HTML5, CSS
and JavaScript.
4. Develop responsive websites.
5. Connect web applications to a database using Laravel and PHP.
6. Develop secure web applications.
7. Appreciate and exercise the ethics involved in web development.
WEEK 1:
TOPIC 1: Introduction to Building Web Applications
SUBTOPICS:
• Describe the content of the course.
• Sketch the History of the World Wide Web.
• Describe basic web architecture.
• List the different Web development tools.
• State the opportunities and Challenges of the World Wide Web.
• Build a simple website with HTML & CSS
READINGS:
• Jennifer Kyrnin. (2018) HTML, CSS, and JavaScript. (pp. 1 – 19)

VIDEOS:
• A Brief History of the World Wide Web (3:36)
• Introduction to Web Architecture (6:44)
PRACTICAL ACTIVITY:
• Build a simple website on your laptop or computer with HTML and CSS following
the instructions at Build a simple website using HTML, CSS and JavaScript.

WEEK 2:
TOPIC 2: WordPress & Joomla: Key Concepts
SUBTOPICS:
• Describe Key Concepts of Content Management features.
• Describe the key architecture and components of WordPress.
• Describe the key architecture and components of Joomla.
• Compare and contrast WordPress and Joomla.
• Build a simple website with either one of the content management systems.
READINGS:
• Michael Bradek (2017) WordPress Beginner’s Guide. (pp. 6 – 87)
• Eric Tiggeler. (2013) Joomla! 3 Beginner’s Guide. (pp 143 – 280)

VIDEOS:
• How a DNS (Domain Name System) Server works
 • FAST WordPress Tutorial 2023 - How to Make a Website in 8 mins (EASY!)
(11:36)
• 7 WordPress Plugins I install on all website (2024) (15:06)

PRACTICAL ACTIVITY:
• Create an account on WordPress and create a simple website.
• Complete the W3Schools HTML Introduction. Please execute all examples and
answer all questions.

WEEK 3:
TOPIC 3: Design Thinking and a Case Study
SUBTOPICS:
• Describe the principles of Design Thinking.
• Construct a Stakeholder Map.
• Create a Needs Statement.
• Innovate Big Ideas.
• Develop a Paper prototype.
• Use a Feedback and Prioritization Grid.
READINGS:

• Carella, G., Cautela, C., Melazzini, M., Pei, X., & Schmittinger, F. (2023). Design
thinking for entrepreneurship: An explorative inquiry into its practical
contributions. The Design Journal, 26(1), 7-31.

VIDEOS:
• IBM Design Thinking (4:12)
PRACTICAL ACTIVITY:
• Create an account at IBM and earn an Enterprise Design Thinking Practitioner
badge.
• Complete the W3Schools CSS Tutorial. Please execute all examples and answer
all questions.

WEEK 4:
TOPIC 4: HTML5 and CSS
SUBTOPICS:
• Describe what HTML5 and CSS are.
 • Explain the HTML Document structure.
• Use Headers, paragraphs, layout, and attributes.
• Use Images, links, tables, and lists.
• Describe how to use Multimedia with HTML and CSS.
• Explain how to include CSS as in the header inline or external file.
• Use different aspects of CSS such as fonts, margins, padding and selectors.
• Use features such as color, box model, transitions, and transformations.
• Perform basic animations with CSS.
READINGS:
• Jennifer Kyrnin. (2018) HTML, CSS, and JavaScript. (pp. 23 – 50, 56 - 74)

VIDEOS:

• HTML and CSS Crash Course Tutorial #1 – Introduction (19:59)

PRACTICAL ACTIVITY:
• Go through the W3Schools JavaScript Tutorial up to and including JavaScript
Type Conversion. Please run all the examples and do all the exercises.

WEEK 5:
TOPIC 5: JavaScript Part 1
SUBTOPICS:
• Describe the key features of JavaScript.
• Enabling JavaScript and including in files.
• Use Variables, operators, and control structures.
• Use Functions, events, cookies, and redirection.
• Create Dialog boxes and void functions, and control printing.
READINGS:
• Jennifer Kyrnin. (2018) HTML, CSS and JavaScript. (pp. 448 – 486)

VIDEOS:
• What is JavaScript? | JavaScript Tutorial #1 (5:55)
PRACTICAL ACTIVITY:
• Complete the W3Schools JavaScript Tutorial. Please run all the examples and
do all the exercises.
WEEK 6:
TOPIC 5: JavaScript Part 2
SUBTOPICS:
• Create Objects, data types, and arrays.
• Use Regular expressions and HTML DOM.
• Create basic Animations and Multimedia.
• Create Image maps.
• Implement Browser detection.
READINGS:
• Jennifer Kyrnin. (2018) HTML, CSS and JavaScript. (pp. 448 – 594)

VIDEOS:
• #2 JavaScript Tutorial | What is Dom? | Document Object Model (10:25)
PRACTICAL ACTIVITY:
• Go through the W3Schools jQuery Tutorial up to and including jQuery Filtering.
Please run all the examples and do all the exercises.

WEEK 7:
CONTINUOUS ASSESSMENT TEST 1

WEEK 8:
TOPIC 6: jQuery
SUBTOPICS:
• Describe jQuery Concepts and syntax.
• Explain and use Events, Fading, and Sliding.
• Explain and use Animation.
• Explain and use DOM Manipulation.
• Explain and use CSS Manipulation.
• Make a Simple Application.
READINGS:
• Eric Tiggeler. (2013) Joomla! 3 Beginner’s Guide. (pp 7 – 141)

VIDEOS:
 • jQuery Basics – What is jQuery (2:57)
PRACTICAL ACTIVITY:
• Research the different web application frameworks that are available for
developers. Compare your findings with the article Laravel vs. Node.js: Which
One to Choose in 2024?

WEEK 9:
TOPIC 7: Web Application Frameworks and GitHub
SUBTOPICS:
• Describe what Web Application Frameworks are.
• Compare Laravel and Nodejs.
• Describe how data is managed.
• Explain what GitHub is.
• Create a repository with GitHub.
READINGS:
• Anjum, N., & Alam, S. (2019). A comparative analysis on widely used web
frameworks to choose the requirement-based development
technology. International Advanced Research Journal in Science, Engineering
and Technology, 6(9).

VIDEOS:
• What Is GitHub? | What Is Git And How To Use It? (7:47)
PRACTICAL ACTIVITY:
• Go through the Node.js Tutorial up to and including MySQL Join. Please run all
the examples and do all the exercises.

WEEK 10:
TOPIC 8: Node.js
SUBTOPICS:
• Describe Node.js principles.
• Explain and use the advantages of Nodejs.
• Build a Simple App.
• Perform basic URL parsing.
• Perform basic File management.
 • Perform basic Event handling.
READINGS:
• Eric Tiggeler. (2013) Joomla! 3 Beginner’s Guide. (pp 143 – 280)

VIDEOS:
• What Is Node.js? | Introduction To Node.js | Node JS Tutorial For Beginners |
Simplilearn (12:57)
PRACTICAL ACTIVITY:
• Go through the W3Schools React Tutorial up to and including React Sass
Styling. Please run all the examples and do all the exercises.

WEEK 11:
TOPIC 9: React.js
SUBTOPICS:
• Describe React features.
• Use React Components.
• Describe and use Reat States and Props.
• Describe and use React Component API and Lifecycle.
READINGS:
• Jennifer Kyrnin. (2018) HTML, CSS and JavaScript. (pp. 595 – 694)

VIDEOS:
• What is ReactJS? | ReactJS Tutorial for beginners | Learn ReactJS | ReactJS
Basics | Simplilearn (9:29)
PRACTICAL ACTIVITY:
• Build a React web application following the tutorial, React Tutorial for Beginners
(1:20:03)

WEEK 12:
CONTINUOUS ASSESSMENT TEST 2

WEEK 13:
TOPIC 10: PHP and Laravel
SUBTOPICS:
• Describe what PHP is.
 • Explain how it runs.
• Develop simple PHP applications.
• Describe what Laravel is.
• Explain the MVC Architecture.
• Explain how Routing, Controllers and Views are used.
• Describe Eloquent ORM.
READINGS:

• Laravel Installation

VIDEOS:
• Laravel 6 Tutorial for Beginners #1 - Introduction
PRACTICAL ACTIVITY:
• Install and create a small application using Laravel and PHP following the tutorial
in Laravel 11 Tutorial for Beginners – Laravel Crash Course (2024) (1:22:19)

WEEK 14:
TOPIC 11: Security Aspects of Web Design
SUBTOPICS:
• Describe Web Vulnerabilities, Attack surface area and threats.
• Identify Malware and injection attacks.
• Describe the Anatomy of a cyberattack.
• Describe key Cybersecurity frameworks.
• Explain how to mitigate, detect, respond, and recover.
READINGS:

• Params (2022) A comprehensive Guide to Web Application Security

VIDEOS:
• What is Ethical Hacking? | Ethical Hacking in 8 minutes | Ethical Hacking
Explanation | Simplilearn
PRACTICAL ACTIVITY:
• Research on some recent cyberattacks on websites. How were they carried out?
What did they impact? How were they handled?
WEEK 15:
TOPIC 12: Web Development Ethics
SUBTOPICS:
• Describe the Importance of ethics and drivers of good behavior.
• Explain Utilitarianism.
• Explain Duty Ethics.
• Explain Virtue Ethics.
• Explain Capability approach.
• Explain Four corners approach.
READINGS:
• W3C TAG Ethical Web Principles

VIDEOS:

• What is Internet Ethics? (5:43)

PRACTICAL ACTIVITY:
• Identify 3 websites that have a dominant different ethical principle behind them
(viz. utilitarian, duty and virtue ethics).
GRADING POLICY
% OF FINAL
ASSESSMENT COMMENTS
GRADE
Assignment 1
Nourishing Western
Day Kenya (NWK) Brand
CA1 Creation – Marketing 10
Strategy
DL &
React Basics (Meta)
Evening
Programming Foundations with
JavaScript, HTML and CSS on 10
Coursera
Coursera certificate in How to
Create a Website in a Weekend! 5
(Project-Centered Course)
Assignment 2
CA2
Nourishing Western
Day Kenya (NWK) Brand
Creation – Marketing 10
Communications
DL & Building Web
Evening Applications in PHP
Quizzes 5
Exam 60

TOTAL POINTS One must get

50% to secure 100
Out of 100% a pass.

Letter Grades
Letter Grade Percentage Performance
A+ 85-100 Exceptional Work
A 75-84 Excellent Work
B+ 70-74 Very Good Work
B 65-69 Good Work
C+ 55-64 Above Average Work
C 50-54 Average Work
D+ 45-49 Below Average Work
D 0-44 Poor Work
 Letter Grade Percentage Performance
F 0 Failing Work

COURSE POLICIES

Late Work and Missing Assessments

1. Each student is responsible for making sure that his or her work is done on
time.
2. Any student who misses assessments or misses deadlines should talk to his
or her lecturer/facilitator or professor as soon as possible and seek the
lecturer’s advice on how to make up for work missed or assessments missed.
3. Students who expect to miss deadlines or to miss assessments for health
reasons or special family reasons should communicate with the lecturer or
professor for the course as soon as possible.
4. Students should note that there may be a penalty for late work, and missed
assessments. The penalty may include not being allowed to sit for the final
examination.
5. Students who are unable to keep up with class work should consult with the
course lecturer or faculty dean or dean of students and seek advice.

Integrity and Zero Tolerance for Corruption

1. All students are expected to abide by the university’s policy on ethical conduct.

2. Any student involved in cheating in tests, coursework or examinations will be

suspended pending investigations, and may be expelled from the University.

3. Any student involved in buying or selling tests or examinations will be

suspended from the University pending investigations.

4. Any student involved in using sexual favors in exchange for marks will be
suspended pending investigations and may be expelled from the University.

5. Plagiarism means presenting other people’s work from online or from other
sources as your own. Plagiarism is a serious offence and will not be tolerated,
and offenders will fail the course and face disciplinary action.

6. Students are required to read the University’s policy on examinations, and all
other relevant policies posted on the University’s website.

Anti-plagiarism software
All work that is uploaded onto the Learning Platform will be checked for
plagiarism. Therefore, do NOT copy other people’s work. It is unethical.

END