Course Plan

A. Course Handout (Version 1.0)

Institute/School Name Chitkara University Institute of Engineering and Technology

Department Name Department of Computer Science & Engineering
Programme Name Bachelor of Engineering (B.E.), Computer Science & Engineering
Course Name Front-End Engineering-II Session 2024-2025
Course Code 22CS014 Semester/Batch 3rd/2023
L-T-P (Per Week) 2-0-4 Course Credits 04
Course Coordinator Dr. Kiran Deep Singh

CLO01 Understand the fundamental concept of Web Development.

Understand the JavaScript advance concepts, JQuery, AJAX and ReactJS to develop web pages and
CLO02
retrieve data from the server.
CLO03 Apply different attributes to change the layout and position of elements on web pages.
CLO04 Analyse the dynamic changes and responses using advanced web concepts.
CLO05 Design the minor project and generate report using Front End Technologies.

1. Objectives of the Course

This course covers all the emerging Web Technologies which are used by major private and public organization.
The main objectives of the course are:
 To provide knowledge of Front-End Technologies like Advance JavaScript concepts, JQuery and React JS
to enable students to build user friendly websites.
 To provide the required skills and project-based experience needed for entry into web design and
development careers.
 To provide knowledge of variety of strategies and tools to create well-designed websites.

2. Course Learning Outcomes

After completion of the course, student should be able to:

Sessio
Course Learning Outcome *POs **CL ***KC
ns

Understand the fundamental concept Factual

CLO01 PO4, PO7, PO9, PO12 K2 18
of Web Development. Conceptual
CLO02 Understand the JavaScript advance
concepts, JQuery, AJAX and ReactJS to PO1, PO3, PO6, PO8, Conceptual
K3 32
develop web pages and retrieve data PO9, PO11 Procedural
from the server.
CLO03 Apply different attributes to change
PO1, PO2, PO5, PO7, Conceptual
the layout and position of elements on K3 30
PO10 Procedural
web pages.
CLO04 Analyse the dynamic changes and
responses using advanced web PO2, PO11, PO12 K4 Procedural 20
concepts.
CLO05 Design the minor project and generate Conceptual
PO3, PO4, PO5, PO10 K5 20
report using Front End Technologies. Procedural
Total Contact Hours 120

Front End Engineering-II /22CS014 Page 1 of 8

 Course Plan

Revised Bloom’s Taxonomy Terminology

* PO's available at (shorturl.at/cryzF)
**Cognitive Level =CL
***Knowledge Categories = KC

Course PO PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12
Learning 1
Outcomes
CLO01 M L H M
CLO02 L M H M M M
CLO03 M L L M H
CLO04 M L L
CLO05 M M H L
H=High, M=Medium, L=Low

3. ERISE Grid Mapping

Feature Enablement Level(1-5, 5 being highest)
Entrepreneurship 1
Research 3
Innovation 2
Skills 5
Employability 4

4. Recommended Books:

Text Books:
B01: Learning web designing: a beginner's guide to HTML, CSS, JavaScript, and graphics by Niederst Robbins,
Oreilly Publications, 2018.
BO2: Learning JavaScript by Shelley Powers, Oreilly Publications, 2006.
B03: Learning React: Functional Web Development with React and Redux, by Alex Banks, Eve Porcello,
Oreilly Publications, 2015.
Reference Books:
B04: Introduction to JavaScript Object Notation by Lindsay Bassett, Oreilly Publications, 2015.
B05: Node.js, MongoDB and Angular Web Development, 2nd Edition, Brad Dayley, Brendan Dayley, Caleb
Dayley, Oreilly Publications, 2017.
E-Resources:
https://library.chitkara.edu.in/subscribed-books.php

5. Other readings and relevant websites:

Serial No Link of Journals, Magazines, websites and Research Papers

1. https://www.w3schools.com/jquery/
2. https://www.javascript.com/
3. https://reactjs.org/
4. https://www.ics.uci.edu/~goodrich/teach/cs161/notes/

Front End Engineering-II /22CS014 Page 2 of 8

Course Plan

6. Recommended Tools and Platforms

React JS
Sublime Text/Notepad++/Visual Studio

7. Course Plan:

Lecture Number Topics Text Book

1 Detail Discussion of Course Handout (CHO)
Basics of Web, History of Web, How the web works? Client
2-3 Server Architecture, Front End vs Back End
BO1-Chapter-2
Recap HTML: HTML page structure, Basics HTML tags, Lists,
Hyperlinks, Semantic Tags, Block vs Inline Elements
Tables, Tags & attributes related to tables., Creating a Simple
form, Input Types, different attributes of form elements,
4-5 BO1-Chapter-2
Radio button, checkbox text area, select and button. Form
Attributes.
Recap CSS: Intro to CSS, Adding styles to HTML page,
6-7 Selectors, Box Model
BO1-Chapter-3
Flex and Grid, CSS Responsive Design - Viewport Meta Tags
and Media Queries
Recap Bootstrap: Intro to Bootstrap, Grid System, Breaking
8-9 BO1-Chapter-3
Points, Components, Modals, Nav & Navbar
Introduction to JavaScript, Browser Dev Tools, Inserting
JavaScript code in a webpage, Variables: var, let and const,
10-12 variable hoisting Data Types, Operators, Interaction: alert, BO1-Chapter-4
prompt and confirm.
Conditional Statements & Loops
Functions: Defining & Invoking a Function, Passing
13-14 Parameters, Spread Operator, Default value of a Parameter BO2-Chapter-4
Call-back Functions, Arrow Functions
String and its functions
15-16 Array: Declaring and Initializing arrays, Function of Arrays BO4-Chapter-7
Iterating over Arrays, Predefined Iterators (for Each, map, BO4-Chapter-8
filter, reduce)
Project Based Evaluation – 1 (Lecture number 1-16)
Object: Creating an object, Getting values from object,
BO4-Chapter-1
17-18 iterating over objects, Nested object, arrays and objects, using
BO2-Chapter-4
for in. Object Methods
What is JSON? Methods of JSON. Web Storage: Local Storage
and Session Storage
19-20 BO3-Chapter-5
DOM: Introduction to DOM, Accessing DOM, Fetching
Elements from web document, Modifying elements
21-22 Creating Elements, Adding/Appending Elements to the BO3-Chapter-5
document. Changing styles of elements BO2-Chapter-6
Event Handling Mouse and Keyboard Events, Form and
BO4-Chapter-7
23-24 Control Events. Introduction to Asynchronous Programming,
Event Loop Callbacks, setTimeout, setInterval
25-26 Promise, Promise Chaining, Error Handling with Promises,
BO4-Chapter-8
Async and Await, Ajax and Fetch
Git: Manage/Create GIT repository, Push & pull projects
27-28 BO3-Chapter-6
to/from remote repository.
Project Based Evaluation – 2 (Lecture number 17-28)

Front End Engineering-II /22CS014 Page 3 of 8

Course Plan

Introduction to React, VS Code and its environment, Webpack

and its Components BO3-Chapter-5
29-30
JSX Component driven approach, Class Component Vs BO3-Chapter-6
Function Component
Properties in Components, Passing values from one
31-32 BO2-Chapter-6
component to another
Event handling in components, List and keys State in class
33-34 BO3-Chapter-7
component, state management in class Component
NPM and router BO3-Chapter-11
35-37
React Forms BO3-Chapter-6
Component Life Cycle BO3-Chapter-7
38-40
Hooks: useState, userEffect, useContext and useReducer BO3-Chapter-12
Final Project Based Evaluation

8. Delivery/Instructional Resources

Lecture
Topics Web References Audio-Video
No.
Detail Discussion of Course Handout
1
(CHO)
Basics of Web, History of Web, How https://www.w3schools.com/ https://www.youtube.c
the web works? Client Server html/html_intro.asp om/watch?v=qz0aGYrrl
Architecture, Front End vs Back End hU
2-3 Recap HTML: HTML page structure,
Basics HTML tags, Lists, Hyperlinks,
Semantic Tags, Block vs Inline
Elements
Tables, Tags & attributes related to https://www.w3schools.com/ https://www.youtube.c
tables., Creating a Simple form, Input html/html_tables.asp om/watch?v=qz0aGYrrl
Types, different attributes of form hU
4-5
elements, Radio button, checkbox
text area, select and button. Form
Attributes.
Recap CSS: Intro to CSS, Adding styles https://www.w3schools.com/ https://www.youtube.c
to HTML page, Selectors, Box Model css/default.asp om/watch?v=qKoajPP
6-7 Flex and Grid, CSS Responsive Design Wpmo&list=PLr6-
- Viewport Meta Tags and Media GrHUlVf8JIgLcu3sHigvQ
Queries jTw_aC9C
https://www.w3schools.com/ https://www.youtube.c
Recap Bootstrap: Intro to Bootstrap, bootstrap/default.asp om/watch?v=v0IgI8vYD
8-9 Grid System, Breaking Points, _o&list=PL1MK7nFniZZ
Components, Modals, Nav & Navbar YRV5sign661Pq--
3DbF9Bn
Introduction to JavaScript, Browser https://www.w3schools.com/j https://www.udemy.co
Dev Tools, Inserting JavaScript code s/default.asp m/topic/javascript/free
in a webpage, Variables: var, let and /
10-12 const, variable hoisting Data Types,
Operators, Interaction: alert, prompt
and confirm.
Conditional Statements & Loops

Front End Engineering-II /22CS014 Page 4 of 8

Course Plan

Functions: Defining & Invoking a https://www.w3schools.com/j https://www.youtube.c

Function, Passing Parameters, Spread s/js_string_methods.asp om/watch?v=IWcUJLU
13-14 Operator, Default value of a AO2A
Parameter
Call-back Functions, Arrow Functions
String and its functions https://www.w3schools.com/j https://www.youtube.c
Array: Declaring and Initializing s/js_arrays.asp om/watch?v=a_Bz5ciB
arrays, Function of Arrays HQ0
15-16
Iterating over Arrays, Predefined
Iterators (for Each, map, filter,
reduce)
Object: Creating an object, Getting https://www.w3schools.com/j https://www.youtube.c
17-18 values from object, iterating over s/js_objects.asp om/watch?v=VfA5VxW
objects, Nested object, arrays and NkVo
objects, using for in. Object Methods
What is JSON? Methods of JSON. https://www.w3schools.com/j https://www.youtube.c
Web Storage: Local Storage and s/js_json.asp om/watch?v=cj3h3Fb1
Session Storage 0QY
19-20 DOM: Introduction to DOM,
Accessing DOM, Fetching Elements
from web document, Modifying
elements
Creating Elements, https://www.youtube.c
https://www.w3schools.com/
Adding/Appending Elements to the om/watch?v=cj3h3Fb1
21-22 html/html_form_elements.as
document. Changing styles of 0QY
p
elements
Event Handling Mouse and Keyboard https://www.youtube.c
https://www.w3schools.com/
Events, Form and Control Events. om/watch?v=cj3h3Fb1
23-24 html/html_form_elements.as
Introduction to Asynchronous 0QY
Programming, Event Loop Call-backs, p
setTimeout, setInterval
https://www.geeksforgeeks.o https://www.youtube.c
Promise, Promise Chaining, Error
rg/difference-between- om/watch?v=RPLt3TiH
25-26 Handling with Promises, Async and
promise-and-async-await-in- 6zg
Await, Ajax and Fetch
node-js/?ref=header_search
https://docs.github.com/en/g https://www.youtube.c
Git: Manage/Create GIT repository,
et-started/using-git/pushing- om/watch?v=3Jl3oQfZ
27-28 Push & pull projects to/from remote
commits-to-a-remote- HA4
repository.
repository
Introduction to React, VS Code and its https://code.visualstudio.com https://www.youtube.c
environment, Webpack and its /docs/nodejs/reactjs-tutorial om/watch?v=QFaFIcGh
Components PoM&list=PLC3y8-
29-30
JSX Component driven approach, rFHvwgg3vaYJgHGnMo
Class Component Vs Function dB54rxOk3
Component
https://code.visualstudio.com https://www.youtube.c
Properties in Components, Passing /docs/setup/additional- om/watch?v=QFaFIcGh
31-32 values from one component to components PoM&list=PLC3y8-
another rFHvwgg3vaYJgHGnMo
dB54rxOk3
Event handling in components, List https://www.w3schools.com/ https://www.youtube.c
and keys State in class component, react/react_class.asp om/watch?v=e2OLRdJK
33-34
state management in class nEg
Component

Front End Engineering-II /22CS014 Page 5 of 8

Course Plan

https://www.w3schools.com/ https://www.youtube.c
react/react_router.asp om/watch?v=1TKSmJd
NPM and router
35-37 hHlU&list=PL5X0rgxaTI
React Forms
uM1NAhVEBYYdnBXxm
37AJYw
Component Life Cycle https://www.w3schools.com/ https://www.youtube.c
38-40 Hooks: useState, userEffect, vue/vue_lifecycle-hooks.php om/watch?v=qnN_FuF
useContext and useReducer Nq2g

9. Lab Plan:

S. Lab Experiments Learning Resource

No. Number
1 1-2 Assignment on Book Review Blog https://www.w3schools.com/html/html
_intro.asp
2 3-5 Assignment on College Admission Form https://www.w3schools.com/html/html
_tables.asp
3 6-8 Assignment on Responsive Webpage using https://www.w3schools.com/bootstrap
Bootstrap /default.asp
4 9-12 Assignment on Chessboard https://www.w3schools.com/js/default.
asp
5 13-15 Assignment on Working with Functions https://www.w3schools.com/js/js_strin
g_methods.asp
6 16-18 Assignment on Create custom iterator. https://www.w3schools.com/js/js_array
s.asp
7 19-22 Assignment on Calculate Bill https://www.w3schools.com/js/js_obje
cts.asp
8 23-26 Assignment on Number Generator https://www.w3schools.com/html/html
_form_elements.asp
9 27-30 Assignment on To Do App https://www.w3schools.com/html/html
_form_elements.asp
10 31-36 Assignment on Discussion App https://www.geeksforgeeks.org/node-
js-event-loop/
11 37-39 Assignment on Stopwatch and Pomodoro https://www.geeksforgeeks.org/differe
Clock nce-between-promise-and-async-await-
in-node-js/?ref=header_search
12 40-42 Assignment on Compiling Coding Question https://www.geeksforgeeks.org/how-
with API to-fetch-data-from-json-file-and-
display-in-html-table-using-
jquery/?ref=header_search
13 43-44 Assignment on Display the list of users from https://code.visualstudio.com/docs/set
the array. up/additional-components
14 45-46 Assignment on Calculator using States https://www.w3schools.com/react/reac
t_class.asp
15 47-48 Assignment on Create dynamic route in react https://www.w3schools.com/react/reac
application and display the data based on the t_router.asp
url/parameter passed on the webpage
16 49-50 Assignment on Stopwatch (using class https://www.w3schools.com/vue/vue_li
component life cycle) fecycle-hooks.php

17 51-60 Final project

Front End Engineering-II /22CS014 Page 6 of 8

Course Plan

10. Action plan for different types of learners

Slow Learners Average Learners Fast Learners
 Remedial Classes on Saturdays  Workshops  Engaging students to hold hands of
 Encouragement for improvement  Formative Exercises used slow learners by creating a Peer
using Peer Tutoring to highlight concepts and Tutoring Group
 Use of Audio and Visual Materials notions  Design solutions for complex problems
 Use of Real-Life Examples  E-notes and E-exercises to  Design solutions for
read ahead of the complex problems
pedagogic material.  Presentation on topics beyond those
covered in CHO

11. Evaluation Scheme & Components:

Evaluation No. of Weightage of Mode of

Type of Component
Component Assessments Component Assessment
Component 2 Project Based Evaluation 02* 50% Offline
Component 3 Final Project Based Evaluation 01** 50% Offline
Total 100%
* Students will have to appear in all Project Based Evaluations.
**As per Academic Guidelines, a minimum of 75% attendance is required to become eligible for appearing in the Final Project Based
Evaluation.

12. Syllabus of the Course:

No. of Weightage
S. No. Topic (s)
Sessions %
1 Basics of Web, History of Web, How the web works? Client Server Architecture, 36 25%
Front End vs Back End
Recap HTML: HTML page structure, Basics HTML tags, Lists, Hyperlinks,
Semantic Tags, Block vs Inline Elements
Assignment: Book Review Blog
Tables, Tags & attributes related to tables., Creating a Simple form, Input
Types, different attributes of form elements, Radio button, checkbox text area,
select and button. Form Attributes.
Assignment: College Admission Form
Recap CSS: Intro to CSS, Adding styles to HTML page, Selectors, Box Model
Flex and Grid, CSS Responsive Design - Viewport Meta Tags and Media Queries
Recap Bootstrap: Intro to Bootstrap, Grid System, Breaking Points,
Components, Modals, Nav & Navbar
Assignment: Responsive Webpage using Bootstrap
Introduction to JavaScript, Browser Dev Tools, Inserting JavaScript code in a
webpage, Variables: var, let and const, variable hoisting Data Types,
Operators, Interaction: alert, prompt and confirm.
Conditional Statements & Loops
Assignment: Chessboard
Functions: Defining & Invoking a Function, Passing Parameters, Spread
Operator, Default value of a Parameter
Call-back Functions, Arrow Functions
Assignment: Working with Functions
String and its functions
Array: Declaring and Initializing arrays, Function of Arrays
Iterating over Arrays, Predefined Iterators (forEach, map, filter, reduce)

Front End Engineering-II /22CS014 Page 7 of 8

Course Plan

Assignment: Create custom iterator.

Project Based Evaluation - 1
2 Object: Creating an object, Getting values from object, iterating over objects, 36 25%
Nested object, arrays and obects, using for in. Object Methods
Assignment: Calculate Bill
What is JSON? Methods of JSON. WebStorage: Local Storage and Session
Storage
DOM: Introduction to DOM, Accessing DOM, Fetching Elements from web
document, Modifying elements
Creating Elements, Adding/Appending Elements to the document.
Assignment: Number Generator
Changing styles of elements, Event Handling
Mouse and Keyboard Events, Form and Control Events.
Assignment: ToDo App
Introduction to Asynchronous Programming, Event Loop
Callbacks, setTimeout, setInterval
Assignment: Discussion App
Promise, Promise Chaining, Error Handling with Promises, Async and Await
Assignment: Stopwatch and Pomodoro Clock
Ajax and Fetch
Assignment: Compiling Coding Question with API
Git: Manage/Create GIT repository, Push & pull projects to/from remote
repository.
Project Based Evaluation - 2
3 Introduction to React, VS Code and its environment, Webpack and its 28 50%
Components
JSX Component driven approach, Class Component Vs Function Component
Assignment: Display the list of users from the array.
Properties in Components, Passing values from one component to another
Event handling in components, List and keys
State in class component, state management in class Component
Assignment: Calculator using States
NPM and router
React Forms
Assignment: Create dynamic route in react application and display the data
based on the url/parameter passed on the webpage
Component Life Cycle
Hooks: useState, userEffect, useContext and useReducer
Assignment: Stopwatch (using class component life cycle)
Final Project Based Evaluation

This Document is approved by:

Designation Name Signature

Course Coordinator Dr. Kiran Deep Singh
Head-Academic Delivery Dr. Mrinal Paliwal
Dean Dr. Rishu Chhabra
Dean Academics Dr. Monit Kapoor
Date 26.06.2024

Front End Engineering-II /22CS014 Page 8 of 8