(Established under the Presidency University Act, 2013 of the Karnataka Act 41 of 2013)

[2024-24 EVEN SEMESTER]

COURSE PLAN

SCHOOL: PSCS DEPT: CSE DATE OF ISSUE:1/10/2025

NAME OF THE PROGRAM : B.Tech
P.R.C. APPROVAL REF. : PU/AC-24.7/SOCSE04/CSE/2022-2026
SEMESTER/YEAR : VI Sem /III Year
COURSE TITLE & CODE : Front-end Full Stack Development (FEFSD) & CSE3150

COURSE CREDIT STRUCTURE :2-0-2-3

CONTACT HOURS : 60 hours (30[L] +30[P])
COURSE IC : Dr.JayanthiKamalesakaran, Ms. Sridevi S, Mr. T Ramesh,
Ms. M Pushpalatha
COURSE INSTRUCTOR(S) : Dr.JayanthiKamalesakaran, Ms. Sridevi S, Mr. T Ramesh,
Ms. M Pushpalatha, Ms Sunitha BJ, Mr Praveen Pawaskar,
Ms Kalpana k, Ms Dhanya Dornadhula, Dr P Sudha,
Mr Santhosh Kumar K L, Mr Syed Moshin Abbasi,
Dr Joe arun raja, Mr. Jai Kumar

COURSE URL : https://presidencyuniversity.linways.com/

PROGRAM OUTCOMES:
PO1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals,
and an engineering specialization to the solution of complex engineering problems. (M)

PO2. Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural sciences, and
engineering sciences. (H)

PO3. Design/development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmental considerations. (H)

PO4. Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to
provide valid conclusions.
PO5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
engineering and IT tools including prediction and modeling to complex engineering activities with an
understanding of the limitations (M)
PO6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal and cultural issues and the consequent responsibilities relevant to the professional
engineering practice.

PO7. Environment and sustainability: Understand the impact of the professional engineering solutions in
societal and environmental contexts, and demonstrate the knowledge of, and need for sustainable
development.

PO8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms of
the engineering practice.

PO9. Individual and team work: Function effectively as an individual, and as a member or leader in
diverse teams, and in multidisciplinary settings. (M)

PO10. Communication: Communicate effectively on complex engineering activities with the engineering
community and with society at large, such as, being able to comprehend and write effective reports and
design documentation, make effective presentations, and give and receive clear instructions. (L)

PO11. Project management and finance: Demonstrate knowledge and understanding of the engineering
and management principles and apply these to one’s own work, as a member and leader in a team, to
manage projects and in multidisciplinary environments.

PO12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change. (M)
PROGRAM SPECIFIC OUTCOMES :
PSO 01. Disciplinary knowledge: Capable of demonstrating proficiency in analyzing and solving problems related
to web development projects.

PSO 02. Problem Solving: Identify, formulate and apply appropriate techniques in the areas related to Bootstrap,
HTML5, CSS3, JavaScript, Ajax, and jQuery.

PSO 03. Design/development of websites: Design and Develop various activities of web sites utilizing Node.js,
NPM, and other relevant tools in the Angular.js and React.js ecosystems.

COURSE PREREQUISITES:
WEB TECHNOLOGIES-CSE2067
COURSE DESCRIPTION:
This intermediate course enables students to perform front-end full stack development, with emphasis on
employability skills. The course covers key technologies and architectures that enable the student to
design and implement front-end. On successful completion of this course, the student shall be able to
pursue a career in full-stack development. The students shall develop strong problem-solving skills as part
of this course.
COURSE OBJECTIVES

The objective of the course is to familiarize the learners with the concepts of Front-end Full Stack
Development and attain Employability through Experiential Learning techniques.

COURSE OUTCOMES: On successful completion of the course the students shall be able to:

TABLE 1: COURSE OUTCOMES

CO Expected
CO
Number BLOOMS LEVEL
CO 1 Design and develop static web pages using HTML5 elements and CSS3 Apply
CO 2 Develop responsive web pages using CSS, JavaScript and bootstrap Apply
CO 3 Demonstrate the concepts of Angular.js to develop a web front-end. Apply
CO 4 Illustrate the concepts of React.js to develop a web front-end Apply

MAPPING OF C.O. WITH P.O.

[H- HIGH, M- MODERATE, L-LOW]

TABLE 2a: CO PO Mapping ARTICULATION MATRIX

CO.
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PO13
No
CO1 M H H - M - - - M L - M -
CO2 M H H - M - - - M L - M -
CO3 M H H - M - - - M L - M -
CO4 M H H - M - - - M L - M -

TABLE 2b: CO PSO Mapping ARTICULATION MATRIX

CO.
No PSO1 PSO2 PSO3
CO1 M M M
CO2 M M M
CO3 H M M
CO4 M M M

COURSE CONTENT (SYLLABUS):

Module: 1: Introduction to Web Technology [8L+6P Hours] [Apply]

HTML5 – Syntax, Attributes, Events, Web Forms 2.0, Web Storage, Canvas, Web Sockets;
CSS3 – Colors, Gradients, Text, Transform.

Module: 2: BootStrap and Advanced JavaScript [6L+6P Hours] [Apply]

Bootstrap for Responsive Web Design; JavaScript – Core syntax, HTML DOM, objects, classes, Async;
Ajax , jQuery Introduction
Module:3: JavaScript Frameworks [8L+10P Hours] [Apply]

Setting up Development & Build Environment: Node.js and NPM; Introduction to TypeScript;
Working with OOP concepts with TypeScript; Angular Fundamentals; Angular CLI; Debugging Angular
applications; Components & Databinding in Depth; Angular Directives; Using Services & Dependency
Injection; Angular Routing; Observables; Handling Forms in Angular Apps; Output transformation using
Pipes; Making Http Requests; Authentication & Route Protection; Dynamic Components; Angular
Modules & Optimizing Angular Apps; Angular Animations; Adding Offline Capabilities with Service
Workers; React.js ; Developing single page application.

Module:4: Fundamentals of DevOps and Project Management [8L+8P Hours] [Apply]

Introduction to Agile Methodology; Scrum Fundamentals; Scrum Roles, Artifacts and Rituals; DevOps –
Architecture, Lifecycle, Workflow & Principles; DevOps Tools Overview – Jenkins, Docker,
Kubernetes. Review of GIT source control. Deploying an Angular/React App; Unit Testing in Angular
Apps (Jasmine, Karma).

SKILL SETS TO BE DEVELOPED:

Graduate of the B.Tech. Program in Computer Science and Engineering shall be able to;
1. An attitude of enquiry.
2. Confidence and ability to tackle new problems.
3. Ability to interpret events and results.
4. Ability to work as a leader and as a member of a team.
5. Assess errors in systems/processes/programs/computations and eliminate them.
6. Observe and measure physical phenomena.
7. Write reports.
8. Select suitable equipment, instrument, materials & software
9. Locate faults in system/Processes/software.
10. Manipulative skills for setting and handling systems/Process/ Issues
11. The ability to follow standard /legal procedures.
12. An awareness of the Professional Ethics.
13. Need to observe safety/General precautions.
14. To judge magnitudes/
15. Results/issues without actual measurement/actual contacts
DELIVERY PROCEDURE (PEDAGOGY):

TABLE 3: SPECIAL DELIVERY METHOD/ PEDAGOGY PLANNED WITH TOPICS

** At end of
Pedagogy title/ Short
S. Lecture Subtopic as per Lesson semester please
explanation of adopted
No Number Plan update whether
pedagogy
activity was done

2 L10 JavaScript Participative Learning

3 L24 Angular Experimental Learning
4 L30 DevOps Project-Based Learning

REFERENCE MATERIALS:
Text Book
T1. Fender, Young, “Front-end Fundamentals”,Leanpub, 2015
T2. Northwood, Chris, “The Full Stack Developer: Your Essential Guide to the Everyday Skills
Expected of a Modern Full Stack Web Developer”,APress, 2018
T3. “HTML & CSS: The Complete Reference, Fifth Edition”, Thomas A. Powell, 2010

Reference Books
R1. Flanagan D S, “Javascript : The Definitive Guide” 7th Edition. 7th ed. O'Reilly
Media; 2020.
R2. Alex Libby, Gaurav Gupta, and AsojTalesra. “Responsive Web Design with HTML5 and
CSS3Essentials”,Packt Publishing, 2016
R3. Duckett J Ruppert G Moore J. “Javascript&Jquery : Interactive Front-End Web
Development.”;Wiley; 2014.
R4. Greg Sidelnikov, “React.js Book_ Learning React JavaScript Library”, 1 edition, Scratch-River
TigrisLLC 2016

E.Resources
W1.https://www.youtube.com/watch?v=JGNTYXkVCVY&list=PLd3UqWTnYXOkTSBCBNyyhxo_jxl
Y_uTWA&index=2
W2. NPTEL: https://nptel.ac.in/courses/106106156
W3. COURSERA: https://in.coursera.org/learn/introduction-to-front-end-development
W4.edX:https://www.edx.org/course/introduction-to-cloud-development-with-html5-css3-and-
javascript
W5. PU LI3B: https://presiuniv.knimbus.com/user#/home
 SPECIFIC GUIDELINES TO STUDENTS:
1. Students are required to maintain minimum 75% of attendance
2. Technology enabled learning through NPTEL and online course may help in clear understanding the topics.
3. Follow the instructions of course instructor in both class and lab.
4. Avoid being absent in labs as it will affect the understanding of the experiments.
5. On time submission of assignments.
6. CA3-Certification of Nodejs, Angular js, React js will be accepted only from the platforms-
NPTEL/HACKKERRANK / CODECHEF / COURSERA. Last date of submission is on or before 25/04/25

COURSE SCHEDULE
TABLE 4: COURSE BROAD SCHEDULE
PLANNED PLANNED
TOTAL NUMBER OF
Sl. No. ACTIVITY STARTING CONCLUDING
PERIODS
DATE DATE
01 Overview of the course 20.01.25 20.01.25 1
02 Module : 01 21.01.25 08.02.25 6
03 CA1 09.02.25 09.02.25
(Surprise Test-1) 1
04 Module: 02 10.02.25 28.02.25 5
05 CA2 03.03.25 03.03.25 1
(Quiz/Assignment)

06 Midterm 17.03.25 21.03.25 2

07 Module:03 04.03.25 11.04.25 8
08 Module:04 15.04.25 02.05.25 2
09 CA5 05.05.25 10.05.25 4
Seminar
10 End Term Examination As Per CoE

Sl. Starting Concludin TotalNumber

Activity
No. Date g ofPeriods
Date
01 Labsheet-1 20-Jan-2025 24-Jan-25 2
Labsheet-2 27-Jan-25 31-Jan-25 2
02 Labsheet-3 03-Feb-25 07-Feb-25 2
Labsheet-4 10-Feb-25 14-Feb-25 2
03 Lab sheet-5 17-Feb-25 21-Feb-25 2
04 Lab sheet-6 24-Feb-25 28-Feb-25 2
05 Lab sheet-7 03-Mar-25 07-Mar-25 2
06 Lab sheet-8 10-Mar-25 14-Mar-25 2
07 Mid Term 17-Mar-25 21-Mar-25 2
08 Lab sheet-9 24-Mar-25 28-Mar-25 2
09 Lab sheet-10 31-Mar-25 04-Apr-25 2
10 Lab sheet11& Labsheet-12 07-Apr-25 11-Apr-25 2
11 CA3 21-Apr-25 25-Apr-25 2
12 CA4 28-Apr-25 02-May-25 2
13 CA6 05-May-25 09-May-25 2

DETAILED SCHEDULE OF INSTRUCTION:

TABLE 5: DETAILED COURSE SCHEDULE / LESSON PLAN (THEORY)

Session Lesson Topics & Learning LOL HOL Course Mode of Reference
Number Title Objectives (Low (Hig Outcome Delivery / (Chapter &
er her Pedagogy Page No.)
Orde Orde Adopted
LO: Student shall be r r
able to Learn Lear
ing) ning)
L1 Overview Understand the LOL1 - CO1,2,3,4 CHAL T3-
of the importance of the K Introduction
Course course and Carrier AND (Page-6)
opportunities TALK

L2 Module 1: Syntax, Attributes LOL1 - CO1 CHAL

HTML5 LO1: What is the , K T3-Ch2
purpose of the LOL2 AND (Page 55)
<!DOCTYPE html> TALK R2,
declaration in an Chapter1
HTML5 document? (Page-6)
LO2: Evaluate the use
of the data-* attributes
in a web application.
How do these
attributes improve
flexibility compared
to hardcoding values
within JavaScript?

L3 Module 1: Events LO - CO1 CHAL T3 –chapter3

LO1:What is an event L1,L K Page-146
HTML5 in HTML5, and can OL2 AND
you name three TALK
common types of
events?
LO2: Design an
interactive HTML5
webpage that uses at
least three different
 event types (e.g.,
onclick, onmouseover,
onchange) to enhance
user interaction.
Explain your choices
of events and their
implementation.
L4 Module 1: Web Forms 2.0 LOL1 CO1 CHAL T3 –Chapter2-
LO1: What is Web , K page 83
HTML5 Forms 2.0, and name LOL2 AND
two new input types TALK
introduced in HTML5
for forms.
LO2: Analyze the
advantages of using
Web Forms 2.0 input
validation attributes
(e.g., required,
pattern, min, max)
over JavaScript-based
validation.

L5 Module 1: Web Storage, Canvas, LO CO1 CHAL R2,

Web Sockets L1,L K Chapter1
HTML5 OL2 AND Page-6
LO1: Provide a brief TALK T3-chapter 2
definition and purpose Page 83
of Canvas, and Web
Sockets?
LO2: Considering the
dynamic nature of
modern web
development, discuss
how the integration of
HTML5 features such
as Web Forms 2.0,
Web Storage, Canvas,
and Web Sockets can
contribute to
enhancing user
experiences.
L6 CSS3 Colors, Gradients LOL1 CO1 Participativ T1,
LO1: Provide a brief , e Learning Chapter 4,
explanation of the role LOL2 Page 38
and application of
CSS3 in web
development,
focusing on the
properties related to
Colors, Gradients,
Text, and Transform.
 LO2: Explore how the
advanced features of
CSS3, including
Colors, Gradients,
Text, and Transform,
contribute to the
visual design and user
interface of modern
websites.
L7 Module 1: Text LOL1 CO1 CHAL T3-chapter5
LO1: What is the , K Page 600
CSS3 purpose of the text- LOL2 AND
shadow property in TALK
CSS3, and how is it
applied?
LO2:Design a visually
appealing heading for
a webpage using
CSS3 text properties,
such as text-shadow,
text-transform, and
letter-spacing. Explain
how these properties
enhance the overall
design.
Transform
LO1: What is the
purpose of the
transform property in
CSS3, and name two
types of
transformations it
supports.
LO2: Create a CSS
animation effect
where an element
rotates and scales
simultaneously using
the transform
property. Explain the
steps involved and the
significance of
combining
transformations.

L8 Continuous Assessment of Module-1

L9 Module 2 BootStrap for LOL1 - CO2 CHAL R3,

Responsive Responsive Web , K Chapter7
web design Design LOL2 AND Page-293
Async; TALK
 LO1: Can you provide
a brief overview of
how Bootstrap is
utilized in responsive
web design, and what
are the key advantages
it offers for creating
mobile-friendly
interfaces?
LO2: Compare and
contrast the
approaches of
Bootstrap, Async,
Ajax, and jQuery in
enhancing the user
experience of web
applications. Provide
examples of scenarios
where each
technology is
particularly beneficial
and discuss
considerations for
selecting the most
suitable approach in
different development
contexts.
L10 JavaScript Core syntax, LOL1 CO2 Participativ T2,
HTML , e Learning Page-30
DOM,Object,classes LOL2
LO1: Explain the
significance of
understanding the
core syntax of
JavaScript in web
development.

LO1: Discuss the need

the HTML Document
Object Model (DOM).
Provide examples of
practical applications
where knowledge
HTML DOM
manipulation is
crucial for creating
dynamic and
interactive web pages.

L11 Module 2 LO1: What is jQuery, LOL1 - CO2 CHAL Chapter 7-

Ajax and how does it , K page 300
Introductio simplify JavaScript LOL2 AND
 n coding? TALK
jQuery LO2: Develop a
Introductio simple web page that
n uses jQuery to
implement an
interactive feature,
such as toggling the
visibility of a section
or creating an image
slider. Explain how
jQuery is utilized to
achieve the
functionality.
L12 Module:2 Introduction, syntax, LOL1 CO2 CHAL R3,
Events, Selectors, , K Chapter 7
JQuery Effects, classes LOL2 AND Page No.293
TALK
LO1: Can you provide
a brief overview of
the role and purpose
of classes in the
context of JavaScript
programming?
LO2: Explain how the
concepts of Events,
Selectors, Effects
collectively contribute
to creating dynamic
and interactive web
pages using
JavaScript.
L13 Module 2: LOL1 CO2 CHAL R3,
Ajax Introduction, Request, , K chapter8,
Response LOL2 AND page-367
LO1:What is the basic TALK
definition of an HTTP
request, and how does
it differ from an
HTTP response?
LO2: Discuss the
intricacies of the
HTTP protocol,
detailing how requests
and responses
facilitate
communication
between clients and
servers
L14 Continuous Assesment-2 of Module-2
L15 Module 3: Node.js and NPM, LOL2 - CO2 CHAL T1,
Introduction to K Chapter7,
Setting up
TypeScript; Working AND Page-50
Developme with OOP concepts TALK
with TypeScript
nt & Build
Environme LO1: Provide a brief
explanation of the
nt
roles of Node.js and
NPM in modern web
development.
LO2: Discuss how the
combination of
Node.js and NPM
revolutionizes server-
side JavaScript
development. Explain
the advantages and
use cases of using
Node.js for server-
side programming,
and elaborate on how
NPM (Node Package
Manager) facilitates
package management
and dependency
resolution in Node.js
projects.

L16 Module 3: Components & LOL1 - CO3 Experiment T1,

Angular Databinding in Depth; , al Chapter3,
Fundament Angular Directives LOL2 Learning Page no.16
als LO1: Explain the
basic concept of
components and data
binding in Angular.
LO2: Delve into the
intricacies of Angular
components and data
binding. Discuss how
Angular components
are structured, how
they facilitate data
binding, and explore
advanced techniques
for effective data
communication
between components.
Using Services &
Dependency Injection,
Angular Routing,
Observables
 LO1: Can you explain
the primary purpose
of using services and
dependency injection
in Angular
development?
High-Order LO1:
LO2: Explore into the
advanced features of
Angular, discussing
how services and
dependency injection
contribute to the
modularity,
maintainability, and
scalability of Angular
applications.
L17 Module 3: Using Services & LOL2 CO3 CHAL T1,
Angular Dependency Injection, K Chapter3,
Fundament Angular Routing, AND Page no.16
als Observables TALK
LO1: Can you explain
the primary purpose
of using services and
dependency injection
in Angular
development?
High-Order LO1:
LO2: Explore into the
advanced features of
Angular, discussing
how services and
dependency injection
contribute to the
modularity,
maintainability, and
scalability of Angular
applications.

L18 Module 3: Handling Forms in LOL1 - CO3 CHAL T1,

Angular Angular Apps, Output , K Chapter3,
Fundament transformation using LOL2 AND Page no.16-40
als Pipes, Making Http TALK
Requests

LO1: What is the role

of form handling in
Angular applications,
and how does Angular
simplify the process?
LO2: Explore the
complexities of
 handling forms in
Angular applications,
including form
validation,
submission, and
interaction with the
backend..

L19 Mid Term

L20 Mid Term

L21 Module 3: Authentication & LOL1 - CO3 CHAL T1,

Angular Route Protection, , K Chapter3,
Fundament Dynamic Components LOL2 AND Page no.16
als TALK
LO1: Why is
authentication and
route protection
important in Angular
applications?
LO2: Investigate the
intricacies of
implementing
authentication and
route protection in
Angular. Discuss best
practices for securing
routes and ensuring
user authentication.

L22 Module 3: Angular Modules & - - CO3 CHAL T1,

Angular Optimizing Angular K Chapter3,
Fundament Apps, Deploying an AND Page no.16-40
als Angular App, Angular TALK
Animations
LO1: What is the role
of Angular modules in
structuring an Angular
application, and why
is optimizing Angular
apps important?
LO2: Explore the
advanced aspects of
Angular development,
including the use of
Angular modules for
structuring
applications and
optimizing Angular
 apps for better
performance
L23 Module 3: LOL2 - CO3 CHAL T1,
Angular Adding Offline , K Chapter3,
Fundament Capabilities with LOL3 AND Page no.16
als Service Workers, Unit TALK
Testing in Angular
Apps

LO1: What is the

primary benefit of
adding offline
capabilities with
service workers in an
Angular application?
LO1: Delve into the
advanced features of
Angular, specifically
the integration of
offline capabilities
using service workers.

L24 Module 3: Introduction tO CO3 Experime T1,

Angular Angular CLI ntal Chapter3,
CLI Learning Page no.16-40
LO1: Provide a brief
overview of what
Angular CLI is and its
basic functionality.
LO2: Explore the
features and
capabilities of
Angular CLI in-depth,
discussing how it
streamlines the
development process
in Angular
applications.
Highlight
Debugging Angular
applications
LO1: What are some
common debugging
tools used in web
development, and how
do they assist
developers in
identifying and fixing
issues?
LO2: Explore
advanced debugging
techniques and tools
 used in web
development. Discuss
how developers can
effectively
troubleshoot complex
issues, identify
performance
bottlenecks, and
debug asynchronous
code
Overview of React.js,
Advantages of
React.js, React.js vs.
Other Frameworks

LO1: Can you provide

a brief overview of
React.js and its
primary use in web
development?
LO2: Compare and
contrast React.js with
other frameworks,
highlighting its
distinctive features
and benefits
L25 Module 4: Using ES6 Classes, LOL2 - CO4 CHAL R4,
Distinct Using , K Page- 32-55
Ways of React.createClass, LOL3 AND
Initializing Introduction to JSX, TALK
a React Benefits of Using
Class and JSX, JSX Syntax and
JSX Examples
Walkthrou
gh
Low-Order LO1:
LO1: What are the
distinct ways of
initializing a React
class, and how do they
differ?
LO2: Dive into the
initialization process
of React classes,
exploring the various
ways to instantiate
them.
L26 Module 4: Introduction to React LOL2 - CO4 CHAL R4,
React Testing,Types of , K Lesson3,
Testing React Testing, Testing LOL3 AND Page- 69-100
Libraries and TALK
Framework
 LO1: What is the
purpose of testing in
React development,
and why is it
important?
LO2: Discuss the
concept of React
testing, exploring the
different types of
testing employed in
React applications.
L27 Module 4: Introduction to Agile LOL1 - CO4 CHAL T2,
Introductio Continuous , K Chapter2
n to Agile Assesment-5 of LOL2 AND page-11
Module-4 TALK
LO1:
What is Agile
Methodology in
software
development, and
what are its key
principles?

LO2: Discuss the core

values of Agile and
how it differs from
traditional project
management
approaches.

L28 Module 4: Scrum Fundamentals; LOL1 CO4 CHAL T2, chapter 2

Introductio Scrum Roles, , K Page-23-50
n to Agile Artifacts and Rituals; LOL2 AND
Methodolo Continuous TALK
gy,Scrum Assesment-5 of
Module-4
LO1: Can you provide
a brief definition of
Scrum and its key
components?
LO2: Given a
hypothetical project
scenario, describe
how the roles,
artifacts, and rituals of
Scrum.

L29 Module 4: Architecture, LOL1 - CO4 CHAL T2,

DevOps Lifecycle, Workflow , K Chapter 4,
and & Principles. LOL2 AND Page-67-90
DevOps Tools: Jenkins, TALK
 Tools Docker, Kubernetes.
Overview Continuous
Assesment-5 of
Module-4

LO1: What is the

primary purpose of
Docker in the context
of software
development, and how
does it contribute to
the overall workflow?
LO2: In a real-world
scenario, describe
how the integration of
Jenkins, Docker, and
Kubernetes in a
DevOps environment

L30 Module 4: Architecture, LOL1 - CO4 Project T2,

DevOps Lifecycle, Workflow , Based Chapter 4,
and & Principles. LOL2 Learning Page-67-90
DevOps Tools: Jenkins,
Tools Docker, Kubernetes.
Overview Continuous
Assesment-5 of
Module-4
LO1: What is the
primary purpose of
Docker in the context
of software
development, and how
does it contribute to
the overall workflow?
LO2: In a real-world
scenario, describe
how the integration of
Jenkins, Docker, and
Kubernetes in a
DevOps environment

TABLE 5: DETAILED SCHEDULE OF INSTRUCTION/LESSONPLAN (LAB)

Sl. Task No Topics & Learning LOL (Lower HOL Number of Skills to Course
No. Outcomes Order Learning) (Higher Lab Sessions be Outcome
Order required to developed to be
Learning)
complete the developed
task
 LO: Student shall be
able to

01 P1 Familiarization of LOL1 - 2 1,2,3 CO1

HTML and CSS
LO1: What is the
general overview of
the Frontend Full
Stack course, and why
is laboratory
familiarization
important?

LO2: Explore the

comprehensive
concepts covered in
the Frontend Full
Stack course..
02 P2 Create an HTML LOL1, LOL3 - 2 1,3,5,8 CO1
webpage showcasing
biodata with CSS
styling.Use HTML5
tags and CSS to
make it attractive.
LO1:What does
HTML5 stand for, and
how does it differ from
previous versions of
HTML?
LO2: Explore how
HTML5 addresses
modern web
development
challenges and enables
the creation of more
interactive and
dynamic web pages.
Additionally, discuss
the impact of HTML5
on multimedia, mobile
development, and the
overall user experience
in web applications
03 P3 Design a Web Page LOL2 L3 2 1,2,3,5,6, CO1
for Interactive web 7,8,9
page for new
restaurant using
various CSS3
features such as
colours, text styles,
transforms, and
gradients.
LO1:
What does CSS3 stand
for, and how does it
extend the capabilities
of CSS?
LO2: Analyze how
CSS3 contributes to
the design and layout
of modern web pages,
including aspects such
as colors, gradients,
and transformations.
Additionally, discuss
the role of CSS3 in
responsive web design
and its impact on the
overall visual appeal
and user experience of
websites.
04 P4 Create a simple web LOL1, LOL2 2 1,2,3,5,6, CO2
form to gather user - 7,8,9
information.
LO1: What is the
purpose of Bootstrap
in web development,
and how does it
facilitate responsive
design?
LO2: Provide
examples of how
Bootstrap simplifies
the implementation of
common design
patterns and enhances
the overall user
experience. Discuss
 considerations and
best practices for
effectively using
Bootstrap in
conjunction with
HTML DOM to create
modern and responsive
web applications.
05 P5 Basic JavaScript LOL1, LOL3 2 1,2,3,5,6, CO2
Exercises & Canvas 7,8,9
Drawing Application.

LO1: Can you provide

a brief overview of
Bootstrap and its role
in web development?

LO2: Provide
examples of how
Bootstrap simplifies
the design and layout
process, and discuss
considerations for
optimizing the
integration of
Bootstrap with the
HTML DOM to ensure
a seamless and
effective development
workflow.
06 P6 JavaScript Exercises LOL2, LOL3 - 2 1,2,3,5,6, CO2
for form validation. 7,8,9
LO1: What is jQuery,
and how does it
simplify DOM
manipulation in web
development?

LO2: Explore real-

world scenarios where
jQuery can enhance
the development
process and provide a
more efficient way to
interact with the
HTML Document
Object Model.
Additionally, discuss
considerations for
using jQuery in
modern web
 development,
considering the rise of
alternative
technologies and
frameworks.
07 P7 JavaScript Exercises LOL1 L3 2 1,2,3,5,6, CO3
for Online Student 7,8,9
Registration.
LO1: What is
JavaScript, and how is
it used in web
development?

LO2: Examine how

JavaScript is employed
for manipulating the
Document Object
Model (DOM) to
create dynamic and
interactive user
interfaces. Discuss the
evolution of
JavaScript, its
compatibility with
different browsers, and
its role in client-side
scripting.

08 Create a RSVP Form LOL2, LOL3 - 2 1,2,3,5,6, CO3

using the bootstrap’s 7,8,9
P8 form controls.
LO1: What is
JavaScript, and how
does it contribute to
the interactivity of web
pages?

LO2: Explore the role

of Ajax
(Asynchronous
JavaScript and XML)
in enabling
asynchronous
communication with a
web server, allowing
for seamless data
retrieval and updates
without requiring a full
page reload. Provide
examples of how
JavaScript and Ajax
are commonly used
 together to enhance the
user experience in
modern web
applications.

09 P9 Create a Responsive LOL3 L3 2 1,2,3,5,6, C02

image grid using 7,8,9
Bootstrap 5.
LO1: What is
JavaScript, and how is
it typically used in
web development?

LO2: Provide
examples of scenarios
where JavaScript and
Ajax work in tandem
to create seamless and
responsive web
applications,
highlighting their
impact on user
experience and data
retrieval.

10 P10 Write a JavaScript LOL2 L3 2 1,2,3,5,6, CO3

program using AJAX 7,8,9
code and Create a
web page that
displays multiple
elements and
implement
functionality to apply
fading effects on
these elements using
jQuery.
LO1: What does Ajax
stand for, and what is
its primary purpose in
web development?

LO2: Discuss the

concept of
Asynchronous
JavaScript and XML
and how it facilitates
asynchronous
communication with a
web server
11 P11 Create a JavaScript LOL2 L3 2 1,2,3,5,6, CO3
file (app.js) to define 7,8,9
your AngularJS
application module
and controller.
LO1: What is
AngularJS, and what
are its key features?

LO2: Discuss how

AngularJS facilitates
the development of
dynamic and single-
page web applications.
Explore key features
such as two-way data
binding, dependency
injection, and the
modular structure of
AngularJS applications
12 P12 Design an LOL2, LOL3 - 2 1,2,3,5,6, CO3
"AngularJS Solar 7,8,9
System Explorer: A
Design for Planet
Data Visualization".
LO1: What is
AngularJS, and what
are its primary
advantages in web
development?

LO2: Discuss real-

world use cases where
AngularJS shines in
simplifying complex
web development
tasks. Additionally,
consider the evolution
of AngularJS and its
position in the broader
landscape of frontend
frameworks and
libraries.
13 P13 Lab Continuous Assessment -3 of Module-3 & 4

14 P14 Lab Continuous Assessment -4 of Module-1,2,3 & 4 (Record)

15 P15 Develop a mini 2 1,2,3,5,6, CO4
project using LOL2, LOL3 - 7,8,9
react/angular.

LO1: Explore the

fundamental principles
and capabilities of
React.js

LO2: Provide
examples of scenarios
where React.js shines
in terms of
performance and code
maintainability.
Additionally, discuss
the role of React.js in
the broader landscape
of frontend
development and its
compatibility with
other technologies and
libraries.
Lab Continuous
Assessment -6 of
Module-1,2,3,4
(Mini Project)

ASSESSMENT SCHEDULE FOR THEORY AND LABORATORY COMPONENT:

TABLE 6 :ASSESSMENT SCHEDULE

Sl. Course Duration Tentative
No. Assessment Contents Marks Weightage
Outcomes In Hours Date
Type
1.30 25(Th+
3 Mid Term Exam Module 1, 2 CO1, CO2 25%
Hours +25(P)

CA1 CO1 NA
2 Module1 5 2.5% -
(Surprise Test-1)
CA2 CO2
3 Module2 NA 10 5% -
(Quiz/Assignment)
CA3
4 Module3,4 CO3,CO4 NA 5 2.5% -
(Certification )
CA4
5 All Modules CO1,CO2, NA 5 2.5%
(Lab Continuous CO3,CO4 &
Assessment- CO5
 Record)

CO4
CA5
6 Module4 NA 10 5%
(Seminar)
CO1,CO2,
CA6
7 All Modules CO3,CO4 & NA 15 7.5% -
(Mini Project) CO5
(Including
React/Angular)
Module 1, 2, CO1, CO2,
7 End Term Exam 3 Hours 50(Th)+50(P) 50%
3, 4 CO3, CO4

COURSE CLEARANCE CRITERIA:

AS PER ACADEMIC REGULATIONS OF THE UNIVERSITY

MAKEUP EXAM POLICY:

AS PER ACADEMIC REGULATIONS OF THE UNIVERSITY

CONTACT TIMINGS IN THE CHAMBER FOR ANY DISCUSSIONS:

University-Wide Free Hour

Sample Thought Provoking Questions For Theory Component:

TABLE 7a: Sample Thought Provoking Questions [For Theory Component]:

Course
Question Marks Outcome Bloom’s
SNo.
No. Level

Knowledge,
1 Explain Fundamentals of Scrum Roles, Artifacts and Rituals 5 C01
Comprehension

Design web application for ALUMNI using CO1,CO2,CO3,

2 8 Application
HTML 5 Tags , CSS3 , Bootstrap, Angular JS CO4

Table 7b: Sample Thought Provoking Questions to be asked to Assess the Students’
Preparedness to carry out the Task [For Laboratory Component] :

Sl Course BLOOM’S LEVE L

Question Task No.
No. Outcome No.
 Create tiny application like adding, removing,
deleting, resetting products which reflects in the
1 1 CO3 Apply
total number of products into our shopping cart
using React JS.

Create LinkedIn Clone Application. Apply

2 CO3
2

Table 8: TARGET SET FOR COURSE OUTCOME ATTAINMENT:

Threshold Remarks on
Set for the Target set attainment
CO for Actual C.O.
Sl. CO. &Measures
Course Outcomes attainment Attainment
No. No. to enhance
in In Percentage*
percentage the
attainment*

Create a webpage using HTML5 and

1 CO1 CSS to display a responsive layout. 70 70%

Illustrate development of a responsive

2 CO2 web. 65 65%

Apply concepts of Angular.js to

3 CO3 develop a web front-end. 60 60%

Apply concepts of React.js to develop a

4 CO4 web front-end. 65 65%
* TO BE FILLED AFTER END TERM EXAM WITH ACTUAL ATTAINMENT VALUES

Signature of the Course Instructor:

This course has been duly verified Approved by the D.A.C.

Signature of the Chairperson D.A.C.

Course Completion Remarks & Self-Assessment.

REVISED TAXONOMYSAMPLE VERBS

Learning Outcomes Verbs at Each Bloom Taxonomy Level to be used for writing the course Outcomes.

TABLE 9: REFERENCE SAMPLES OF BLOOMS TAXONOMY VERBS

Cognitive Level Illustrative Verbs Definitions
arrange, define, describe, duplicate, identify, label,
list, match, memorize, name, order, outline, remembering previously learned
Remember
recognize, relate, recall, repeat, reproduce, select, information
state
classify, convert, defend, discuss, distinguish,
estimate, explain, express, extend, generalize, give
Understand example(s), identify, indicate, infer, locate, grasping the meaning of information
paraphrase, predict, recognize, rewrite, report,
restate, review, select, summarize, translate
Apply apply, change, choose, compute, demonstrate,
discover, dramatize, employ, illustrate, interpret,
applying knowledge to actual
manipulate, modify, operate, practice, predict,
situations
prepare, produce, relate schedule, show, sketch,
solve, use write
analyze, appraise, breakdown, calculate,
categorize, classify, compare, contrast, criticize,
derive, diagram, differentiate, discriminate, breaking down objects or ideas into
Analyze distinguish, examine, experiment, identify, simpler parts and seeing how the parts
illustrate, infer, interpret, model, outline, point relate and are organized
out, question, relate, select, separate, subdivide,
test
appraise, argue, assess, choose, compare, contrast,
criticize, defend, discriminate, estimate, evaluate,
rearranging component ideas into a
Evaluate explain, interpret, judge, measure, predict, rank,
new whole
rate, recommend, select, support, validate
 arrange, assemble, construct, collect, compose,
construct, create, design, develop, formulate,
making judgments based on internal
Create integrate, manage, organize, plan, prepare,
evidence or external criteria
prescribe, produce, propose, specify, synthesize,
write