Full Stack Development

Course Code 22CSE53 CIE Marks 50

Course Type SEE Marks 50
Integrated
(Theory/Practical/Integrated) Total Marks 100
Teaching Hours/Week (L:T:P) 2:2:2 SEE 3 Hours
Total Hours 40 hours Theory + 10 Lab slots Credits 03
Course Learning Objectives: The objective of the course is to
● Illustrate the Semantic Structure of HTML and CSS
● Design Client-Side programs using JavaScript
● Understand the basics of React and create components and lifecycle
● Build applications using React JSX and Node.js
● Design databases using MongoDB
Module-1 HTML and CSS (08 hours)
Introduction to HTML: HTML Syntax, Semantic Markup, Structure of HTML Documents,
HTML5 Semantic Structure Elements
Introduction to CSS: What is CSS, CSS Syntax, Location of Styles, Selectors, The Cascade: How
Styles Interact, The Box Model, CSS Text Styling.
Textbook 1: Chapter 2, 3
Module-2 JavaScript and React Basics (08 hours)
JavaScript: Client-Side Scripting: What is JavaScript and What can it do? JavaScript Design
Principles, Where does JavaScript Go? Syntax, JavaScript Objects, The Document Object Model
(DOM), JavaScript Events, Forms.
The Life of a Component: A Custom Function Component, A Custom Class Component,
Properties, State
Textbook 1: Chapter 6 and Textbook 2: Chapter 1, 2
Module-3 Advanced React (08 hours)
The Life of a Component: A Note on DOM Events, Props Versus State, Props in Initial State,
Lifecycle Methods.
JSX: Whitespace in JSX, Comments in JSX, HTML Entities, Spread Attributes, Returning Multiple
Nodes in JSX.
Building the App’s component: Setup, start coding, css, The components, Logo and body, Button
Component, Forms
Textbook 2: Chapter 2, 5,7
Module-4 Node.js (08 hours)
Welcome to Node.js: Built on JavaScript, Asynchronous and evented, DIRTy applications, DIRTy
by default. Node programming fundamentals: Organizing and reusing Node functionality,
Asynchronous programming techniques, Sequencing asynchronous logic. Web application
development with Node: HTTP server fundamentals, Building a RESTful web service, Serving
static files, Accepting user input from forms, Securing application with HTTPS
Textbook 3: Chapter 1, 3, 4
Module-5 MongoDB (08 hours)
Getting Started: Documents, Collections, Databases, Starting MongoDB, Introduction to the
MongoDB Shell, Data Types,
Editing Documents: Inserting, Removing, Updating Documents.
Querying: Introduction to find, Query Criteria, Type-Specific Queries, $where Queries, Cursors.
Textbook 4: Chapter 2, 3, 4

PRACTICALMODULE
A–Demonstration (Compulsorily to be conducted):
Page 1 of 4
A1. Create a webpage with HTML describing your department. Use paragraph and list tags. A2. A2.
Apply various colors to suitably distinguish key words. Also apply font styling like italics,
underline and two other fonts to words you find appropriate. Also use header tags.
A3. Create links on the words e.g. “Wi-Fi” and “LAN” to link them to Wikipedia pages.
A4. Insert an image and create a link such that clicking on image takes user to other page.
A5. Change the background color of the page. At the bottom create a link to take user to the top of
the page.
PART – B (Compulsorily to be conducted):
B1. i Create a table to show your class time-table. (CSS and HTML)
ii Include course name, instructors, days of week and time slots. Include at least 5 courses
and make sure the table is properly formatted with appropriate table headers, rows and
cells.
B2. i Write an HTML page that contains a selection box with a list of 5 countries,
ii when the u user Select a country its capital should be printed next to the list;
iii Add CSS to Customize the properties of font of the capital (color, bold, and font size)
B3. Write a JavaScript to design a simple calculator to perform the following operations: sum,
product, difference and quotient (Java Script)
B4. Build your own Button component using React JS and render it three times. On user click,
it should alert which button was clicked.
B5. Build a form that accepts a first name and a last name. And instead of a boring "Submit"
button, make a button that says "Greet Me" that when clicked, will alert "Hello [first name] [last
name]!".
B6. Create a custom component for rendering each joke present in an array. Using the map
function, map through each object in the array. Use the custom component to render each object.
PART – C
C1. Create an HTTP server listening on port 1337, which sends Hello, World! to the browser and
using Express
C2. Develop a simple react app that displays an unordered list of fruits and ordered list of
selected students for an event
C3. Implement node.js and mongo dB application for inserting and displaying the data.

PART D
(Open Ended Problems: any one)
1. Create a Tic Tac Toe game using React JS
2. Develop React app that performs student registration to a course. It should also display list
of students registered for any selected course.

Course Outcomes: At the end of the course the student will be able to:
22CSE53.1 Apply HTML and CSS syntax and semantics to build web pages
22CSE53.2 Design Client-Side Scripts using JavaScript

22CSE53.3 Apply the concepts of React to create Components and design applications
using the Lifecycle method
22CSE53.4 Build applications using React JSX
22CSE53.5 Develop applications using Node.js
22CSE53.6 Construct Databases using MongoDB

Page 2 of 4
 Sl. Name of the Name of the Edition
Title of the Book
No Author/s Publisher and Year
.
Textbooks
1 Fundamentals of Web Randy Connolly, Pearson Education
Development Ricardo Hoar India 1st 2015
Edition
React: Up & Running: O'Reilly Media, Inc.
2 Building Web Stoyan Stefanov 2nd 2021
Edition
Applications
Mike Cantelon,
3 Node.js in Action Marc Harter, Manning
T.J. Publications 1st 2014
Holowaychuk, Edition
and
Nathan Rajlich
MongoDB: The Shannon O'Reilly Media, Inc.
4 Definitive Guide Bradshaw, 3rd 2019
Edition
Eoin Brazil, Kristina
Chodorow
Reference Books
Learning PHP,
MySQL & O’Reilly 4th Edition,
1 JavaScript with jQuery, Robin Nixon
Publications 2015
CSS and HTML5
Professional JavaScript Wrox/Wiley India 3rd Edition,
2 for Web Developers Nicholas C Zakas 2012
3 Node.js Web David Herron Packt Publishing 4th
Development 2018 eddition
Anthony
Accomazzo, Ari
Lerner, Nate
Fullstack React: The
Murray, Clay 1st 2017`
4 Complete Guide to Fullstack.io
Allsopp, David ` edition
ReactJS and Friends
Gutman, Tyler
McGinnis

Web links and Video Lectures (e-Resources):

● Web links and Video Lectures (e-Resources):
NPTEL Videos on Compiler Design:
● https://archive.nptel.ac.in/courses/106/104/106104123/
NPTEL Video on System Programming:
● https://www.youtube.com/watch?v=zj2VsRnji6c&list=PLM-jfaoaU5iy0Zq-NlWycsfzyMKrAV
7jw
● NPTEL Video on System Software: https://www.youtube.com/watch?v=VG9VopzV_T0

Course Articulation Matrix

Page 3 of 4
Course Program Outcomes (POs)
Outcomes
(COs) P P P P P P P P P P P P P P
O O O O O O O O O O O O S S
1 2 3 4 5 6 7 8 9 1 1 1 O O
0 1 2 1 2
22CSE53.1 3 1
22CSE53.2 2 1
22CSE53.3 2 2
22CSE53.4 2
22CSE53.5 2
22CSE53.6 2 1

1: Low 2: Medium 3: High

Page 4 of 4