OBE-CSL Lesson Plan|ISP465

Code : ISP465
Course Name : Introduction to Front End Web Development
Lecturer : Puan Noor Afni bt Deraman
Room No. : 17
Level : Bachelor’s degree
Credit Units : 3
Contact Hours : 4
Course Learning : After completing this course, the students should be able to:
Outcome 1. Describe the use of HTML, CSS, JAVASCRIPT code to create
personal websites. (C2)
2. Display practical skills in using HTML, CSS, and JAVASCRIPT code
and tools to solve real-case problems. (P2)
3. Build a fully interactive website by utilizing a front-end
framework. (P5)
Course Description : The course introduces students to the core concepts of mark-up
languages, which are the fundamental components of a web page's
design and style. It will familiarize students with HTML, Cascading
Style Sheets (CSS), JavaScript, and the Bootstrap CSS Framework.
This course is designed to give students a foundation in front-end
web development. At the end of the course, students will be able to
create a website using markup languages, Cascading Style Sheets
(CSS), JavaScript, and the Bootstrap framework.

No COURSE LEARNING OUTCOMES (CLO) PLO1 PLO3 PLO6

Describe the use of HTML, CSS, JAVASCRIPT code to create
1 /
personal websites. (C2)
Display practical skills in using HTML, CSS, and JAVASCRIPT code
2 /
and tools to solve real-case problems. (P2)
Build a fully interactive website by utilizing a front-end framework.
3 /
(P5)
PLO1 Apply the knowledge and understanding of information systems and technical skills to develop and maintain related
enterprise systems. (LOD1)
PLO3 Construct practical solutions related to functional architecture and documentation of enterprise systems. (LOD3)
PLO6 Use digital technologies to support enterprise solutions. (LOD6)

TEACHING METHODOLOGY

Methods of instructions are based on the combination of lectures, tutorial, lab work and group
project.

REFERENCES

1. Patrick M. Carey, New Perspectives on HTML5, CSS3, and JavaScript, 6th, Cengage Learning,
2018, ISBN:9781305503939.
2. Terry Felke-Morris, Web Development and Design Foundations with HTML5, 9th, Pearson,
2019, ISBN:9780134801148.
3. Julie C. Meloni, Sams Teach Yourself HTML, CSS, and JavaScript All in One, 3rd, SAMS, 2018,
ISBN: 978067233808.
 OBE-CSL Lesson Plan|ISP465
LESSON PLAN ISP465 (OCTOBER 2024– FEBRUARY 2025)

LAB /
WEEK TOPIC LECTURE
ADDITIONAL NOTE
Topic 1: Introduction To HTML
• Overview Lab: Installation of
• Effective HTML Page software & setting up the
1
7/10- 11/10/2024
• Elements, Attributes, Character References & environment
Comments */Entrance Survey: 7/10 -
• Lengths, Dates & Times 3/11/2024/*
• Development tools
Topic 2: HTML Structure Part 1
• HTML Version Information
• The Document Head & Body
2 • HTML Structure Bodies Lab: Activity 1
14/10- 18/10/2024 • HTML Structure: Text
• HTML Structure: List
• HTML Structure: Table
• HTML Structure: Links, Objects & Images
Topic 3: HTML Structure Part 2
• HTML Semantics
3
• HTML Tags, Block Tags, Inline Tags Lab: Activity 2
21/10- 25/10/2024
• HTML Class and HTML ID Lab Assessment 1: HTML
• Forms
Topic 4: Cascading Style Sheets 3 – Part 1
• Introduction to CSS3
• CSS Selectors Lab: Activity 3
4 • CSS Properties Project: Briefing & Group
28/10- 1/11/2024 • CSS Units Formation
• Applying CSS to HTML: In-Line, Internal, and */31/10 (Thurs) – Deepavali/*
External
• CSS Div and Span
Topic 5: Cascading Style Sheets 3 – Part 2
5 • CSS Box-Model Lab: Activity 4
4/11- 8/11/2024 • CSS Position Lab Assessment 2: CSS
• CSS Grid
Topic 6: Cascading Style Sheets 3 – Part 2 (cont.)
Lab: Activity 5
6 • CSS Flexbox
Project: Proposal
11/11- 15/11/2024 • CSS Website Layout
Submission
• HTML Responsive Web Design
18/11 – 24/11/2024 SEMESTER BREAK
Topic 7: JavaScript – Part 1
• Introduction to JavaScript
• Variables (Local vs Global)
7 Lab: Activity 6
• Syntax, Comments, Whitespace, Line breaks
25/11 – 29/11/2024 Test 1 – 15%
and Case Sensitivity
• Operators (Arithmetic, logical, comparison,
assignment, conditional)
 OBE-CSL Lesson Plan|ISP465
Topic 7: JavaScript – Part 1 (cont.) Lab: Activity 7
8
• Basic document object model (DOM) Lab Assessment 3:
2/12 – 6/12/2024
• JavaScript Placement: External and Internal JavaScript 1
Topic 8: JavaScript – Part 2
9 • Control structures (If-Else, Switch)
Lab: Activity 8
9/12 – 13/12/2024 • Iteration structures (For loop, do-while loop,
and while loop)
Topic 8: JavaScript – Part 2 (cont.) Lab: Activity 9
10
• User Defined Function Lab Assessment 4:
16/12 – 20/12/2024
• Event (onclick, onmouseover and etc.) JavaScript 2

23/12 – 29/12/2024 FESTIVE HOLIDAY BREAK

Topic 9: Introduction to Front End Framework

• Bootstrap Framework
11 Lab: Activity 10
30/12 – 3/1/2025
• Bootstrap: Layout (Container, Grid) */1/1 (Wed) – New Year/*
Bootstrap: Form & Components (Alert, Button,
Navbar)
12 Test 2 - 15%
6/1 – 10/1/2025
• Project Progress Discussion */Exit Survey: 6/1 -9/2/2024/*
*/ SuFO: 6/1 -9/2/2024/*
13
Project Submission: Written Report – 15%
13/1 – 17/1/2025
14
Project Demonstration – 35%
20/1 – 24/1/2025

ASSESSMENT

ACTIVITY PERCENTAGE
TEST(S)
1. Test 1 (Topic 1 - Topic 4) 15%
INSTRUCTOR ASSIGNED TASKS:
1. Lab Exercises (4 tasks: 1 HTML, 1 CSS, 2 JavaScript, 5% each) 20%
2. Group Project
a. Written Report (Proposal 5%, Full Report 10%) 15%
b. Project Demonstration 35%
FINAL ASSESSMENT (Topic 5 - Topic 8) 15%
Total 100%