Teaching Guidelines for

Web Programming Technologies

PG-DAC March 2023

Duration: 112 hours (50 theory hours + 50 lab hours + 12 revision/practice hours)

Objective: To introduce the students to HTML, CSS, JavaScript, XML, JSON, Ajax, Node.js, Express.js,
React, React-Redux, and practical relevance of all these technologies.

Evaluation: 100 marks

Weightage: Theory Exam – 40%,, Lab exam – 40%, Internals – 20%

Text Books:
 Fundamentals
damentals of Web Development, 11e, e, by Randy Connolly, Ricardo Hoar / Pearson
 MERN Quick Start Guide – Build web applications with MongoDB, Express.js, React, and Node by
Eddy Wilson Iriarte Koroliova / Packt

References:
 Internet & World Wide Web : How to Program by Paul Deitel, Henry Deitel & Abbey Deitel /
Pearson Education
 XML - How to Program by Deitel et al / Pearson Education
 Ajax in
n Action by Dave Crane, Eric Pascarello / Dreamtech Press
 JavaScript: The Good Parts by Douglas Crockford / O'Reilly
 Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node by
Vasan Subramanian / Apress
 Web Application Security: A Beginner's Guide by Bryan Sullivan & Vincent Liu / Tata McGraw Hill
 W3Schools Tutorials [ https://www.w3schools.com/ ]
 Mozilla Developer Network Web Development Tutorials [ https://developer.mozilla.org/en-
https://developer.mozilla.org/en
US/docs/Learn/Getting_started_with_the_web ]
 Curated Tutorial Links
inks on ES6, React, etc. [ https://github.com/markerikson/react-redux-links
https://github.com/markerikson/react ]

(Note: Each Session is of 2 hours)

Session 1: Architecture of Web

Lecture:
 Brief history of the Internet
 How does the Internet
nternet work?
 Internet Protocol; HTTP
 Domain Names;
ames; Domain Name Service servers
 HTTP Protocols
o Difference between HTTP 1.0, HTTP 1.1, and HTTP 2.0
o Methods – GET, POST, HEAD, PUT, DELETE
DELETE, etc.
o Status codes
o Stateless nature of the protocol and HTTP Session
o HTTPS
 Architecture of the Web
 Web servers – IIS, Apache server
Lab:
 Exploring different browser
rowsers
o Mozilla Firefox, Google Chrome, Safari
 Exploring different text editor
ditors
o Windows: Notepad++
Notepad++, Linux: Gedit or Vim or Emacs

Session 2: HTML
Lecture:
 Introduction to HTML5
 Introduction to basic HTML Tags
o Alignment, Headings,, Anchor, Paragraph, Image, Lists, Tables, and iFrames
rames
 HTML5
o New features in HTML5
o New elements, newew attribute
attributes, link relations, microdata, ARIA accessibility,
accessibility objects,
events, and Canvas tags
o HTML5 Validation
o Audio & Video Support
o Geo-location
location Support
 HTML Forms & Controls
o Input, Text Area, Radio Button
Button, Checkbox, Dropdown, Submit, Reset,, Button, etc.
 Introduction to Document Object Model (DOM)
Lab:
 Create a HTML form for building your resume.

Session 3: Cascading Style Sheets (CSS)

Lecture:
 Introduction to CSS, Styling HTML with CSSCSS, Structuring pages with CSS,
 Inline CSS, Internal CSS, External CSS, Multiple styles, CSS Fonts
 CSS Box Model
 id Attribute, class Attribute
 HTML Style Tags
 Linking a style to an HTML document
Lab:
 Apply inline, internal, and external CSS to change colors of certain text portions, bold,
underline, and italics certain words in the previously created HTML resume form.
form

Session 4: JavaScript
Lecture:
 Introduction to JavaScript
 Variables in JavaScript
 Statements, Operators, Comments, Expressions
Expressions, and Control Structures
 JavaScript Scopes
 Strings, String Methods
 Numbers, Number Methods
 Boolean Values
 Dates, Date Formats, Date Methods
 Arrays, Array Methods
Lab:
 Practice writing basic JavaScript programs for better understanding of the language constructs
Sessions 5 & 6: JavaScript
Lecture:
 Objects, Object Definitions, Object Properties, Object Methods, Object Prototypes
 Functions, Function Definitions, Function Parameters, Function Invocation, Function Closures
 Introduction to Object Oriented Programming in JS
o Method, Constructor, Inheritance, Encaps
Encapsulation,
ulation, Abstraction, Polymorphism
Lab:
 Write a JavaScript program to sort a list of elements by implementing a sorting algorithm.
algorithm
 Write a JavaScript program to list the properties of a JavaScript object.

Sessions 7 & 8: JavaScript

Lecture:
 Document Object Model (DOM)
o Object hierarchy in JavaScript
o HTML DOM, DOM Elements, DOM Events
o DOM Methods, DOM Manipulation
 Forms, Forms API, Forms Validation
 Regular Expressions
 Errors, Debugging
 Introduction to Browser Dev Tool
 Pushing code quality via JSLint tool
Lab:
 Write a JavaScript function to get First and Last name from the previously created Resume
form
 Validate the entire Resume
esume form using client-side JavaScript
 Write a JavaScript function to validate whether a given value is RegEx or not.

Session 9: jQuery
Lecture:
 Introducing to jQuery
 jQuery selectors
 jQuery events
 jQuery animation effects
 jQuery DOM traversal and manipulation
 Data attributes and templates
 jQuery DOM utility functions
 jQuery plugins
Lab:
 Write a jQuery program to get a single element from a selection of elements of a HTML page.
 You are having sample data ata for the link. Write jQuery ccode
ode to change the hyperlink and the
text of an existing link.
 Write a jQuery program to attach a click and double
double-click events to all <p> elements.
element
 Write a jQuery program to hide all headings on a page when they are clicked.
o Also find
ind the position of the mouse pointer relative to the left and top edges of the document.

Sessions 10 & 11: JSON & Ajax

Lecture:
 JSON: JavaScript Object Notation (JSON)
o Introduction and need
eed of JSON
o JSON Syntax Rules
 o JSON Data - a Name and a Value,
o JSON Objects, JSON Arrays, JSON Files
o JSON parsing
 Ajax
o Introduction to Ajax
o Ajax Framework
o Ajax Architecture
o Web services and Ajax
o Ajax using JSON and jQuery
Lab:
 Create a page showing live score/feed using Ajax and JSON from a live sport/news service end-
point given by the faculty

Session 12: Introduction to Node.js

Lecture:
 Introduction to Node.js
 Browser JS vs. Node.js
 ECMAScript 2015 (ES6)
 Node.js REPL
Lab:
 Install Node.js 12.x.x LTS version on your machine
 Write a recursive function in Node.js
 Write a Node program that prints all the numbers between 1 and 100, each on a separate line.
A few caveats:
o if the number is divisible by 3, print "foo"
o if the number is divisible
ible by 5, print "bar"
o if the number is divisible by both 3 and 5, print "foobar"

Sessions 13 & 14: Node.js Asynchronous Programming

Lecture:
 Introduction to Asynchronous programming and callbacks
 Promises and async & await
wait
 The Event Loop and Timers
Lab:
 Assignment on JavaScript callback functions
 Assignment on Timers, Promises, and Async & Await

Session 15: Node.js Modules

Lecture:
 Understanding Node modules, exports, and require
 Introduction to npm
o package.json and package
package-lock.json files
o Install, update, and manage package dependencies
o Local and global packages
Lab:
 Create a module and import it in other programs
 Install a module/package using npm

Session 16: Node.js Modules – fs and http

Lecture:
 File I/O – Sync & Async Methods
  HTTP Module – Building
ilding an HTTP server
 Developing a Node web application
Lab:
 Write a program to create a new file and write some content to it in synchronous mode and
read
d and display file contents on sstandard output in async mode
 Build a simple Node.js web application serving both HTTP GET and POST methods

Session 17:: Introduction to Express

Lecture:
 Introduction to Express
 Getting started with Express
 Application, Request and Response Objects
 Routes and Middlewares
 Templates, Template Engines, and Rendering Views
Lab:
 Use Node and Express to write a simple web application that consists of at least 5 route
implementations
 Rebuild any previous Node assignment using Express and a template engine

Session 18:: Introduction to React

Lecture:
 Introduction to React
 Getting started with React
 React Elements and React C Components
 Function and Class Components
 Working with React Components
omponents and Props
o Compose components
omponents
o Render components
o Declutter components
omponents
Lab:
 Rebuild any previous plain HTML lab assignment using React
 Build a React Clock app showing time (hh:mm:ss) of any three countries

Sessions 19 & 20: React

Lecture:
 Introduction to State and Lifecycle
 Stateful components and llifecycle methods
 Props vs. State vs. Context
 Handling events
 Conditional rendering
Lab:
 Implement the following items in the React Clock app
o Update the time (hh:mm:ss) using State and Lifecycle methods
o Add a close function on each rendered clock component
o Assign background color of render
rendered clock components based on AM, PM

Session 21: React

Lecture:
 Lists and Keys
o Rendering Multiple Components
 o Basic List Component
 Working with forms and inputs
 Refs and the DOM
 Lifting state up
Lab:
 Implement and integrate a new feature in the React Clock app where one can select a country
time zone from dropdown list and click on “Add” button to render it.

Session 22: React

Lecture:
 Error Boundaries
 Composition vs. Inheritance
o Containment
o Specialization
 Thinking in React
Lab:
 Implement error boundaries at appropriate places in the React Clock app

Session 23 & 24: React-Redux

Lecture:
 Introduction to Redux
 Actions, Reducers, and Stores
 Usage with React
Lab:
 Make necessary changes in the design and implementation of React Clock app using React
React-
Redux to maintain the application state.

Session 25:: Responsive Web Design

Lecture:
 Introduction of UI Scripting
 The Best Experience for All Users
o Desktop, Tablet, Mobile
 Bootstrap
o Overview of Bootstrap
Bootstrap, Need to use Bootstrap
o Bootstrap Grid System, Grid Classes, Basic Structure of a Bootstrap Grid
o Typography
o Components – Tables, Images, Jumbotron, Wells, Alerts, Buttons, Button Groups,
Badges/Labels, Progress Bars, Pagination, List Groups, Panels, Dropdowns,
Dropdown Collapse,
Tabs/Pills, Navbar
o Forms, Inputs
o Bootstrap Themes, Templates
Lab:
 Update the design of the Resume form using Bootstrap