CAP756: WEB

TECHNOLOGIES

LECTURE #0

LOVELY PROFESSIONAL UNIVERSITY 1

 Objective of the course

CO1 :: Remember the latest HTML5 and CSS3 to add unique styling to Bootstrap

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

LOVELY PROFESSIONAL UNIVERSITY 2

 Programme Outcomes / Salient
Features
•PO1 : Computational Knowledge : Apply knowledge of computing fundamentals, computing specialisation,
mathematics, and domain knowledge appropriate for the computing specialisation to the abstraction and
conceptualisation of computing models from defined problems and requirements.
•PO2 : Problem Analysis : Identify, formulate, research literature, and solve complex computing problems
reaching substantiated conclusions using fundamental principles of mathematics, computing sciences, and
relevant domain disciplines.
•PO3 : Design /Development of Solutions : Design and evaluate solutions for complex computing problems,
and design and evaluate systems, components, or processes that meet specified needs with appropriate
consideration for public health and safety, cultural, societal, and environmental considerations.
•PO4 : Conduct Investigations of Complex computing Problems : Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of data, and synthesis of t h e
information to provide valid conclusions. Understand and commit to professional ethics and cyber
regulations, responsibilities, and norms of professional computing practice.
•PO5 : Modern Tool Usage : Create, select, adapt and apply appropriate techniques, resources, and modern
computing tools to complex computing activities, with an understanding of the limitations.
•PO6 : Professional Ethics : Understand and commit to professional ethics and cyber regulations,
responsibilities, and norms of professional computing practice

LOVELY PROFESSIONAL UNIVERSITY 3

 Cont…
•PO7 : Life-long Learning : Recognise the need, and have the ability, to engage in independent learning
for continual development as a computing professional.
•PO8 : Project management and finance : Demonstrate knowledge and understanding of the computing
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.
•PO9 : Communication Efficacy : Communicate effectively with the computing community, and with
society at large, about complex computing activities by being able to comprehend and write effective
reports, design documentation, make effective presentations, and give and understand clear instructions
•PO10 : Societal and Environmental Concern : Understand and assess societal, environmental, health,
safety, legal, and cultural issues within local and global contexts, and the consequential responsibilities
relevant to professional computing practice.
•PO11 : Individual and Team Work : Function effectively as an individual and as a member or leader in
diverse teams and in multidisciplinary environments.
•PO12 : Innovation and Entrepreneurship : Identify a timely opportunity and using innovation to pursue
that opportunity to create value and wealth for the betterment of the individual and society at large.

LOVELY PROFESSIONAL UNIVERSITY 4

Programme Specific Outcomes

•PSO1 : Understand and comprehend advanced level of programming, data

structures, databases, networking, cloud computing, cyber security, machine
learning and data analysis.
•PSO2 : Demonstrate competence in using computer science concepts and
computational tools for simulation and digital transformation.
•PSO3 : Ability to effectively apply the information technology concepts to
analyze, design and develop cost effective solutions to the societal problems.
•PSO4 : Provide user friendly and need based mobile, web or cloud-based
solutions to the society

LOVELY PROFESSIONAL UNIVERSITY 5

 Syllabus
Unit 1 : HTML
 Basic tags
 Images and attributes
 Lists,
 Block level- inline elements
 Tables
 Forms
Unit 2: CSS
 introduction to css
 css basics, css colors, background and border, selector,
 Text and font, debugging in css, box model, css position, css float,
 Display property, media queries,
 Flexbox introduction, flexbox properties, introduction about Grid

LOVELY PROFESSIONAL UNIVERSITY 6

 Syllabus
Unit 3: Bootstrap
 What is bootstrap?, including bootstrap in project,
 Web design, nav bar, grid system, header section,
 Css file, font and feature section,
 Bootstrap modals, bootstrap card, carousel,
 CSS z- index, image gallery, forms

LOVELY PROFESSIONAL UNIVERSITY 7

 Syllabus
Unit 5 : Pure React
 Page setup, The virtual DOM, react elements,
 React DOM, children, constructing elements with data
 React components, DOM rendering, factories

React with JSX :

 React elements as JSX,
 Babel, recipes as JSX
 Introduction to webpack

LOVELY PROFESSIONAL UNIVERSITY 8

 Syllabus
Unit 6
 Props, State, and the Component Tree property validation
 Refs, react state management,
 State within the component tree

React Router and Server :

 Incorporating the router
 Router parameters,
 Server rendering,
 Communication with the server

LOVELY PROFESSIONAL UNIVERSITY 9

 Course Related Information
L T P = 3 0 0 Credit= 3.0
i.e. 3 hours of lecture per week for 14 weeks.
 Exam Criteria
 3 Academic Task (Best 2 counted) (30 marks each)

(4th , 6th and 12th week).

 ETP (Refer academic Calendar )

LOVELY PROFESSIONAL UNIVERSITY 10

 Course Related Information
 Distribution of marks
 Attendance 05marks
 Continuous Assessment 25 marks

 MTE 20
 End term Practical 50 marks

LOVELY PROFESSIONAL UNIVERSITY 11

 Course Related Information

What is the course subject code?

A) CAP755
B) CAP756
C) CAP754
D) CAP757

LOVELY PROFESSIONAL UNIVERSITY 12

 Course Related Information

What are the opportunities in web development?

Web Development Career Options
• Front-end developer.
• Full-stack engineer.
• Back-end developer.
• Software engineer.
• Senior web developer.

LOVELY PROFESSIONAL UNIVERSITY 13

 Text Books and Reference Books

Text Book
1. HTML & CSS: THE COMPLETE REFERENCE by THOMAS A POWELL, Mc Graw Hill
Education
 

LOVELY PROFESSIONAL UNIVERSITY 14

Text Books and Reference Books

Text Book
LEARNING REACT: MODERN PATTERNS FOR DEVELOPING REACT APPS by
ALEX BANKS, EVE PORCELLO, O’REILLY

LOVELY PROFESSIONAL UNIVERSITY 15

Text Books and Reference Books

Reference Book
o WEB ENABLED COMMERCIAL APPLICATION DEVELOPMENT USING HTML, JAVASCRIPT, DHTML
AND PHP by IVAN BAYROSS, BPB PUBLICATIONS

◦ ADVANCED WEB DEVELOPMENT WITH REACT by MEHUL MOHAN, BPB PUBLICATIONS

◦ LEARNING REACT NATIVE: BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT by

BONNIE EISENMAN, O'REILLY

LOVELY PROFESSIONAL UNIVERSITY 16

Week 1
Lecture 1 HTML(basic tags)
Lecture 2 HTML(images and attributes)
Lecture 3 HTML(lists)

LOVELY PROFESSIONAL UNIVERSITY 17

Week 2
Lecture 4 HTML(block level- inline elements)
Lecture 5 HTML(tables)
Lecture 6 HTML(forms)

LOVELY PROFESSIONAL UNIVERSITY 18

Week 3

Lecture 7 CSS(intro to css) ,CSS(css basics),CSS(selector)

Lecture 8 CSS(css colors),CSS(background and border),CSS(text and font)
Lecture 9 CSS(debugging in css) ,CSS(box model),CSS(css position)

LOVELY PROFESSIONAL UNIVERSITY 19

Week 4
Lecture 10 CSS(css float) CSS(display property) CSS(media queries)
Lecture 11 CSS(flexbox introduction) CSS(flexbox properties)

LOVELY PROFESSIONAL UNIVERSITY 20

Week 5
Lecture 13 Bootstrap(what is bootstrap?)
Lecture 14 Bootstrap(including bootstrap in project)
Lecture 15 Bootstrap(web design) Bootstrap(nav bar)

LOVELY PROFESSIONAL UNIVERSITY 21

Week 6
Lecture 16 Bootstrap(grid system)
Lecture 16 Bootstrap(header section)
Lecture 17 Bootstrap(css file) Bootstrap(font and feature section)
Lecture 18 Bootstrap(bootstrap modals) Bootstrap(bootstrap card) Bootstrap(carousel)

LOVELY PROFESSIONAL UNIVERSITY 22

Week 7
Lecture 19 Bootstrap(css z-index) Bootstrap(image gallery) Bootstrap(forms)

MID-TERM

LOVELY PROFESSIONAL UNIVERSITY 23

Week 8
Lecture 22 Basics of React(obstacles and roadblocks) Basics of React(react’s future)
Lecture 22 Basics of React(keeping up with the changes) Basics of React(working with the files
Lecture 23 Functional Programming with JavaScript(declaring variables in es6) Functional
Programming with JavaScript(arrow functions) Functional Programming with
JavaScript(transpiling es6) Functional Programming with JavaScript(es6 objects and arrays
Lecture 24 Functional Programming with JavaScript(promises) Functional Programming with
JavaScript(classes)

LOVELY PROFESSIONAL UNIVERSITY 24

Week 9
Lecture 25 Functional Programming with JavaScript(es6 modules) Functional Programming with
JavaScript(commonjs)
Lecture 26 Functional Programming with JavaScript(what it means to be functional) Functional
Programming with JavaScript(imperative versus declarative) Functional Programming with
JavaScript(functional concepts)

LOVELY PROFESSIONAL UNIVERSITY 25

Week 10
Lecture 28 Pure React(page setup) Pure React(the virtual DOM
Lecture 29 Pure React(react elements) Pure React(react DOM) Pure React(children)
Lecture 30 Pure React(constructing elements with data) Pure React(react components)

LOVELY PROFESSIONAL UNIVERSITY 26

Week 11
Lecture 31 Pure React(DOM rendering) Pure React(factories)
Lecture 32 React with JSX(react elements as JSX) React with JSX(babel)

LOVELY PROFESSIONAL UNIVERSITY 27

Week 12
Lecture 34 React with JSX(recipes as JSX) React with JSX(intro to webpack.)
Lecture 35 Props, State, and the Component Tree(property validation)
Lecture 36 Props, State, and the Component Tree(refs) Props, State, and the Component
Tree(react state management)

LOVELY PROFESSIONAL UNIVERSITY 28

Week 13
Lecture 37 Props, State, and the Component Tree(refs) Props, State, and the Component
Tree(react state management)
Lecture 38 React Router and Server (incorporating the router) React Router and Server (router
parameters)
Lecture 39 React Router and Server (incorporating the router) React Router and Server (router
parameters)

LOVELY PROFESSIONAL UNIVERSITY 29

Week 14
Lecture 40 React Router and Server (server rendering) React Router and Server (communication
with the server)

LOVELY PROFESSIONAL UNIVERSITY 30

LOVELY PROFESSIONAL UNIVERSITY 31