Lovely Professional University, Punjab

Course Code Course Title Lectures Tutorials Practicals Credits Course Planner
CAP553 WEB TECHNOLOGIES 2 0 2 3 28633::Dr. Bilal Ahmed
Course Weightage ATT: 5 CAP: 45 ETP: 50

Course Outcomes :Through this course students should be able to

CO1 :: remember the latest HTML5, CSS3 and Bootstrap concepts

CO2 :: understand the components, props, states and component life cycle methods in React JS
CO3 :: apply the single page applications with React JS
CO4 :: analyze the web pages with Grid CSS and Flexbox features
CO5 :: evaluate the reusable React components

TextBooks ( T )
Sr No Title Author Publisher Name
T-1 HTML & CSS: THE COMPLETE THOMAS A POWELL MC GRAW HILL
REFERENCE
T-2 LEARNING REACT: MODERN ALEX BANKS, EVE O Reilly Publishing
PATTERNS FOR DEVELOPING PORCELLO
REACT APPS
Reference Books ( R )
Sr No Title Author Publisher Name
R-1 WEB ENABLED COMMERCIAL IVAN BAYROSS BPB PUBLICATIONS
APPLICATION DEVELOPMENT
USING HTML, JAVASCRIPT,
DHTML AND PHP
R-2 ADVANCED WEB MEHUL MOHAN BPB PUBLICATIONS
DEVELOPMENT WITH REACT
R-3 LEARNING REACT NATIVE: BONNIE EISENMAN O Reilly Publishing
BUILDING NATIVE MOBILE APPS
WITH JAVASCRIPT

Relevant Websites ( RW )
Sr No (Web address) (only if relevant to the course) Salient Features
RW-1 https://react.dev/ This is the Official website of ReactJS

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
 RW-2 https://getbootstrap.com/ This is the Official website of Bootstrap

RW-3 https://www.w3schools.com/react This is the tutorial for ReactJS

Audio Visual Aids ( AV )

Sr No (AV aids) (only if relevant to the course) Salient Features
AV-1 https://www.udemy.com/share/103Lgg2@FEdgfUtjWlQIe0ZKAntyQD5uSlRhYFo Full Stack Web Development HTML, CSS, Bootstrap and React JS

Software/Equipments/Databases
Sr No (S/E/D) (only if relevant to the course) Salient Features
SW-1 HTML, CSS, JavaScript, Bootstrap, React This is the set of software to be used for this Course

LTP week distribution: (LTP Weeks)

Weeks before MTE 7
Weeks After MTE 7
Spill Over (Lecture) 4

Detailed Plan For Lectures

Week Lecture Broad Topic(Sub Topic) Chapters/Sections of Other Readings, Lecture Description Learning Outcomes Pedagogical Tool Live Examples
Number Number Text/reference Relevant Websites, Demonstration/
books Audio Visual Aids, Case Study /
software and Virtual Images /
Labs animation / ppt
etc. Planned
Week 1 Lecture 1 HTML(basic tags) T-1 SW-1 Lecture-0 basic tags Student will be aware White board+
AV-1 of the Course plan Marker, PPT,
and basic HTML tags Demonstration
Lecture 2 HTML(images and T-1 img tag and its Student will learn the White board+
attributes) attributes, image map implementation of Marker, PPT,
images in the HTML Demonstration
web pages
Week 2 Lecture 3 HTML(lists) T-1 Implementation of Student will learn to White board+
ordered lists, unordered implement the lists Marker, PPT,
lists, description lists and their attributes Demonstration
and nested lists
Lecture 4 HTML(block level- inline T-1 web elements, tables, Student will learn White board+
elements) nested tables about different web Marker, PPT,
enabled elements and Demonstration
tables in HTML

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
Week 3 Lecture 5 HTML(tables) T-1 web elements, tables, Student will learn White board+
R-1 nested tables about different web Marker, PPT,
enabled elements and Demonstration
tables in HTML
Lecture 6 HTML(forms) T-1 Forms, form input types, Student will learn to White board+
R-1 action and methods accept the user input Marker, PPT,
using HTML forms Demonstration
Week 4 Lecture 7 CSS(intro to css) T-1 Introduction to basics Students will learn White board+
R-1 and syntax of CSS the importance and Marker, PPT,
working of CSS in Demonstration
web development
CSS(css basics) T-1 Introduction to basics Students will learn White board+
R-1 and syntax of CSS the importance and Marker, PPT,
working of CSS in Demonstration
web development
CSS(selector) T-1 Introduction to basics Students will learn White board+
R-1 and syntax of CSS the importance and Marker, PPT,
working of CSS in Demonstration
web development
Lecture 8 CSS(css colors) T-1 Implementation of color, Student will learn the White board+
R-1 border, background and use of color, text and Marker, PPT,
font properties of CSS other properties of Demonstration
CSS
CSS(background and T-1 Implementation of color, Student will learn the White board+
border) R-1 border, background and use of color, text and Marker, PPT,
font properties of CSS other properties of Demonstration
CSS
CSS(text and font) T-1 Implementation of color, Student will learn the White board+
R-1 border, background and use of color, text and Marker, PPT,
font properties of CSS other properties of Demonstration
CSS
Week 5 Lecture 9 CSS(box model) T-1 Implementation of CSS students will learn to White board+
R-1 position, flexbox, media apply CSS position, Marker, PPT,
queries and grid flexbox, media Demonstration
queries and grid
CSS(css position) T-1 Implementation of CSS students will learn to White board+
R-1 position, flexbox, media apply CSS position, Marker, PPT,
queries and grid flexbox, media Demonstration
queries and grid
CSS(css float) T-1 Implementation of CSS students will learn to White board+
R-1 position, flexbox, media apply CSS position, Marker, PPT,
queries and grid flexbox, media Demonstration
queries and grid
CSS(display property) T-1 Implementation of CSS students will learn to White board+
R-1 position, flexbox, media apply CSS position, Marker, PPT,
queries and grid flexbox, media Demonstration
queries and grid

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
Week 5 Lecture 9 CSS(media queries) T-1 Implementation of CSS students will learn to White board+
R-1 position, flexbox, media apply CSS position, Marker, PPT,
queries and grid flexbox, media Demonstration
queries and grid
CSS(flexbox and its T-1 Implementation of CSS students will learn to White board+
properties) R-1 position, flexbox, media apply CSS position, Marker, PPT,
queries and grid flexbox, media Demonstration
queries and grid
CSS(CSS grid) T-1 Implementation of CSS students will learn to White board+
R-1 position, flexbox, media apply CSS position, Marker, PPT,
queries and grid flexbox, media Demonstration
queries and grid
Lecture 10 BYOD-Practical 1
Week 6 Lecture 11 Bootstrap(what is T-1 RW-2 Introduction to Students will learn White board+
bootstrap?) bootstrap, bootstap grid, the basics of Marker, PPT,
association of bootstrap bootstrap Demonstration
in project,
Bootstrap(including T-1 Introduction to Students will learn White board+
bootstrap in project) bootstrap, bootstap grid, the basics of Marker, PPT,
association of bootstrap bootstrap Demonstration
in project,
Bootstrap(web design) T-1 Introduction to Students will learn White board+
bootstrap, bootstap grid, the basics of Marker, PPT,
association of bootstrap bootstrap Demonstration
in project,
Bootstrap(grid system) T-1 Introduction to Students will learn White board+
bootstrap, bootstap grid, the basics of Marker, PPT,
association of bootstrap bootstrap Demonstration
in project,
Bootstrap(header section) T-1 Introduction to Students will learn White board+
bootstrap, bootstap grid, the basics of Marker, PPT,
association of bootstrap bootstrap Demonstration
in project,
Bootstrap(font and feature T-1 Introduction to Students will learn White board+
section) bootstrap, bootstap grid, the basics of Marker, PPT,
association of bootstrap bootstrap Demonstration
in project,
Lecture 12 Bootstrap(bootstrap modals) T-1 Implementation of Students will learn to White board+
R-1 Modals and Cards create attractive cards Marker, PPT,
and Modals Demonstration
Bootstrap(bootstrap card) T-1 Implementation of Students will learn to White board+
R-1 Modals and Cards create attractive cards Marker, PPT,
and Modals Demonstration
Bootstrap(css z- index) T-1 Implementation of Students will learn to White board+
R-1 Modals and Cards create attractive cards Marker, PPT,
and Modals Demonstration

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
Week 7 Lecture 13 Bootstrap(carousel) T-1 bootstrap carousel, students will learn to White board+
R-1 image gallery, forms create attractive Marker, PPT,
carousel, forms, and Demonstration
image gallery
Bootstrap(image gallery) T-1 bootstrap carousel, students will learn to White board+
R-1 image gallery, forms create attractive Marker, PPT,
carousel, forms, and Demonstration
image gallery
Bootstrap(forms) T-1 bootstrap carousel, students will learn to White board+
R-1 image gallery, forms create attractive Marker, PPT,
carousel, forms, and Demonstration
image gallery

SPILL OVER
Week 7 Lecture 14 Spill Over

MID-TERM
Week 8 Lecture 15 Basics of React(obstacles T-2 Introductory concepts Students will learn White board+
and roadblocks) R-2 of the basics of ReactJS Marker, PPT,
R-3 ReactJS Demonstration

Basics of React(react's T-2 Introductory concepts Students will learn White board+
future) R-2 of the basics of ReactJS Marker, PPT,
R-3 ReactJS Demonstration

Basics of React(keeping up T-2 Introductory concepts Students will learn White board+
with the changes) R-2 of the basics of ReactJS Marker, PPT,
R-3 ReactJS Demonstration

Basics of React(working T-2 RW-1 Introductory concepts Students will learn White board+
with the files) R-2 RW-3 of the basics of ReactJS Marker, PPT,
R-3 ReactJS Demonstration

Lecture 16 Functional Programming T-2 Introduction to the Students will learn White board+
with JavaScript(declaring R-2 concepts of variables, the use of variables, Marker, PPT,
variables in es6) R-3 arrow functions and ES6 arrow functions and Demonstration
ES6
Functional Programming T-2 Introduction to the Students will learn White board+
with JavaScript(arrow R-2 concepts of variables, the use of variables, Marker, PPT,
functions) R-3 arrow functions and ES6 arrow functions and Demonstration
ES6
Functional Programming T-2 Introduction to the Students will learn White board+
with JavaScript(transpiling) R-2 concepts of variables, the use of variables, Marker, PPT,
R-3 arrow functions and ES6 arrow functions and Demonstration
ES6

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
Week 8 Lecture 16 Functional Programming T-2 Introduction to the Students will learn White board+
with JavaScript(es6 objects R-2 concepts of variables, the use of variables, Marker, PPT,
and arrays) R-3 arrow functions and ES6 arrow functions and Demonstration
ES6
Week 9 Lecture 17 Functional Programming T-2 Introduction to the Students will learn to White board+
with JavaScript(promises) R-2 concepts of promises implement the classes Marker, PPT,
R-3 and classes. and promises in Demonstration
ReactJS
Functional Programming T-2 Introduction to the Students will learn to White board+
with JavaScript(classes) R-2 concepts of promises implement the classes Marker, PPT,
R-3 and classes. and promises in Demonstration
ReactJS
Lecture 18 Functional Programming T-2 Introduction to ES6 Students will learn to White board+
with JavaScript(es6 R-2 modules and commonjs implement ES6 and Marker, PPT,
modules) R-3 CommonJS Demonstration

Functional Programming T-2 Introduction to ES6 Students will learn to White board+
with JavaScript(common js) R-2 modules and commonjs implement ES6 and Marker, PPT,
R-3 CommonJS Demonstration

Week 10 Lecture 19 Functional Programming T-2 Introduction to Student will learn to White board+
with JavaScript(what it R-2 functional behaviour and make the projects Marker, PPT,
means to be functional) R-3 functional and Demonstration
its types implement imperative
and declarative
functions
Functional Programming T-2 Introduction to Student will learn to White board+
with JavaScript(imperative R-2 functional behaviour and make the projects Marker, PPT,
versus declarative) R-3 functional and Demonstration
its types implement imperative
and declarative
functions
Functional Programming T-2 Introduction to Student will learn to White board+
with JavaScript(functional R-2 functional behaviour and make the projects Marker, PPT,
concepts) R-3 functional and Demonstration
its types implement imperative
and declarative
functions
Lecture 20 BYOD-Practical 2
Week 11 Lecture 21 Pure React(page setup) T-2 Setting up the pages and Student will learn the White board+
R-2 use of virtual DOM, implementation of Marker, PPT,
R-3 react page setups and Demonstration
elements, DOM and virtual DOM, react
their hierarchy element

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
Week 11 Lecture 21 Pure React(the virtual T-2 Setting up the pages and Student will learn the White board+
DOM) R-2 use of virtual DOM, implementation of Marker, PPT,
R-3 react page setups and Demonstration
elements, DOM and virtual DOM, react
their hierarchy element
Pure React(react elements) T-2 Setting up the pages and Student will learn the White board+
R-2 use of virtual DOM, implementation of Marker, PPT,
R-3 react page setups and Demonstration
elements, DOM and virtual DOM, react
their hierarchy element
Pure React(react DOM) T-2 Setting up the pages and Student will learn the White board+
R-2 use of virtual DOM, implementation of Marker, PPT,
R-3 react page setups and Demonstration
elements, DOM and virtual DOM, react
their hierarchy element
Lecture 22 Pure React(children) T-2 Constructing react data Students will learn to White board+
R-2 elements and rendering construct the react Marker, PPT,
R-3 data elements, Demonstration
components and
factories
Pure React(constructing T-2 Constructing react data Students will learn to White board+
elements with data) R-2 elements and rendering construct the react Marker, PPT,
R-3 data elements, Demonstration
components and
factories
Pure React(react T-2 Constructing react data Students will learn to White board+
components) R-2 elements and rendering construct the react Marker, PPT,
R-3 data elements, Demonstration
components and
factories
Pure React(DOM rendering) T-2 Constructing react data Students will learn to White board+
R-2 elements and rendering construct the react Marker, PPT,
R-3 data elements, Demonstration
components and
factories
Pure React(factories) T-2 Constructing react data Students will learn to White board+
R-2 elements and rendering construct the react Marker, PPT,
R-3 data elements, Demonstration
components and
factories
Week 12 Lecture 23 React with JSX(react T-2 Use of react JSX Student will learn White board+
elements as JSX) R-2 elements, babel and about react JSX Marker, PPT,
R-3 webpack elements, babel and Demonstration
webpack

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
Week 12 Lecture 23 React with JSX(babel) T-2 Use of react JSX Student will learn White board+
R-2 elements, babel and about react JSX Marker, PPT,
R-3 webpack elements, babel and Demonstration
webpack
React with JSX(intro to T-2 Use of react JSX Student will learn White board+
webpack) R-2 elements, babel and about react JSX Marker, PPT,
R-3 webpack elements, babel and Demonstration
webpack
Lecture 24 Props, State, and the T-2 Implementation of Student will learn to White board+
Component Tree(property R-2 property validation and implement the Marker, PPT,
validation) R-3 refs property validation Demonstration
and refs
Props, State, and the T-2 Implementation of Student will learn to White board+
Component Tree(refs) R-2 property validation and implement the Marker, PPT,
R-3 refs property validation Demonstration
and refs
Week 13 Lecture 25 Props, State, and the T-2 Implementation of state Students will learn to White board+
Component Tree(react state R-3 management implement the state Marker, PPT,
management) management Demonstration
Props, State, and the T-2 Implementation of state Students will learn to White board+
Component Tree(state R-3 management implement the state Marker, PPT,
within the component tree) management Demonstration
Lecture 26 React Router and Server T-2 Implementation of the Students will learn to White board+
(incorporating the router) R-2 concept of routing implement the Marker, PPT,
R-3 routing and its Demonstration
parameters
React Router and Server T-2 Implementation of the Students will learn to White board+
(router parameters) R-2 concept of routing implement the Marker, PPT,
R-3 routing and its Demonstration
parameters
React Router and Server T-2 Implementation of the Students will learn to White board+
(server rendering) R-2 concept of routing implement the Marker, PPT,
R-3 routing and its Demonstration
parameters
React Router and Server T-2 Implementation of the Students will learn to White board+
(communication with the R-2 concept of routing implement the Marker, PPT,
server) R-3 routing and its Demonstration
parameters
Week 14 Lecture 27 BYOD-Practical 3

SPILL OVER
Week 14 Lecture 28 Spill Over
Week 15 Lecture 29 Spill Over
Lecture 30 Spill Over

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
 Scheme for CA:

CA Category of this Course Code is:A0303 (3 out of 3)

Component Weightage (%) Mapped CO(s)

BYOD-Practical 2 33.33 CO1, CO4
BYOD-Practical 1 33.33 CO1
BYOD-Practical 3 33.33 CO2, CO3, CO5

Details of Academic Task(s)

Academic Task Objective Detail of Academic Task Nature of Academic Academic Task Marks Allottment /
Task Mode submission
(group/individuals) Week
BYOD-Practical 1 Students will learn Students will be assigned project title to work on. Individual Online 50 6/6
to apply HTML and
CSS to develop web
sites
BYOD-Practical 2 Students will learn Student will improve the project by applying bootstrap concepts Individual Online 50 9/9
to apply Bootstrap to
develop aesthetic
web pages
BYOD-Practical 3 Students will learn Students will be able to apply React concept to improve their Individual Online 50 12 / 12
to apply React JS project web sites as React based website
concepts

Detailed Plan For Practicals

Practical No Broad topic Subtopic Other Readings Learning Outcomes

Practical 1 Practicals / Experiments Develop web pages using html5 RW-3 Student will use HTML5 elements to create web
elements SW-1 pages
AV-1

Practical 2 Practicals / Experiments Apply various CSS properties to RW-3 Student will be able to apply CSS properties to
develop aesthetic web pages SW-1 develop aesthetic web pages
AV-1

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.
Practical 3 Practicals / Experiments Develop flexible and responsive web SW-1 Students will be able to apply responsiveness to
pages using Flexbox AV-1 web pages using Flexbox

Practical 4 Practicals / Experiments Use media queries to apply CSS styles SW-1 Students will be able to apply media queries for
depending on a device's media type AV-1 different device's media type

Practical 5 Practicals / Experiments Create web page layout design using SW-1 Student will learn to develop web page layouts
CSS Grid AV-1 using CSS Grid system

Practical 6 Practicals / Experiments Apply Bootstrap classes to decorate RW-2 Students will be able to apply bootstrap and its
html elements. SW-1 classes to decorate elements
AV-1

Practical 7 Practicals / Experiments Develop attractive web pages using RW-2 Students will be able to create bootstrap card,
bootstrap card, carousel, nav bar, SW-1 carousel, nav bar, image gallery, form and Modal.
image gallery, form and Modal AV-1

Practical 8 Practicals / Experiments Create the setup for react application RW-3 Students will learn to create a react application.
and render “hello word” SW-1
AV-1

Practical 9 Practicals / Experiments Create Function and Class RW-3 Student will be able to develop class and functional
components in react SW-1 components in react
AV-1

Practical 10 Practicals / Experiments Use props, states, hooks, and routing RW-3 Students will learn to implement various advance
to develop a react application SW-1 react concepts such as props, states and routing.
AV-1

SPILL OVER
Practical 11 Spill Over

An instruction plan is only a tentative plan. The teacher may make some changes in his/her teaching plan. The students are advised to use syllabus for preparation of all examinations. The students are expected to keep themselves
updated on the contemporary issues related to the course. Upto 20% of the questions in any examination/Academic tasks can be asked from such issues even if not explicitly mentioned in the instruction plan.