LANDMARK UNIVERSITY, OMU-

COURSE COMPACT ARAN

COLLEGE: PURE & APPLIED SCIENCES
DEPARTMENT: COMPUTER SCIENCE
PROGRAMME: COMPUTER SCIENCE
COURSE COMPACT FOR: 2024/2025 ACADEMIC SESSION

Course Data
Course code: LMU-CSC 211
Course title (credit unit): Introductory concept in web
development
Credit unit: 2
Course status: Elective

Lecturer Data
Lecturer’s name: Mr Amrevuawho O. F. & Mr Ogbonia E.
O
Qualifications: B.Sc. (Hons), M.Sc.
Unit: Computer Science
Department: Computer Science
College: College of Pure and Applied Sciences
E-mail: [email protected],
[email protected]
Office Location: Room A230 (First college building)
Consultation Hours: Tuesday (2–4pm); Friday (10am–
12noon)

INTRODUCTION TO THE COURSE

Course Description
The course will introduce students to the fundamental building blocks of
the web, database management, web publishing, web design, and web
programming. A web developer is at heart an interactive artist. It is also
the web developer’s job to diagnose problems in a website’s functionality,
to understand how something works by reading the code behind it, and to
make changes to fix any issues. That essentially makes web developers
the physicians of the world wide web.
This course will provide an introductory, yet very comprehensive training
on web development, needed to start Landmark University students on
the path to becoming either front-end, back-end or full stack practitioners.
Contents of this course include study of web development tools such as,
HyperText Markup Language, Cascading Style Sheets, JavaScript, JS
Functions and Objects, JavaScript and the DOM, frameworks, web APIs,
bootstrapping, web apps, optimization and so on.

Course Justification
The internet is at the core of globalization. Therefore, the acquisition of
web development skills (either as a front-end, back-end, or full-stack

1
developer) as an IT practitioner is perhaps the most important
requirement to thrive in the ever-dynamic field of computing. With the
introduction of this course, concepts such as database management, web
publishing, web design, and web programming will be taught. It is
therefore an important curriculum component in the University’s mission
quest of raising a generation of solution providers through a qualitative
and life-applicable training system that focuses on value and creative
knowledge.

Course objectives
At the end of the course, students should be able to

1. Develop in students, the awareness of the different ways of by

which people access the web;
2. Create an appreciation of the need to create standards-based
websites that are accessible and usable by a full spectrum of
users;
3. Develop in students, the skills and project-based experience
needed for entry into web design and development careers;
4. Explain to students the variety of strategies and tools to create
websites;
5. Identify diverse career opportunities in Web Development.

Course Content
The historical context of how computers code. History of the web.
Hypertext Markup Language (HTML). Cascading Style Sheet (CSS). Using
design concepts of unity. Color theory. White spaces. Typography.
JavaScript. Sequencing. Selection. Looping. State management. Boolean
Arithmetic. Event-driven development. Web technologies and frameworks.
Create static web applications. Create web applications that respond to
user behaviour.

Course Expectations:
S/N GRADING SCORE (%)
1. Continuous Assessments
 C.A. I 7%
 C.A. II (Mid-semester) 15%
 C.A. III 8%
2. Final Examination 70%
3. Total 100

Course Delivery Strategies

Lecture and practical methods, one-on-one tutoring of the students and
PowerPoint presentation.

Course Duration: 15 weeks

LECTURE CONTENT

2
WEEK 1: The internet, World Wide Web (WWW) and browsers
Objectives: At the end of the lecture, students should be able to:
I. Understand the concept of the internet.
II. Understand the concept of the WWW
III. Understand the concept of browsers
IV. Understand the fundamentals concepts of websites
V. Understand text editors and Integrated Development
Environments (IDEs)

Description:
First Hour: The internet, WWW and browsers
Second Hour: Websites, web development technologies and text
editors (IDEs)

Study Questions:
1. What are the main differences between frontend and
backend web development, and which key technologies are
used in each area?
2. How do HTTP (HyperText Transfer Protocol) and URLs
(Uniform Resource Locators) facilitate the sharing of
information on the Web?
3. What are the primary responsibilities of a frontend
developer, and which technologies are crucial for this role?
4. What are the main responsibilities of backend
development, and which server-side programming
languages are commonly used?

WEEK 2: Introduction to the Basics of HyperText Markup

Language (HTML)

Objectives: At the end of the lecture, students should be able to

(i) Understand HTML: Tags, Elements, and Attributes
(ii) Understand the meaning and use of Headings,
Paragraphs, Links, Images, and Tables.
(iii) Build simple HTML web page

Description:
First Hour: Introduction to HTML, Tags, Elements and Attributes.
Second Hour: Creating simple webpage: Heading, Paragraph,
Links, Images and Tables.
Study Questions:
1. What does HTML stand for, and what is its primary purpose?
2. How do web browsers interpret HTML documents?
3. What are HTML tags, and how are they structured?
4. What is the difference between an HTML tag and an HTML
element?
5. Provide an example of an HTML element, and explain its
components.

3
 6. What are attributes in HTML, and how do they modify
elements?
7. Explain the purpose of the href attribute in an anchor (<a>)
tag.
8. List the six levels of HTML headings and explain their
significance.
9. How do you create a paragraph in HTML? Provide an example.
10. What is the function of the src and alt attributes in an image
(<img>) tag?

WEEK 3: Advance HTML

Objectives: At the end of the lecture, students should:
(i) Understand semantic HTML
(ii) Understand forms and input elements
(iii) Understand HTML 5 semantics
(iv) Understand form controls
(v) Understand HTML API features
Description:
First Hour: HTML semantics, Forms and input elements
Second Hour: HTML APIs, Practical session

Study Questions:
1. What is the purpose of using semantic HTML elements, and
how do they improve a webpage's accessibility and SEO?
2. How does the <article> element differ from the <section>
element in terms of its usage and meaning in HTML?
3. What role does the <aside> element play in a webpage's
structure, and how does it relate to the main content?
4. Explain the use of forms in HTML. What are the key form
elements that allow for user input, and how are they
utilized in web forms?
5. List and describe at least four new form controls introduced
in HTML5, including their validation features.
6. How does the <audio> and <video> element function in
embedding multimedia content? What is the significance of
the <source> element in these contexts?
7. What is the purpose of the <canvas> element in HTML5,
and how is it used to create dynamic graphics? Include an
example.
8. Explain the role of the Geolocation API, Local Storage, and
Web Workers in HTML5. How do these APIs enhance the
functionality of modern web applications?

WEEK 4: Introduction To Cascading Style Sheets (Css)

Objectives: At the end of the lecture, students should:
(i) Understand the CSS concept, purposes and syntax
(ii) Understand selectors, Properties and Values

4
 (iii) Understand the different methods used in linking CSS to
HTML
(iv) Understand basic styling of a webpage
Description:
First Hour: Introduction to CSS, selectors, properties and values
Second Hour: CSS to HTML linking methods, Practical session
Study Questions:
1. What is the primary purpose of CSS in web development?
2. Describe the syntax of a CSS rule, and identify the purpose
of selectors, properties, and values.
3. What is the difference between an element selector, a
class selector, and an ID selector in CSS? Provide an
example of each.
4. How does an attribute selector work in CSS, and what is its
purpose? Give an example.
5. What are pseudo-classes in CSS, and when would you use
them? Provide an example using the :hover pseudo-class.
6. Explain the three methods of linking CSS to an HTML
document: external, internal, and inline. What are the pros
and cons of each method?
7. In CSS, how can you specify colors using hexadecimal,
RGB, and color names? Provide an example for each
method.
8. What CSS properties are used to control the spacing
around HTML elements? Provide an example of how to set
margin and padding in CSS.

WEEK 5: RESPONSIVE DESIGN WITH CSS

Objectives: At the end of the lecture, students should be able to

(i) Understand the purpose of responsive design
(ii) Understand fluid grids, flexible images and media queries
Description:
First Hour: Responsive CSS design, media query,
Second Hour: CSS flexbox and grid, Practical session
Study Questions:
1. What is the primary goal of responsive design in web
development?
2. How do fluid grids contribute to responsive design, and
what units are commonly used?
3. Explain how flexible images are implemented in CSS to
prevent them from overflowing their containers.
4. What are CSS media queries, and how are they used to
create responsive designs?
5. What are common breakpoints for mobile, tablet, and
desktop devices when using media queries?
6. Describe the function of the justify-content and align-items
properties in a Flexbox layout.

5
 7. What is a mobile-first design approach, and why is it
important for responsive web design.
8. How does the grid-template-columns property work in CSS
Grid, and how is it used to create a grid layout?

WEEK 6: INTRODUCTION TO WEB FRAMEWORKS

Objectives: At the end of the lecture, students should be able to

1. Understand the basic concept of web frameworks
2. Benefits of using Web Development Frameworks
3. Identify the different types of web frameworks
4. Difference between Front-End Frameworks and Back-End
Frameworks
5. Explore the features and benefits of popular web
frameworks

Descriptions:
First Hour: Introduction to web framework, Benefits of using Web
Development Frameworks, Identify the different types of web
frameworks
Second Hour: Difference between Front-End Frameworks and Back-
End Frameworks, Explore the features and benefits of popular web
frameworks
Study Questions:
1. What is a web application framework, and why is it important in
modern web development?
2. Explain the difference between front-end and back-end web
application frameworks. What are their respective roles?
3. How do front-end frameworks enhance the user experience and
optimize web performance?
4. What are the key benefits of using a web application framework for
developers?
5. List and explain at least three key features of Bootstrap as a front-
end web framework.

WEEK 7: BOOTSTRAP

Objectives: At the end of the lecture, students should have a

foundational understanding of Bootstrap, its grid system,
components, utilities, and how to use it to build responsive,
mobile-first websites. They will also learn how to customize
Bootstrap for their specific needs and apply it to real-world
projects.
Descriptions:
First Hour: Introduction to Bootstrap, how to setup Bootstrap, basic
structure of Bootstrap page.
Second Hour: Bootstrap Grid system and Layout, Bootstrap
Components and Customization, Advance Bootstrap components
and customization.
Study Questions:

6
 1. Describe the different methods for including Bootstrap in a project.
Which method is most suitable for quickly starting a small project
and why?
2. Explain the Bootstrap grid system. How does the 12-column layout
work, and how can it be used to create responsive web layouts?
3. Explain how to create a responsive form using Bootstrap. What
classes would you use to create an inline form versus a vertical
form?
4. What is the purpose of Bootstrap’s JavaScript components like
modals, tooltips, and carousels? Explain how to implement a modal
in a Bootstrap project.

WEEK 8: JAVASCRIPT (JS) BASICS

Objectives: At the end of the lecture, students should be able to

(i) Understand JavaScript and its role in web development
(ii) Understand JavaScript Variables, Data Types, and
Operators
(iii) Understand basic JS Syntax and Writing Simple Scripts
Description:
First Hour: JavaScript and its role in wed development, variables,
data types, operators, statements.
Second Hour: JavaScript comments, control flow, Practical session
Study Questions:
1. What role does JavaScript play in web development?
2. Explain the difference between var, let, and const when
declaring variables in JavaScript.
3. What are the main data types in JavaScript, and provide an
example of each?
4. What is the difference between function declarations,
function expressions, and arrow functions in JavaScript?
5. Explain how JavaScript handles control flow using if-else,
switch, and loops. Provide examples for each.
6. What is the purpose of comments in JavaScript, and how do
you write single-line and multi-line comments?
7. Explain the difference between the == and === operators
in JavaScript.

WEEK 9: Mid-semester Examination

Objectives: To examine students in what has been taught in the

course so far and evaluate their preparation towards the end
of the semester examination.

WEEK 10: JAVASCRIPT AND THE Document Object Model (DOM)

Objectives: At the end of the lecture, students should be able to:

1. Understand the Document Object Model (DOM)
2. Manipulate HTML Elements Using JavaScript
3. Understand Event Handling (Clicks, Form Submissions, etc.)

7
Description:
First Hour: Understanding the Document Object Model (DOM)
Second Hour: Manipulating HTML Elements Using JavaScript,
Practical session
Study Questions:
1. What is the Document Object Model (DOM), and how does
it represent the structure of an HTML document?
2. Explain the difference between a root node, child nodes,
parent nodes, and sibling nodes in the DOM tree.
3. How can you access an HTML element by its ID using
JavaScript? Provide an example.
4. What is the difference between getElementById,
getElementsByClassName, and querySelector when
accessing DOM elements?
5. How does the textContent property differ from innerHTML
when modifying the content of HTML elements?
6. What are event listeners in JavaScript, and how can you
attach an event listener to a button element?
7. What is the purpose of the preventDefault() method in form
submission event handling?

WEEK 11: JAVASCRIPT AND USER INTERACTION

Objectives: At the end of the lecture, students should be able to

1. Create interactive web pages
2. Understand events and user-triggered actions
3. Understand form validation

Description:
First Hour: JavaScript and user-interaction
Second Hour: Practical session
Study Questions:
1. Name and explain three common JavaScript events and
what triggers them.
2. How does the addEventListener method work, and what are
its key parameters?
3. Write an example of how to attach a click event listener to
a button using JavaScript.
4. Describe how form validation can be implemented in
JavaScript. Include an example of checking if a form field is
empty.
5. What is real-time validation, and how does it differ from
basic form validation?
6. What are arrays in JavaScript, and how can you add or
remove elements from an array? Provide code examples.
7. Explain the concept of JavaScript objects. How do you add
or delete properties from an object?
8. In what ways can JavaScript improve user interaction on a
webpage? Give practical examples from the lesson.

8
WEEK 12: Introduction to Version control and Git

Objectives: At the end of the lecture, students should be able to

understand the basics of Git and version control, and will be
able to manage repositories, track changes, and collaborate
using Git.
Description:
First Hour: Introduction to version control, Giot installation and
setup, Basic terminologies.
Second Hour: Branching and merging, Remote Repositories and
Collaboration, Practical sessions.
Study Questions:
1. What is version control, and why is it important in software
development?
2. Differentiate between Centralized Version Control Systems (CVCS)
and Distributed Version Control Systems (DVCS).
3. What are the key benefits of using Git as a version control system
over other systems like SVN or CVS?
4. Explain the steps involved in initializing a new Git repository. Which
command is used for this purpose?
5. What does the git clone command do? When would you use it in a
project?
6. What is the difference between git add, git commit, and git push?
7. Describe the purpose of the git status command. What type of
information does it provide?
8. How does branching work in Git? Why is it considered a powerful
feature in version control?
9. What is the command for creating a new branch, and how can you
switch between branches in Git?
10. What steps are involved in merging branches in Git, and
how can conflicts arise during a merge?
11. Explain the difference between git pull and git fetch.
When would you use each command?

WEEK 13: Introduction to Web APIs

Objectives: At the end of the lecture, students should be able to

Define what a Web API is and explain its purpose in modern
web development. Differentiate between various types of
APIs, including open and closed APIs, Describe the principles
of REST architecture and how they apply to API design.
Identify the key HTTP methods (GET, POST, PUT, DELETE,
PATCH) and their appropriate use cases in RESTful APIs.
Description:
First Hour: Introduction to APIs
Second Hour: Understanding RESTFUL API, practical session
Study Questions:
1. What is a Web API, and how does it differ from local APIs?

9
 2. What are the key characteristics of REST, and why are they
important?
3. List and describe the common HTTP methods used in RESTful APIs.
4. What is the significance of status codes in API responses?
5. Provide examples of at least five status codes and explain their
meanings.
6. How can you create a simple RESTful API using Node.js and
Express.js?

WEEK 14: COURSE REVIEW AND FINAL PROJECT

WEEK 15: Examination

Reading List:
1. Lecturer’s lecture notes.
2. McFedries, P. (2023). HTML, CSS, & JavaScript all-in-one for
dummies. Wiley.
3. McFedries, P. (2024). HTML & CSS essentials for dummies. Wiley.
4. Chacon, S., & Straub, B. (2021). Pro git (2nd ed.). Apress.

HOD’s COMMENTS:
_______________________________________________________
___________________________________________________________________________
___________________________________________________________________________
Name: ________________________ Signature:______________ Date:
___________

DEAN’s
COMMENTS:_______________________________________________________
___________________________________________________________________________
___________________________________________________________________________
Name: ________________________ Signature:______________
Date:___________

10